百度空间 模板制作(要图)
登录空间后:上面有我的空间(点击下拉按钮)-模板-我制作的模板-创建新模板,这时就会跳出一个窗口,出现可编辑的CSS代码文件。但是,这并不是你自己当前使用的模板的代码,而是一个百度默认模板的代码,这个是无法选择的,百度目前只能提供这一种模板供编辑。
如果你想在某个比较喜欢的模板的基础上进行编辑,就需要先把这个模板的CSS代码复制出来,然后把“自定义模板”里出现的那个代码完全替换掉,接下来就可以对想修改的部分进行编辑啦。
在编辑CSS文件的窗口下方有四个选项:“保存”“保存并应用”“取消”“预览”,一定要搞清楚这几个选项的区别,在每次修改之后最好先点一下“预览”看看有没有错误,之后再“保存”,最好不要在编辑状态下直接点“保存并应用”,而是先保存,然后再次预览确定每个页面都没问题之后再选择“应用此模板”。
3.一般我们对选择的模板不需要经过大的修改,只要修改些细节就好了,比如背景图片的更换,最上面横幅的更换。
4.
空间背景颜色/鼠标设置区域
如果要设置特殊风格的鼠标,需要在代码文件的第一行加上:
a:hover {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/187.ani')}
body {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/1547.ani')}{background-color:#FFFFFF}
第一行括号内的链接是点到链接时的鼠标状态,第二行括号内的链接是正常的鼠标状态,第二行后边的background-color后边的颜色代码是指整个空间的背景颜色。六位颜色代码可以在这里找到。
如果不需要设置特殊鼠标,那么这一部分只保留“body {background-color:#颜色代码}”就可以了。
空间名称/标题图片设置区域
#header{height:300px;background:url(……)}
这是空间标题栏的主体部分,{}内的文字解释如下:
“height”指标题栏的高度,这个要与你放在标题栏的图片高度相同;后边的括号内是你要做标题的图片的链接,宽度为1024px的图片比较合适,图片高度可以根据自己的喜好决定。
#header div.lc{}
#header div.rc{}
如果想在标题的左右两边放置不同的图片,就在第一行的{}内加上左边的图片链接,格式为{background:url(……) no-repeat left}。第二行的{}内加上右边图片的链接,格式为{background:url(……) no-repeat right}。否则{}内留空就可以。
#header div.tit{top:30px;left:20px;line-height:22px;font-size:30px;font-family:隶书}
这里要设置的是空间名称的位置(top后边的数字是文字离空间标题栏上边界的距离,left后边的数字是离左边界的距离);大小(font-size后边的数字);字体(font-family后边的文字)。
#header div.tit a.titlink{color:#......;text-decoration:none}
#header div.tit a.titlink:visited{color:#......;text-decoration:none}
这两行应该是设置空间名称文字的颜色,但是我搞不清楚2行有什么区别,所以索性都设成一样的好了。如果想要把文字设成设成黑体或下划线,就把text-decoration:后边的none相应地改成bold或underline。
#header div.desc{top:60px;left:20px;color:#......;font-size:13px}
这行是设置空间简介(空间名称下边那行小标题)的位置、大小和字体的,设置方法同空间名称的设置。
#tabline{top:415px;background-color:#......}
这个是指TAB菜单栏(主页/博客/相册/好友/设置那一行)下边的分隔线的位置和颜色,top后边的数字是指分割线离空间标题栏上边界的距离,这个数字要根据标题栏的高度和菜单的位置(是与图片重叠或位于图片下方)来决定。
#tab{top:390px}
这个是指TAB菜单栏的位置,top后边的数字是指距空间标题栏上边界的距离。
#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:2px;line-height:20px;background-color:#......;color: #……;font-size:14px;font-weight:bold;}
这一行是指TAB菜单被选中后的状态,文字的位置,文字后边背景的颜色,文字颜色,字号等等。
#tab span{color:#F93A60;font-size:14px}
这个是指TAB菜单中间的分隔符(就是那条竖线)的颜色和大小。
#tab a:link{color:#......;text-decoration:none;font-size:14px}
这一行是指TAB菜单未被选中时的状态,文字颜色,其它定义,字号。
#tab2部分是TAB菜单下方的第二TAB菜单栏(比如“设置”下方的“基本选项”“模板设置”这一栏)的设置,设置方法同上。
.stage{background-color:#......}
这个是空间内容区域(TAB菜单栏以下直到空间底部)的背景颜色/图片设置,不想设置也可以把{ }留空。
博客文章标题/文字设置区域
#m_blog div.tit{font-size:14px;font-weight:bold;line-height:50px;text-indent:60px}
博客文章标题栏的设置,line-height后边的数字是用来定义标题栏高度的,text-indent后边的数字是指标题文字向右缩进的距离,如不需要缩进可设为0。如果想在每篇文章的标题前加上图片,可以在{}内的结尾处加上“background:url(图片链接) no-repeat”,然后按照加入的图片尺寸相应调整标题栏高度和文字缩进处的数值。QQ里的那些可爱的动画表情图标都可以拿来用,另存后上传到百度空间的相册就可以啦。
#m_blog div.tit a{color:#......;font-size:14px;font-weight:bold}
博客文章标题链接的状态设置。
#m_blog div.tit a:visited{color:#047304}
博客文章标题被选中后的状态设置。
#m_blog div.date{margin:5px 0 8px 0;color:#666666;text-align:right}
博客文章日期的设置,margin指距标题栏的距离,text-align指日期的位置(居左居右或居中)。
#m_blog div.cnt{color:#666666;line-height:20px;font-size:14px}
博客文章内容设置:文字颜色,行距,字号。
#m_blog div.more a{color:#047304;font-size:14px}
“阅读全文”链接状态设置。
#m_blog div.more a:visited{color:#047304}
博客文章标题链接被选中后的的状态设置。
#m_blog div.opt{color:#047304;font-size:12px}
文章操作区(如编辑、评论等)的设置。
#m_blog div.opt a{color:#047304;font-size:12px}
文章操作区链接状态设置。
#m_blog div.opt a:visited{color:#047304}
文章操作区链接被选中后的状态。
#m_blog div.line{margin-top:10px;line-height:60px;background:url(图片链接) no-repeat center}
文章和文章之间的分隔线设置,margin-top指分隔线与上一篇文章之间的距离,line-height指分隔线区域的高度,结尾处可定义分隔线的位置(no-repeat center指不重复,居中,repeat-x指横向重复)。
音乐播放器的设置
如果觉得空间默认的音乐播放器不好看,可以在空间最后加上这段代码来改变播放器的大小和颜色:
#phx{FILTER:Alpha(Opacity=60,FinishOpacity=36,Style=0,StartX=20,StartY =40,FinishX=0,FinishY=0)gray;WIDTH:500px;HEIGHT:45px}(这个是我的播放器代码)
这段代码有点复杂,捡能看懂的部分介绍一下吧,其他的还没摸索出来呢:
Opacity=透明度,可以用0-100之间的数值,数值越低透明度越高;FinishOpacity=过度透明度,即边缘的透明度(这个我还没搞懂怎么玩);gray=颜色/风格,可以设为默认、gray、xray、invert等,可以自己尝试;WIDTH后边的数字表示播放器的宽度, HEIGHT后边的数字表示播放条的高度
http://hi.baidu.com/tchzx/blog/item/c8a3d613131cae025baf53b0.html
跟我一起玩百度空间CSS教程+090+ (从"零"开始学玩百度空间)
http://hi.baidu.com/tchzx/blog/item/c8a3d613131cae025baf53b0.html
谭诚工作室: http://hi.baidu.com/tchzx
1.让你看懂css各个参数http://hi.baidu.com/tchzx/blog/item/1e0453e7c351052eb838200d.html
2.百度空间CSS使用说明http://hi.baidu.com/tchzx/blog/item/b360d33fddd2b0c27c1e714a.html
3.怎样编写CSS的! http://hi.baidu.com/tchzx/blog/item/d75fd7a2f36821adcaefd0e1.html
4.CSS代码解密http://hi.baidu.com/tchzx/blog/item/f106f71f339b06f5e1fe0bfe.html
5.一个CSS的漏洞http://hi.baidu.com/tchzx/blog/item/c1e74cfb9c6c8164024f560d.html
6.增加自定义模块功能http://hi.baidu.com/tchzx/blog/item/c207c91b9f69d7faae513303.html
7.更换主体及文章的背景http://hi.baidu.com/tchzx/blog/item/f7b0d609ad57ba82d0581b15.html
8.透明flash代码http://hi.baidu.com/tchzx/blog/item/5012e1cd15168a510eb345e3.html
9.百度空间十大宝藏http://hi.baidu.com/tchzx/blog/item/7e3daa6eb9da40da80cb4a62.html
10.制作个性化的标题栏http://hi.baidu.com/tchzx/blog/item/ae077109a6518aaf2fddd434.html
11.看到更多的百度空间http://hi.baidu.com/tchzx/blog/item/dbe16c634f5e47600d33fa07.html
12.百度空间的8个优缺点http://hi.baidu.com/tchzx/blog/item/75d054432e8b9e119213c606.html
13.专栏分割线的代码修改http://hi.baidu.com/tchzx/blog/item/32c416df0880ac1362279831.html
14.添加自己的LOGO图片http://hi.baidu.com/tchzx/blog/item/0bee1a9599002e087af48000.html
15.宣传百度空间的方法http://hi.baidu.com/tchzx/blog/item/a8f9758b7e459512c9fc7a59.html
16.添加多首背景音乐http://hi.baidu.com/tchzx/blog/item/5339282e42b2bd504ec22617.html
17.设置透明背景图http://hi.baidu.com/tchzx/blog/item/f4cb90dd7fad81345882ddb6.html
18.更改空间的鼠标样式http://hi.baidu.com/tchzx/blog/item/50c2c15cc3d17f43faf2c0b6.html
19.在空间里加入滚动条http://hi.baidu.com/tchzx/blog/item/702631d319d09a003bf3cfb6.html
20.透明的背景音乐的播放器http://hi.baidu.com/tchzx/blog/item/97f7b909d38ada246a60fbb6.html
21.透明个性化滚动条http://hi.baidu.com/tchzx/blog/item/3013b5fbeaff41224e4aeab6.html
22.给链接添加背景色效果代码http://hi.baidu.com/tchzx/blog/item/effb6427fc39db03908f9db6.html
23.显示"点击给你发消息"怎么在空间做! http://hi.baidu.com/tchzx/blog/item/62e02f3893d9c524b9998fb6.html
24.去掉文章题目下划线http://hi.baidu.com/tchzx/blog/item/ce8c044f1019db36aec3abb6.html
25.常用插入图片位置的代码http://hi.baidu.com/tchzx/blog/item/83257c89c9b823b30e2444b5.html
26.如何隐藏播放器而不影响音乐播放http://hi.baidu.com/tchzx/blog/item/e4233edbfb147e66d1164eb5.html
27.如何有字体阴影http://hi.baidu.com/tchzx/blog/item/b1d78094e72b511ed31b70b5.html
28.自制闪字空间名称http://hi.baidu.com/tchzx/blog/item/df49ca114a626b10b8127bb5.html
29.解决回车换两行的问题http://hi.baidu.com/tchzx/blog/item/b420a086e4fe533e66096eb5.html
30.调整一下行距http://hi.baidu.com/tchzx/blog/item/b8bc514e84b1fd09b2de05b5.html
31.让空间拥有精美flash背景http://hi.baidu.com/tchzx/blog/item/5fc12af5ea17b525bd3109b5.html
32.让空间自动弹出对话框!http://hi.baidu.com/tchzx/blog/item/5339282e4cd0b7504ec226b5.html
33.修改blog显示的文字颜色大小http://hi.baidu.com/tchzx/blog/item/691c36ad2e075a094a36d6b5.html
34.如何让你的浏览器滚动条变色http://hi.baidu.com/tchzx/blog/item/af686238d73fbd2396ddd8b5.html
35.为评论和链接加上图片http://hi.baidu.com/tchzx/blog/item/b2c26759e6c5f82a2934f0b5.html
36.如何在"其它"下面加上图片http://hi.baidu.com/tchzx/blog/item/6c1f975228ca5e0e0df3e3b5.html
37.百度空间的名称如何用艺术字?http://hi.baidu.com/tchzx/blog/item/0738f00331678cec09fa93b5.html
38.百度空间文字发光的方法http://hi.baidu.com/tchzx/blog/item/d5b9ff19f8f01a7adbb4bdb5.html
39.文字快速插链接http://hi.baidu.com/tchzx/blog/item/ca2b7e3166bd9f19eac4afb5.html
40.空间模块巧移动http://hi.baidu.com/tchzx/blog/item/b4abaa4b8efb5ff083025cb4.html
41.个性化你的IP显示,自定义颜色http://hi.baidu.com/tchzx/blog/item/378ed71659cc8718962b43b4.html
42.全透明http://hi.baidu.com/tchzx/blog/item/c12a7a1e97f322f41ad576b4.html
43.空间背景半透明http://hi.baidu.com/tchzx/blog/item/b4e8bda1faf95e8b461064b4.html
44.如何在百度空间的文章标题周围加花边图案?http://hi.baidu.com/tchzx/blog/item/55a6221fbf22fdc8a68669b4.html
45.关于百度空间照片大小限制的问题!!! http://hi.baidu.com/tchzx/blog/item/f7b0d609ab36b082d0581bb4.html
46.如何在百度空间发表文章时插入FLESH动画?http://hi.baidu.com/tchzx/blog/item/f106f71f32c101f5e1fe0bb4.html
47.怎样换百度空间的背景http://hi.baidu.com/tchzx/blog/item/c94729dd492b50d98c1029b4.html
48.做分割线的方法http://hi.baidu.com/tchzx/blog/item/f6fbb77e136749380dd7dab4.html
49.在百度空间里面添加自己的特效http://hi.baidu.com/tchzx/blog/item/69db8044561f364c500ffeb4.html
50.在文章中快速插入图片http://hi.baidu.com/tchzx/blog/item/437f5eee9b8a79fbb3fb95b4.html
51.添加计数器的两种方法http://hi.baidu.com/tchzx/blog/item/0731f5d3cecb3ddfa8ec9ab4.html
52.如何在空间顶部加入图片http://hi.baidu.com/tchzx/blog/item/4b9b8cd437fbab01a08bb7b4.html
53.发表评论框的图片http://hi.baidu.com/tchzx/blog/item/b4abaa4b8ef45ff083025cab.html
54.改变空间主页名称和简介的字体大小http://hi.baidu.com/tchzx/blog/item/7e3daa6e94237dda80cb4aab.html
55.给超链接添加按钮效果http://hi.baidu.com/tchzx/blog/item/95f73d292412ccfe98250aab.html
56.如何给评论框添加背景http://hi.baidu.com/tchzx/blog/item/c26ece17518b4b09c83d6df9.html
57.Iframe 用法的详细讲解http://hi.baidu.com/tchzx/blog/item/e23e207f172e2b0828388a8e.html
58.背景图片素材01 http://hi.baidu.com/tchzx/blog/item/bc11d02aa2db092dd52af10f.html
59.图片素材20060929 http://hi.baidu.com/tchzx/blog/item/6d12563d821675ee3c6d970e.html
60.我的自定义设计 http://hi.baidu.com/tchzx/blog/item/3c6ab5b731ac21f431add193.html
61.CSS鼠标样式大全 http://www.hi128.cn/?250/action_viewspace_itemid_37.html
62.跟我一起玩百度空间的音乐和视频+ http://hi.baidu.com/tchzx/blog/item/398833a85082a0b1ca130c21.html
63.为增加一个滚动条 http://hi.baidu.com/tchzx/blog/item/b54a0bf4d32be5ef7709d70b.html
64.空间模块巧移动 + 文字快速插链接 http://hi.baidu.com/tchzx/blog/item/d6369b82c9d0e2bf6d811914.html
65.怎么去掉百度空间里模块的框框!http://hi.baidu.com/tchzx/blog/item/5012e1cd2f64b0510eb345b1.html
66.基本颜色代码+ http://hi.baidu.com/tchzx/blog/item/e3f0317aa7d065ed2f73b329.html
67.在你的空间中加入幽默元素.. http://hi.baidu.com/tchzx/blog/item/5612858b86b287d3fc1f10f0.html
68.百度空间吧[精品]贴+ http://hi.baidu.com/tchzx/blog/item/06cf65d06bb7be8fa1ec9cf9.html
69.如何在博客上---中--下加入图片(时钟)http://hi.baidu.com/tchzx/blog/item/8e2cb0452fc7b226cefca333.html
72.教你10个你未必知道的CSS技巧! http://hi.baidu.com/tchzx/blog/item/ee3cb41c0680918b86d6b60e.html
73.用CSS进行百度空间样式设计! http://hi.baidu.com/tchzx/blog/item/f7b0d609a75eac82d0581b0c.html
74.百度空间自动友情链接 http://hi.baidu.com/tchzx/blog/item/f235a64477276882b2b7dc98.html
75.一起玩百度空间帮助 http://hi.baidu.com/tchzx/blog/item/e4233edbfee96366d0164e98.html
76.一起玩百度空间榜单 http://hi.baidu.com/tchzx/blog/item/5173043b98a1f8ea15cecb99.html
77.点对点宣传百度空间 http://hi.baidu.com/tchzx/blog/item/e859cc13444c3823dc540164.html
78.百度空间常见27+问题 http://hi.baidu.com/tchzx/blog/item/9636b38f8c02a5eef11f365a.html
79.怎样让百度、Google搜到你的博客 http://hi.baidu.com/tchzx/blog/item/3c6ab5b70df03df430add15f.html
80.如何加上一个个性时间网页上?http://hi.baidu.com/tchzx/blog/item/f467a7ec9522603d279791a5.html
81.教你怎样让背景自动更新,包括头背景 http://hi.baidu.com/tchzx/blog/item/92eb968f3bd93afa503d927a.html
82.在 CSS 中关于字体处理效果的思考 http://hi.baidu.com/tchzx/blog/item/4ac6be3876097ac2d4622526.html
83.如何置顶文章及美化自定意模块! http://hi.baidu.com/tchzx/blog/item/6c1f97523edf440e0df3e382.html
84.如何美化页眉部分 http://hi.baidu.com/tchzx/blog/item/d6f1ecc4d2bb75a98326ac83.html
85.更换背景及滚动轴颜色和空间半透代码 http://hi.baidu.com/tchzx/blog/item/4dd018306adb8e99a8018e8c.html
86.如何设置标题.简介及文章字体为光晕字 http://hi.baidu.com/tchzx/blog/item/55a6221f8acae6c8a786698c.html
87.用CSS来控制网页背景 http://hi.baidu.com/tchzx/blog/item/cce94b08ec6526950b7b8228.html
88.CSS产生的特殊效果 http://hi.baidu.com/tchzx/blog/item/e763a11ebdb7c61f40341728.html
89.用Css控制IE5.5浏览器中滚动条 http://hi.baidu.com/tchzx/blog/item/4dd0183097408399a8018e29.html
90.css语法(百度空间) http://hi.baidu.com/tchzx/blog/item/e5e21ed8ac5b8a3532fa1c29.html
——点击左边栏的“空间装扮”
——点击左上角的“模板”
——找到右上角有个“正在使用的模板”下的“编辑此模板”,点击它,就进入了你空间的CSS代码
——在CSS代码中找到“空间名称&简介区域”的代码“#header{height:300px;background:url() #FFFFFF;background-repeat:no-repeat;background-position:top center}”
——然后将你喜爱的图片地址复制到这段代码中的()括号中。注意,如果图片只是在你的本地硬盘里,一定要将图片上传到空间相册里,然后将该图片地址复制到()括号里。
其中“300px”是根据图片大小进行增加或者减少,“#FFFFFF”是背景的颜色,这两个是我自己在我的CSS代码改编的,所以与原代码不同。
希望能够帮你!
最简单的方法:(点下面各图标)
百度空间
管理中心
空间装扮
模板
创建新模板
编辑CSS自定义模板
然后会有ccs出现
就会有很多很多的代码
这就是你空间的布置代码
点一下上面的 CSS说明 在这里你可以了解各代码的意思,之后你就可以按照你的喜欢代换各个相关项就行了,下面的参考资料很详细,你明白css之后就看看那些吧!不难的
还有,注意!!!!!!!!!!!
你的图片代码要是网络地址,不然会显示不出来的
员昭克林: 进你的空间登录,点“管理中心”-----点“空间装扮”---------“模板”----------我制作的模板-------管理我制作的模板-------创建新模板----------找到“#header{BACKGROUND:URL”,后面括号里面是头部的图片地址,用你的图片地址替换. #main...
资溪县17850923042: 怎样制作百度空间模板.?
员昭克林: .打开你要看的那个空间,点右手键,菜单上会有一个选项“查看源文件”,点这个后会弹出一个记事本文件,在这个文件中查找“CSS”,直到出现这种格式的文字 “href="/msnib/css/item/ed14a84473384f82b2b7dcb2.css">”(以MSNIB...
资溪县17850923042: 怎么制作百度空间模块?
员昭克林: (1)空间主页-设置-空间装扮-增减模块-自定义模块1(或2,3,4) 然后编辑 (2)编辑 空间主页,自定义模块1 设置,进行标题等设置 (3)然后进行css设置 空间主页-设置-空间装扮-模板-编辑此模板 找到如下代码 自定义模块1 #m_mylink1 div....
资溪县17850923042: 百度空间模板制作及CSS详细讲解?
员昭克林: 1.如何更换空间背景? 打开高级设置,再自定义CSS,看到里面的第3行和第4行都是 header div.lc{background:url(header div.lc{background:url ([img] http://img.baidu.com/hi/temp13/hdl.gif[img]) no-repeat} 第三行的是标题栏左边的图片,第4行是...
资溪县17850923042: 百度空间模板制作背景图片问题 - ?
员昭克林: 把你的图片用PS或者光影魔术手裁剪成合适大小然后按下面放在替换原背景. 进你的空间登录,点“管理中心”-----点“空间装扮”---------“模板”----------我制作的模板-------管理我制作的模板-------创建新模板----------找到“#header{...
资溪县17850923042: 如何自己制作百度空间模板??
员昭克林: 最佳答案 打开你的空间- 点击设置 -点击模板设置 -点击创建新模板 点开后会看到里面有很多代码就对了 下面就开始自己设计了 这个是关于百度空间的设计的教程 简单代码可以参照百度官方CSS说明:http://www.baidu.com/search/hi/hi_css.html 这里面有教程: http://zhidao.baidu.com/question/49155225.htmlhttp://zhidao.baidu.com/question/28669235.html?si=7
资溪县17850923042: 百度空间的模板怎么制作,要运用什么软件么,还是要下载什么东西啊??
员昭克林: 百度空间的DIY原理和QQ空间的DIY原理不 同/百度空间要在别人编辑的基础上在加工必须先获得别人模板的CSS代码,然后进行一系列的位置,颜色以及图片的修改,当然框架也可以改掉的.百度空间如果你是说拿自己的照片做背景的话,可以...
资溪县17850923042: 谁能帮我做个百度空间版模啊?要现成的,别复制空间代码. - ?
员昭克林: 楼主可以自己做.先点击'我的空间'-'装扮空间'找一个自己喜欢的模版,选择'使用',然后点击'模板'-'编辑此模板',出现CSS,找到下面这串字符,把要用的图片地址放在括号里,就行了.楼主最好找个和你的图片一样的竖版的模板,那样好看点,一般的模板都是横版图片的#header{height:560px;background:url(图片地址) no-repeat center top;margin-top:px; }
资溪县17850923042: 百度空间模板怎么做??
员昭克林: 先上传图片,然后复制图片的地址, 按自义定,按模块,然后按大图,把网止粘贴上去,确定后就行了
资溪县17850923042: 在百度空间里怎样制作自己的模板??
员昭克林: 用鼠标拖动,步骤如下: 你先登陆你的空间后点设置——高级设置——开始自定义设置——在下面就会显示你空间的所有模块了~ 先点最小化(就是每个模块上面有“≡”“-”和“X”)这样三个符号~ “-”表示最小化,“X”表示关闭此模块(关闭后也就是不在主页上显示,但可以恢复的),“≡”表示拖动到某个位置~ 你先全部最小化后,把鼠标指针指在“≡”上面,然后按住鼠标左键进行拖动,拖动到你想要的位置