模版制作教程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