模版制作教程6

	模版制作教程6 5.5 BLOG内容 　　这部分也不简单，根据需要我们要考虑四点因素，文章标题，发表日期（发表人），文章内容，阅读全文(次数)这四点。 　　文章标题我们使用.contenttitle，发表日期使用.contenttime，文章内容不使用CSS定义，因为LEFT已经定义过了，阅读全文(次数)使用类.contentcomments。（我以前是使用H3，H4直接定义的，好处是省几个字节。坏处是当用户在后台表表文章设定字体时很有可能定义成H3或H4，造成布局混乱，很显然这是不可取的。） 　　HTML代码如下： <link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css"> <div id="head"></div> <div id="content"> <div id="left"> <div class="contenttitle"><a href="1">怒吗</a></div> <div class="contenttime">SNAKE - by - 2005-9-6 17:06:00</div> 话说Numa Numa Dance：<br> 　　 紐澤西的十九歲小胖子，有一天突發奇想，把羅馬尼亞的一首流行歌曲 Dragostea Din Tei（他自己也不懂羅馬尼亞文）拿來對嘴唱，自己再加上舞蹈動作，他自己發明的Numa Numa Dance，製作了上面的MV，從頭到尾他都沒離開書桌前的椅子喲，真的笑到肚子痛，他的表演精辟令人叫绝，此FLASH始发于newgrounds网站，浏览量竟然超过8百万。 <div class="contentcomments"><a href="/blog/514651654645">阅读全文(106 target=_blank) | 回复(7)</a> | 引用通告(0)</div> </div> <div id="right"></div> </div> <div id="footer"></div> 　　CSS代码加到刚才公告的后面吧，代码如下： .contenttitle {  /* 博客文章的标题定义。 */ height: 40px; /* 博客文章标题的高度。 */ padding:3px 0px 0px 25px; /* 标题的内边距，同样是上右下左的顺序，左边25象素是为了和左边拉开距离，谁说的了？距离产生美么~ */ background:url("content.png") no-repeat left;  /* 标题的背景，就是哪个像盾牌似的小图标了，为了好看，没别的。图片不重复，左对齐。 */ font-size: 15px;  /* 标题的字体大小，15象素看着还凑合。 */ color: #060;  /* 标题的字体颜色，这个一般用不到，因为文章标题都是连接文字，不过我发现“置顶”这两个字是没有连接的~所以加上吧，为了和标题字色配套。 */ } .contenttime {  /* 博客文章的作者，发表时间定义。 */ width:450px;  /* 时间的宽度，因为我们要文字上面有“上划线”，而且要右对齐所以定义这个。 */ margin:-18px 0px 0px 20px;  /* 时间的外边距，也就是定位，上-18px是为了挨着标题显示，不信你去掉试试，20px是左边距，要不然“上划线”就盖住那标题图片了。 */ font: 9px 'Tahoma', sans-serif; /* 时间文字的大小，字体。我发现英文Tahoma字体最小的能显示的字就是9px了。 */ color: #666;  /* 时间文字的颜色。 */ border-top: 1px dotted #999;  /* 传说中的上划线，1象素，虚线（应该是虚点），浅灰色。 */ text-align:right;  /* 时间文字右对齐，同样为了好看。 */ } .contentcomments {  /* 阅读全文数，回复数等信息的CSS定义。 */ text-align: center;  /* 文字居中显示。 */ border-top: 1px solid #C2C2C2;  /* 一个上划线。 */ border-bottom: 2px solid #C2C2C2; /* 一个2px的下划线，注意这两定义个不能缩写的。 */ margin:15px 0px 35px 0px; /* 外边距。 */ font: bold 12px;  /* 字体粗细，大小。 */ } 　　完成效果如下： 点击这里预览 http://skin.midicn.cn/jc/mbjc/htm/index7.htm 5.6 RIGHT的定义（最后一块的定义，布局终于快要完成了，哭~~~） 　　先是RIGHT的位置。CSS如下： #right {  /* RIGHT的CSS定义。 */ float: right;  /* 位置，居右，相对LEFT层而言。 */ width:230px;  /* 宽度，一点一点测试得出来的数字。 */ padding: 0px 20px 0px 5px; /* 内边距，右边距和LEFT的左边距一样，是20px，对称。 */ } 　　在RIGHT里面打几个字测试效果。 点击这里预览 http://skin.midicn.cn/jc/mbjc/htm/index8.htm