看了很多人写关于5d博客的教程，但还是有那么多人有那么多人乘以10倍的问题出现，那么，我也来写个教程吧！
要做PL的博客，我要自己来！那么，我们首先需要了解他的结构，骨架，相关问题，首先，我们来看看5d博客的整体设计构架。
5d博客是一个web标准的产物，确切的说应该是web2.0。在web2.0下，布局不再用table，而是用div，上面看到的示意图中的所有构架完全由div构成和css控制布局的。而对于div的控制，css中标签的使用符号是#，一个井号，看起来像不像个表格？呵呵~所以我们要记住这个#的作用就是控制div！而在css 中的样式则用的是一个. 记住哦！是一个点，使用它的办法是添加一个class="样式名称"，好了，废话不啰嗦，转入正题，编辑我自己的PL界面！
首先，我得提醒大家一句，书写css的时候，我们要养成良好的习惯，那就是按页面布局由上而下的编写，这样有利于我们日后的修改以及查找。那么就开始写我们的css吧！
| body { margin:0; font-family:Times; font-size:12px; background-color: #191919; background-image: url( 图片地址 ); color:#666666} |
上面这一段是全局的设定，margin=div外部距离 / font-family=字体 / font-size=字体大小 / background-color=页面背景颜色 / color=字体颜色
a:link {text-decoration : none;color: #33CCFF;}
a:visited {text-decoration : none;color: #33CCFF;}
a:hover {text-decoration : none;color:#fff; background-color: #33CCFF} |
全局连接设定
| #wrapper { width:768px; margin-left:auto; margin-right:auto; background:none;} |
wrapper的设定，上面已经提到了的margin是div外部距离了，这里的margin-left和margin-right就很容易明白了吧，其冒号后面的auto表示的是自动。在这里说明一下background，在其冒号后面可以设置为url()，或者可以直接设置为#FFFFFF 前者是图片，后者是颜色，而none表示的是不显示
#head {background: url( 图片地址 ) no-repeat; height:219px;padding:0; margin:0px;}
#head h1 {display:none}
#head p {display:none}
#main { margin:0; font-family: times; font-size: 12px; background-color: #CCCCCC;}
#footer {background:url( 图片地址 ) no-repeat; height:40px} |
这个就是顶部图片的设置了，no-repeat表示背景不循环，padding表示内部距离，herght表示高度，head h1表示博客名称，head p表示博客的简介，而其内容中的display表示的是显示方式。这里你注意到了吗？我的head h1和head p都是据左边有一定距离的，这就是我所提倡的书写css的习惯，因为这两个框架都是在head内的。而且在每个分号后面都空上一格，这样可以方便我们在非可视化编辑时的修改及查找修改工作。
#inner {float:left; width:768px; background:#000; }
#content {margin:8px; width:584px; background:#FFFFFF}
#sidebar {float:right; width:153px; padding:0 5px 0 0px; margin:5px;}
#sidebar h3 { cursor:pointer; background:url(图片地址) no-repeat; margin:0px; padding-top:3px; padding-left:18px; font-size:10px; color:#000; height:22px; font-weight: bold; font-family:tahoma;}
#sidebar li {list-style:none;margin:0;padding:0;}
#sidebar ul {margin:0;padding:2px;}
#sidebar a:link {text-decoration : none;color: #666;}
#sidebar a:visited {text-decoration : none;color: #666;}
#sidebar a:hover {text-decoration : none;color:#33CCFF;}
#shead{display:none}
#sfooter{ display:none}
.sidesub {margin:5px 0 0 5px;width:153px;} |
上面这一段是全局的设置，根据我上面的一步步介绍，你应该能看明白一些了吧。这里有一个名叫inner 的div设置，此div是包含content和sidebar的框架。这里的float:left表示的是对其方式是左，可以根据你的需要改成你想要的。而#sidebar li 和#sidebar ul在这里我必须要说一下，基于web2.0下，几乎全部数据都是由列表完成，此时就需要的是 ul 和 li ，这两个是对于sidebar内的所有数据列的设置情况。
| #layout{position:absolute; width:125px; top:124px; padding:0px; font-size:16px; color:#FFFFFF; height:10px; margin-top:-120px} |
如果你看了上面的示意图，你就明白这个控制的是什么了，这里要强调一下的是这个position:absolute; 他表示的是现实方式是层，而且是绝对的位置，在加入此设置之后，必须要为其加上具体的位置如top等等，如果你的博客是据左对齐那么你就可以添加left，否这请用margin-left来设置，因为此时我考虑到的是如果在分辨率更大的显示器上显示的此层的位置就不同了，所以这里必须说明一下。
#menu{position:absolute; top:-5px; width:620px;margin-left:-460px; height:14px; font-weight:bold; font-family:tahoma}
#menu a:link {text-decoration: none;color: #999; height:30px;}
#menu a:visited {text-decoration : none;color: #999; height:30px;}
#menu a:hover { text-decoration : none;color:#33CCFF; background:url( 图片地址 ) no-repeat;height:30px;background-position: center top; azimuth:center; padding-top:5px}
#menu li span{display:none;}
#menu h3, #menu li span{display:none;}
#menu ul {padding:0;margin:5px;}
#menu li {list-style:none;float:left;padding:0 10px 0 10px;margin:0;} |
如果你看到这里能发现什么窍门，那我就算你聪明，如果不能，那我也不能说你什么（这人废话怎么那么多Orz!）。那么听我说来！
看到为什么我这里用#menu li， #menu ul等等了吗？以及上面的#sidebar ul #sidebar li，对了！我们可以相对独立的设置某一个框架内的样式，只要在此样式前面加上框架的id！相对独立的内容就可以显示出来了！
|
#comment_c li span{display:none;}
#add4{display:none}
#other{position:absolute; width:100px; top:1px;padding:0px; margin:0 0 0 850px; font-size:16px; height:20px; background:none; left: -987px; visibility: visible; overflow: visible;}
#other h3{ display:none}
#add7{ position:absolute; width:100px; top:-20px; margin:0; padding:0px; margin:0 0 0 20px; font-size:16px; height:20px; background:none}
#add7 h3{ display:none}
#add8{ position:absolute; width:100px; top:-10px; margin:0; padding:0px; margin:0 0 0 30px; font-size:16px; height:20px; background:none}
#add8 h3{ display:none}
#add9{ position:absolute; width:750px; top:233px; margin:0; padding:0px; margin:0 0 0 219px; font-size:16px; height:120px; background:none}
#add9 h3{ display:none}
#comment li{border-bottom: 1px dashed #363E47;padding:4px 3px 4px 0px;}
#comment a:link{background:url( 图片地址 ) no-repeat 0px 0px;padding-left:12px;margin:5px;text-decoration:none; margin-bottom:-2px}
#comment a:visited{background:url( 图片地址 ) no-repeat 0px 0px;padding-left:12px;margin:5px;text-decoration:none; margin-bottom:-2px}
#comment a:hover{background:url( 图片地址 ) no-repeat 0px 0px;padding-left:12px;margin:5px;text-decoration:none;color:#000000; margin-bottom:-2px; color:#33CCFF}
#links{position:absolute; top:0px ;left:768px}
#links a:link{background:url( 图片地址 ) no-repeat 0px 0px;padding-left:18px;margin:5px;text-decoration:none;}
#links a:visited{background:url( 图片地址 ) no-repeat 0px 0px;padding-left:18px;margin:5px;text-decoration:none;}
#links a:hover{background:url( 图片地址 no-repeat 0px 0px;}
|
我发现我公布出来的是我此次界面的原css，不过还是具有普片性的，所以大家不用担心，只要你能看懂并且明白这些代码的用意就可以自己编辑了，上面的内容是sidebar内的，所以从#menu开始都是距离左边有空格的，我是用记事本打开的html文件，所以有些地方没复制到，这里我再次强调一下，写CSS要养成好习惯。再来有朋友可能会发现上面怎么会有个#add3 #add4等等，其实这些都是程序员们早已为用户所留下的引子，打开你博客的边栏设置>边栏高级设置，你会看到很多的备用栏目，进入栏目后的最上面你看到的就是这些备用栏目的id名称，而这些add3等等就是这些栏目的id了。
| #commentsform{ margin:5px} |
回复框设置，全部外部距离为5像数。
|
/*回复内的对话框设置*/
.ibox{ background-color:#eeeeee; border: 1px dotted #CCCCCC;}
/*结束*/
#loghead{ height:0px; margin:0}
.pagenav{width:98%;}
.pagenav a{margin:3px;}
.normallog { margin:10px 0 0 0; width:99%; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: dashed; border-left-style: none; border-color: #CCCCCC;}
.normallog h4 { padding:0; color:#FFFFFF; font-size:14px; text-indent:14px; font-family: times; background-attachment: fixed; background-image: url( 图片地址 ); background-repeat: no-repeat; background-position: left center;}
.text {padding:0px 0px 0px 10px;font-size:12px;margin:0}
.normallog h5 {font-size:9px;font-weight:normal;text-align:right;padding:0px 0px 0px 0px;height:0px;display:none}
.normallog h6 { padding:0px; font-size:10px; font-weight:normal; text-align:right; height:10px; margin: 0 0 3px 0;}
.normallog h4 .time{float:right;font-size:9px;font-weight:normal;font-family: Tahoma;color: #000000;}
.normallog h5 span{padding: 0 0 0 5px}
.normallog h6 span{padding: 0 0 0 5px}
|
这里大家看到的就是日志显示的设置了，对于/**/ 这个标签，这里希望大家注意一下，这是一段注释，其实在上面的css中我几乎每段都有，不为别的，就为了日后非可视化编辑时方便查找用。
.text a:link {text-decoration : none;color: #33CCFF;}
.text a:visited {text-decoration : none;color: #33CCFF;}
.text a:hover {text-decoration : none;color:#fff; background-color: #33CCFF} |
日志内容连接颜色设置
|
/*回复Comments背景设置*/
#commentshead { background:#000; font-size:18px; padding:0 0 0 20px; cursor:pointer; height:16px; color:#fff;}
/*回复作者前小图标设置*/
.acomment h4 {background:url( 图片地址 ) no-repeat;font-size:12px;padding:0 3px 0px 20px;margin:0;border-bottom:#666 dashed 1px;font-weight:bold;cursor:pointer;}
/*作者回复图片设置*/
.acomment div .authorcomment{background: url( 图片地址 ) no-repeat left top;border:1px dashed #909090;padding:20px 10px 10px 10px;width:90%;margin:10px auto;}
.pagenav{ padding:0px; font-size:10px; font-weight:normal; text-align:right; height:10px;}
#log {width:100%;overflow:hidden;}
#log h4 a:link ,#log h6 a:link {text-decoration : none;color: #333;}
#log h4 a:visited, #log h6 a:visited{text-decoration : none;color: #333;}
#log h4 a:hover, #log h6 a:hover {text-decoration : none;color: #fff;background: #33CCFF}
#cfooter{ height:10px; background:#FFFFFF; background:url( 图片地址 )}
|
.photolog {background:#E9F3F2;float:left;width:150px;margin:10px;border:#ff6600 solid 1px;}
.photolog .smallimages {height:128px;overflow:hidden;margin:10px 10px 10px 10px;}
.photolog .smallimages img {width:128px;}
.photolog h3 {font-size:14px;margin:0;padding:5px;background:#ff6600;color:#FFF;overflow:hidden;height:14px;}
.photolog p {display:none;}
.photolog p span {display:none;}
.Hits span,.Comments span,.PostTime span {display:none;}
.photolog ul {margin:5px;padding:0;}
.Hits {float:left;background:url("/images/pic_author.gif") no-repeat;list-style:none;padding:0px 0px 0px 12px;margin:0;height:20px;}
.Comments {float:left;list-style:none;padding:0px 0px 0px 12px;margin:0;height:20px;}
.PostTime {float:left;background:url("/images/pic_re.gif") no-repeat;list-style:none;padding:0px 0px 0px 12px;margin:0;height:20px;ackground:url("/images/pic_re.gif") no-repeat;list-style:none;padding:0px 0px 0px 12px;margin:0;height:20px;} |
上面这一段对我来说几乎是费的Orz，因为这个是对图片日志进行设置，我都没有图片博客
接下來，我们要的是可是话编辑，如果你安装得有Dreamweaver，请按我的方法来，你会觉得非常简单。
首先，新建一个网页，打开你的博客首页，点击浏览器上的查看>查看源文件，复制全部内容，然后粘贴到新建的网页html内，然后把
<link href='/vip/evannan/main.css' rel="stylesheet" type="text/css" id="mylink"/>
这一段修改成
<style type="text/css">
<!--
从这行开始插入上面的代码
-->
</style>
接下来进入可视化编辑，就可以看到你的博客的样子了。
好了，如果你看到这里还有什么问题，请给我留言。其实此次写此日志个人感觉好像不再是为了初学者，更像是为了比较高级一些的人写的了，因为整个过程几乎都是在教大家如何写css和看css的内容。而且对每一个样式代码的名称都做了详细的解释，其实5dblog是个很好的平台，如果你懂得了如何去写一个优秀的css，那么你离建设web2.0下标准的网站已经不远了。感谢大家观看。或许我有什么说的不对的地方请大家bs我！
