如何制作百度空间模板？
\u5982\u4f55\u5236\u4f5c\u767e\u5ea6\u7a7a\u95f4\u6a21\u677f?
\u7a7a\u95f4\u70b9\u88c5\u626e\uff0c\u6a21\u7248\uff0c\u81ea\u5b9a\u4e49\uff0c\u968f\u4fbf\u9009\u4e00\u4e2a\uff0c\u4e0b\u4e00\u6b65\uff0c\u70b9css\u5c06\u4ee5\u4e0b\u4ee3\u7801\u52a0\u5165
div#header div.tit{display:none;} \uff08\u5c4f\u853d\u7a7a\u95f4\u540d\u79f0\u8bed\u53e5\uff09
div#tab{display:none;} \uff08\u5c4f\u853d\u7a7a\u95f4\u680f\u76ee\u5bfc\u822a\uff09#mod_profile.mod{*/display:none;}
\u70b9\u51fb\u7a7a\u95f4\u88c5\u626e\u2014\u2014\u70b9\u51fb\u6311\u9009\u6a21\u677f\u2014\u2014\u70b9\u51fb\u53f3\u65b9\u201c\u6211\u4e5f\u6765\u5236\u4f5c\u201d\u2014\u2014\u9009\u62e9\u201c\u53ef\u89c6\u5316\u7f16\u8f91\u201d\uff08CSS\u6bd4\u8f83\u590d\u6742\uff0c\u521d\u5b66\u8005\u9002\u5408\u7528\u53ef\u89c6\u5316\u7684\u3002\uff09\u7136\u540e\u4e00\u6b65\u4e00\u6b65\u505a\u5c31\u53ef\u4ee5\u4e86\u3002
\u5982\u679c\u60f3\u505a\u7684\u590d\u6742\u70b9\uff0c\u5728\u9009\u62e9\u597d\u6a21\u677f\u57fa\u7840\u540e\uff0c\u4e0b\u65b9\u4f1a\u6709\u4e00\u4e2a\u201c\u5207\u6362\u5230\u590d\u6742\u6a21\u677f\u7f16\u8f91\u201d\u70b9\u51fb\u5373\u53ef\u3002
现在百度空间新增了可视化编辑器，CSS 代码编辑器也提供了一套基准代码，框架结构非常完整，所以现在 hier 们制作模板可以说是易如反掌啦。 先说可视化编辑器。进入你的空间，点“管理中心”——“空间装扮”——“挑选模板”——“我也来设计”，就可以进入可视化编辑器了。 第一步，你选择一个基准的色调，然后点击“下一步”。 第二步，你可以设置背景图片和模块位置等信息，之后设置好模板的名称、标签，以及色系，就可以保存了。 这是最简单的制作模板的方法。下面，就让我再来详细说说用 CSS 代码怎么实现精密的编辑。 基准模板已经保存在了你的自定义模板中。你需要调出来。进入空间装扮，然后点击“挑选模板”——“我设计的”，找到刚刚做好的基准模板，点“编辑”——“CSS 编辑器”。 你首先要做的是，往下翻页，找到“最新动态模块”下方的 /*---==css-edit code here==---*/ 这一行文字，把其下的所有文字全部删除。下方的这些代码是可视化编辑器多出来的代码，若不删除，那么后面做精密修改时，上方的 CSS 代码会与其下的 CSS 代码发生冲突，这样精密修改就无法实现。 1. 设置背景图片和文字颜色 找到“大背景颜色及背景图片设置”模块的第一行： #body{background:#f3f3f3;} background: 后面的是颜色代码，简单地说，你可以使用下面的颜色： white：白色 silver：银色 gray：灰色 black：黑色 red：红色 yellow：黄色 green：绿色 lime：鲜绿色 blue：蓝色 skyblue：天蓝色 pink：粉色 magenta 或 violet 或 purple：紫色 cyan：青色 orange：橙色 brown：棕色 当然，可以使用的英文单词远远不只这些，【这里】列出的颜色的英文单词最多，绝大多数都可以使用。 在颜色下方添加一行 background-image: url(********) 可以设置背景图片，括号里的内容就是背景图片的 URL 地址。 背景图片默认是横向、纵向均平铺，如果觉得不好看，那么可以在小括号后面添加代码，请你根据需要选择合适的代码： no-repeat 表示横向、纵向均不平铺 repeat-x 表示仅横向平铺 repeat-y 表示仅纵向平铺 接下来是{color:#555b6e}这一行是设置页面的文字颜色的，你可以使用任意一个英文单词直接设置颜色，也可以参考 CSS 帮助，选择你所需要的颜色，然后复制其颜色代码，把原来的替换掉，就可以实现了。如 {color:red} 或者 {color:#ff0000} 就是设置文字颜色为红色。注意行末的分号一定不要丢掉。 background-position 是指背景图片的位置。你可以使用如下九中方案： left top：位于左上角 center top：位于正上方 right top：位于右上角 left center：位于左侧的正中央 center：位于正中央 right center：位于右侧的正中央 left bottom：位于左下角 center bottom：位于正下方 right bottom：位于右下角 在使用后六种方案的时候，可能会遇到因为加载出了整个空间页面，而导致图片的位置移动了。比如使用 center 方案的时候，同时你又设置了不平铺，等到整个网页加载出来的时候，你就看不到背景图片了。因为设置的是位于整个网页的正中央，而不是整个屏幕的正中央。包括前三种方案也一样，当网页下移时，图片也就随之滚动了。如果希望图片固定住，也就是实现所谓的“水印”效果，你可以在这行文字下方，添加一行文字： background-attachment:fixed; 这样图片就能固定住了。 示例代码： body{ background:lightblue;/*设置背景颜色为淡蓝色*/ color:black;/*设置文字的颜色为黑色*/ background-position: center;/*图片位于屏幕的正中央*/ background-attachment:fixed;/*固定图片，不随滚动条滚动*/ overflow-x:hidden; } 2. 设置文章中的链接样式 在“页面链接样式设置”板块中，有三个模块，分别是 #a（普通链接），#a_visited（已访问过的链接），#a_hover（鼠标移到链接地址上）。color 设置的是颜色，可以使用标准英文单词，也可以使用颜色代码，代码可以在 CSS 帮助中获取。font-size 设置的是字号（pt 是磅的单位，），如 12pt 表示 12 号字（等价于 Word 中的小四号字）。font-family 设置的是字体，可以直接使用中文，但是要注意在字体名称的前后加上英文的双引号（正确格式：" "，错误格式：“”）。font-style 设置的是字形（可以使用：normal 正常；bold 加粗；italic 倾斜；underline 下划线，多个样式可以组合，在中间加空格就可以。） 示例代码： a{ color: blue; /*设置基本链接颜色为蓝色*/ font-size: 12px; /*设置字号为 12 磅*/ font-family: Arial;/*设置字体为 Arial*/ font-weight: italic;/*设置链接字体倾斜*/ text-decoration: none; } a:visited{ color:magenta; /*设置已点击过的超链接颜色为粉色*/ font-size:12px; text-decoration:none } a:hover{ color:red; /*当鼠标移动到超链接上时，文字变为红色*/ font-size:12px; text-decoration:underline;/*当鼠标移动到超链接上时，加下划线*/ } 3. 头图设置 #header div.tit 设置的是大标题的样式，#header div.tit a.titlink 设置的是大标题的链接样式，#header div.tit a.titlink:visited 设置的是大标题已点击过的链接样式，#header div.tit a.titlink:hover 设置的是鼠标移到大标题上时的链接样式，#header div.desc 设置的是空间简介的文字样式。样式设置可以参考上面的设置链接样式的方式。另外补充一个，top 和 left 设置的是文字的位置，top 是距顶端多少像素，left 是距左端多少像素，请根据需要进行设置。 如果觉得标题那一行的背景图片不太适合，可以去色。找到 #header 这一行，把 background 这一行字全部去掉就可以了。如果你想换成别的图片，只需要更改括号里的 url 地址就可以了。 示例代码： #header{ height:160px;/*设置导航栏下方的正文的显示位置（数字越大越靠下方）*/ } #header div.tit{ color:green;/*设置主标题的颜色为绿色*/ line-height:30px; /*设置主标题的行高（相当于使用 Word 里段落设置的行距固定值，如果字号大则需要加大行距）*/ font-size:28px; /设置主标题的字号为 28 磅/ font-family:"幼圆"; /*设置主标题的字体为幼圆*/ font-style:bold;/*加粗字体*/ top:75px; left:370px; /*设置主标题的位置，距屏幕最顶端 75 像素（数字越大越靠下），距屏幕最左端 370 像素（数字越大越靠右）*/ } #header div.tit a.titlink{ color:green; font-size:28px; font-family:"幼圆"; text-decoration:none } #header div.tit a.titlink:visited{ color:green; font-size:28px; text-decoration:none } #header div.tit a.titlink:hover{ color:purple;/*当鼠标移动到主标题上时，字体变为紫色*/ } #header div.desc{ top:115px; left:300px;/*设置小标题的位置为距顶端 115 像素，距左端 300 像素*/ color:black;/*设置小标题颜色为黑色*/ font-size:20px;/*设置小标题字号为 20 磅*/ } 4. 导航栏设置 #tab 这一块设置的是“主页 博客 相册 个人档案 好友”这一行字的显示样式，设置方法可以参考上面的“设置链接样式”和“头图设置”。外补充一个，#tab span 设置的是两项之间的分隔符的颜色，如果不想要分隔符，只需要在大括号里输入 display:none 就可以实现了。如果觉得背景图片不适合，只需要把对应的 background 那一行字去掉，或者修改 url 地址，就可以实现了。 如果希望加大各项目之间的距离，可以将 margin-left 后面的数字加大些 示例代码： #tabline{ display:none } #tab{ top:150px; left:100px; line-height:26px; /*设置导航栏的位置和行高*/ background:none; height:26px; padding-top:3px; } #tab a{ color:darkblue;/*设置导航条的基本文字颜色为深蓝色*/ font-weight:normal; background:none; height:26px; margin-left:60px;/*两项之间的距离为 60 像素*/ } #tab span{ display:none;/*不显示两项之间的分隔符“|”*/ } #tab a:visited{ color:darkgreen;/*已点击过的导航条的项目变为深绿色*/ font-size:12px; font-weight:normal; text-decoration:none; } #tab a:hover{ color:lightgreen;/*当鼠标移动到导航条项目上时，颜色变为浅绿色*/ font-size:12px; font-weight:normal; text-decoration:none; } #tab a.on{ color:blue;/*当前页面指示为蓝色*/ font-size:12px; font-weight:bold;/*当前页面的指示加粗*/ } #tab a.on:visited{ font-weight:bold; color:pink;/*已点击过的当前页面指示为粉色*/ } #tab a.on:hover{ color:red;/*当鼠标移动到当前页面指示上时，文字变为红色*/ } 5. 模块设置 .mod 里的 magin-bottom 设置的是行距，数字越大，行距就越大。在这个大括号里，同样可以添加 font-size（字号）font-face（字体）font-style（字型）等参数，也同样可以添加背景图片。 .modtit 设置的是模块标题的样式（如“文章列表”、“友情链接”的文字样式），可以参考前面的方法进行设置。 .modth 里的 height 设置的是模块标题的行高，应该按照标题的字号大小进行合理设置。 .modpt 设置的是模块右侧的操作区（如友情链接右侧的“编辑”，文章列表右侧的“写新文章”等）的文字样式，可以参考前面的方法进行设置 如果觉得预览的时候，模块的背景色比较碍眼，挡住了背景图片，那么就需要进行去色处理。 找到代码中的 #modbox 模块 把这三行字去掉： border-left:1px solid #d8d8d8; border-right:1px solid #d8d8d8; background-color:#fff; 之后，把下面的 .modtl，.modtc，.modtr，.modbl，.modbc，.modbr 这几个模块也统统去掉，效果就实现啦。 示例代码： .mod{ margin-bottom:5px;/*模块内的行距为 5 像素*/ } .modhandle{ cursor:move } .modth{ height:26px;/*设置模块标题行高为 26 像素*/ } .modhead{ padding:2px 4px 0 4px; } .modopt{ padding:4px 4px 0 0; color:darkred;/*设置模块右侧的操作按钮颜色为深红色*/ } .modtit{ color:darkblue;/*设置模块标题为深蓝色*/ font-size:18px;/*设置模块标题字号为 18 磅（等价于三号字）*/ font-weight:bold;/*设置模块标题加粗*/ } .modbox{ padding:10px; } .modlabel{color:#000;font-size:12px;font-weight:bold} 这样，模板就做好了，你就可以设置模板名称、标签、色系和最佳适用版式啦。 你可以看一下效果图：
濡備綍鑷畾涔鐧惧害绌洪棿妯℃澘璁剧疆?
绛旓細棣栧厛锛屾垜浠渶瑕佺櫥褰曡嚜宸鐧惧害绌洪棿涓汉涓績锛岀劧鍚庢墦寮鐩稿叧鐨勨 妯℃澘璁剧疆鈥濄傛帴涓嬫潵锛屾垜浠渶瑕侀夋嫨涓涓兘澶熻繘琛岃嚜瀹氫箟妯℃澘璁剧疆鐨勬ā鏉匡紝 鍥犱负骞朵笉鏄郴缁熸墍鏈夌殑妯℃澘閮借兘澶熻繘琛岃嚜瀹氫箟鐨勬ā鏉胯缃紝鎴戜滑鍦ㄨ繖閲屾帹鑽愪娇鐢ㄥ浘鐗囦腑鍦堜腑鐨勬ā鏉匡紝杩欐牱鎴戜滑灏辫兘浣跨敤鑷畾涔夋ā鏉胯缃簡銆傛帴涓嬫潵锛屾垜浠偣鍑烩 妯℃澘鑷畾涔夆濓紝鐒跺悗杩涘叆鐩...
鐧惧害绌洪棿濡備綍璁剧疆妯℃澘
绛旓細鐧惧害绌洪棿璁剧疆妯℃澘鏂规硶锛氱偣鍑烩滆缃濋夋嫨鈥滈夋嫨妯℃澘鈥濓紝姝ゆā鍧楀垎涓衡滄垜鐨勬敹钘忊濆拰鈥滅簿褰╂ā鏉挎帹鑽愨濅袱涓儴鍒銆傚彲浠ュ湪绯荤粺妯℃澘鍒楄〃涓夋嫨涓娆惧枩娆㈢殑妯℃澘锛屽浠讳竴娆剧殑妯℃澘锛屾偍閮藉彲浠モ滈瑙堚濄佲滀娇鐢ㄢ濆拰鈥滄敹钘忊濄傛敹钘忥細鎮ㄦ渶澶氬彲浠ユ敹钘6涓ā鏉匡紝鍙鏀惰棌鐨勬ā鏉胯繘琛屸滈瑙堚濄佲滀娇鐢ㄢ濆拰鈥滃垹闄も濄
Photoshop璁捐鍒朵綔鐧惧害绌洪棿鐨勬ā鏉
绛旓細寰堝浜轰笉鏄庣櫧鐧惧害绌洪棿妯℃澘鏄鎬庢牱鍒朵綔鍑烘潵鐨勶紝涓嬮潰杩欎釜鏁欑▼浼氬府浣犱簡瑙ｈ繖鍏朵腑鐨勫師鐞嗭紝骞舵暀浼氫綘濡備綍瀹屾垚涓涓渶鍩虹鐨勬ā鏉垮舰鎬侊紝杩欏叾涓寘鍚簡浠庡湪Photoshop涓埗浣滆璁″浘锛屽埌鍒╃敤浠ｇ爜瀹炵幇璁捐鍥剧殑鎵鏈夋楠ゃ傛敞锛氭鏁欑▼涓娇鐢ㄧ殑PhotoshopCS鐗堟湰
濡備綍鍒朵綔鐧惧害绌洪棿妯℃澘?
绛旓細杩涘叆浣犵殑绌洪棿,鐐光滅鐞嗕腑蹇冣濃斺斺滅┖闂磋鎵濃斺斺滄寫閫夋ā鏉库濃斺斺滄垜涔熸潵璁捐鈥,灏卞彲浠ヨ繘鍏ュ彲瑙嗗寲缂栬緫鍣ㄤ簡銆 绗竴姝,浣犻夋嫨涓涓熀鍑嗙殑鑹茶皟,鐒跺悗鐐瑰嚮鈥滀笅涓姝モ濄 绗簩姝,浣犲彲浠ヨ缃儗鏅浘鐗囧拰妯″潡浣嶇疆绛変俊鎭,涔嬪悗璁剧疆濂芥ā鏉跨殑鍚嶇О銆佹爣绛,浠ュ強鑹茬郴,灏卞彲浠ヤ繚瀛樹簡銆 杩欐槸鏈绠鍗曠殑鍒朵綔妯℃澘鐨勬柟娉曘備笅闈,灏辫鎴...
濡備綍鍒朵綔鐧惧害绌洪棿鐨妯℃澘?
绛旓細鍛婅瘔浣犱竴涓渶绠鍗曠殑鍔炴硶 棣栧厛閫変竴涓ぇ浣撶湅璧锋潵姣旇緝鍠滄鐨勬ā鏉 鐒跺悗 璁剧疆-鑷畾涔夋ā鏉-浠ュ綋鍓嶆ā鏉夸负鍩虹鍒涘缓鏂版ā鏉 浣犲氨鍙互鐪嬪埌寰堝浠ｇ爜 涓嶇敤绠″畠 鐒跺悗鍙鐪嬪埌鏈.jpg 鎴栬.gif鐨勬枃浠跺湴鍧,灏卞鍒跺畠 鐒跺悗鍦ㄥ彟涓涓湴鍧鏍忔墦寮 灏卞彲浠ョ湅鍒板浘鐗囦簡 鐒跺悗鍦ㄩ夋嫨鑷繁鍠滄鐨 澶у皬宸笉澶氱殑鍥剧墖鍦板潃 鍙栦唬閭ｄ釜鍦板潃灏卞彲浠ヤ簡~ 涓...
鎬庢牱鍒朵綔鐧惧害绌洪棿妯℃澘
绛旓細鐧诲綍绌洪棿鍚庯細涓婇潰鏈夋垜鐨勭┖闂达紙鐐瑰嚮涓嬫媺鎸夐挳锛夛紞妯℃澘锛嶆垜鍒朵綔鐨勬ā鏉-鍒涘缓鏂版ā鏉匡紝杩欐椂灏变細璺冲嚭涓涓獥鍙ｏ紝鍑虹幇鍙紪杈戠殑CSS浠ｇ爜鏂囦欢銆備絾鏄紝杩欏苟涓嶆槸浣犺嚜宸卞綋鍓嶄娇鐢ㄧ殑妯℃澘鐨勪唬鐮侊紝鑰屾槸涓涓鐧惧害榛樿妯℃澘鐨勪唬鐮侊紝杩欎釜鏄棤娉曢夋嫨鐨勶紝鐧惧害鐩墠鍙兘鎻愪緵杩欎竴绉嶆ā鏉夸緵缂栬緫銆傚鏋滀綘鎯冲湪鏌愪釜姣旇緝鍠滄鐨勬ā鏉跨殑鍩虹涓婅繘琛...
濡備綍鍒涘缓鐧惧害绌洪棿妯℃澘?
绛旓細1.鍦鐧惧害鎺ㄨ崘鍜屽叡浜妯℃澘閲岋紙鑷繁鐩墠浣跨敤鐨勪篃鍙互锛夛紝閫夋嫨涓涓嚜宸辨瘮杈冨枩娆㈢殑妯℃澘锛岀劧鍚庢墦寮宸茬櫥闄嗙殑绌洪棿涓婚〉锛屽湪涓婚〉鐨勪换浣曞湴鏂圭偣鍑婚紶鏍囩殑鍙抽敭锛屽湪鎿嶄綔妗嗛噷闈㈡墦寮鈥樻煡鐪嬫簮鏂囦欢鈥2.鍦ㄤ笂闈㈢殑鐣岄潰涓紝鍚屾椂鎸変笅閿洏鐨勨楥TRL鈥欏拰鈥楩鈥欏仴锛屼細鍦ㄧ晫闈腑澧炲姞涓涓煡鎵炬 3.鍦ㄦ煡鎵惧唴瀹广擭銆曠殑鍙抽潰绌虹櫧妗嗛噷杈撳叆鈥...
鐧惧害绌洪棿鎬庝箞鑷垜璁捐鎽告澘?
绛旓細鍥炵瓟锛鐧惧害绌洪棿妯℃澘閫熸垚鍒朵綔绗竴姝:纭畾鑷繁鍗氬鐨勪富棰 浣犵殑妯℃澘浠ヤ粈涔堜富棰樹负涓?鏄ū涔,杩樻槸娓告垙?鏄敓娲绘潅鎰?杩樻槸闅忕瑪?浠ヤ富棰樹负鍑哄彂鐐硅璁¤嚜宸辨ā鏉跨殑鑹插僵椋庢牸,绠鍗曠敾鍑鸿嚜宸辨ā鏉跨殑閫犲瀷,妯″潡鑳屾櫙閲囩敤閫忔槑鏁堟灉杩樻槸鍗婇忔槑鏁堟灉杩樻槸涓嶉忔槑绛夌瓑闂,澶т綋涓婂仛鍒板績涓湁鏁般傛瘮濡傛垜鐨勭┖闂存槸浠ラ瓟鍏戒笘鐣屼负涓婚,閭ｄ箞灏卞簲璇...
璇烽棶,濡備綍鍒朵綔鐧惧害绌洪棿鐨勬ā鏉,鎬庢牱鎵嶈兘鎴愪负鐧惧害绌洪棿妯℃澘鐨勮础鐚呫
绛旓細姝ラ锛氳缃---妯℃澘璁剧疆---鍒涘缓鏂版ā鏉匡紝閭ｉ噷闈㈤兘鏄渶鍒濆鏃犱换浣曚慨楗扮殑鏅氫唬鐮併傞渶瑕佷綘鎵嬪姩瀵逛唬鐮佽繘琛屼慨楗般備慨楗板ソ鐐光滀繚瀛樹慨鏀光濇垨鈥滀繚瀛樺苟搴旂敤鈥濄傘傝捣鍚嶅瓧锛岀‘瀹氥傜劧鍚庣偣鈥滃垎浜---閫夋嫨鍒嗙被銆傘傜‘瀹氥傛敞锛鐧惧害鍒嗕韩鍑哄幓鐨勬ā鏉挎湁寰堝琚垹鐨勶紒杩欐槸绯荤粺绠＄悊鍛鍋鐨勩傝繖鏄病鍔炴硶鐨勪簨锛佸鏋滀綘琚垹浜嗗彧鑳...
鎬庝箞鍒朵綔鐧惧害妯＄増?
绛旓細閫変簡鑷繁姣旇緝鍠滄鐨妯℃澘,褰撶劧,鏈濂芥槸姣旇緝绠鍗曠殑妯℃澘,鐐瑰嚮鍙充晶鐨刐鍒涘缓鏂版ā鏉縘鎴栬匸缂栬緫姝ゆā鏉縘,杩涘叆[缂栬緫CSS鑷畾涔夋ā鏉縘椤甸潰,灏卞彲浠ュ姩鎵鍋涓涓嚜宸辩殑妯℃澘浜嗐 瀵逛簬,鏈変簺鏈嬪弸瀵硅繖涓猚ss涓嶄簡瑙,涓嶆竻妤氭槸鎬庝箞涓鍥炰簨,鎴戝湪杩欓噷缁欏ぇ瀹剁畝鍗曡鏄庝竴涓嬨鐧惧害绌洪棿閲囩敤鐨勬槸div+css鐨勯〉闈㈠竷灞,鍥犱负甯冨眬鐨勯渶瑕,鍙兘鏄洜涓轰笉鎯宠...
扩展阅读：
网页制作五个步骤 ...
手机一键制作商品链接 ...
表格制作在线编辑 ...
一键生成统计图 ...
网页制作模板的网站 ...
免费电子表格手机版 ...
小学生制作台历立体 ...
免费模板100个 ...
如何搭建自己的网站 ...
