模版制作教程4

模版制作教程4


接下来就是HEAD的样式了~
#head {
height: 135px;  /* HEAD的高。 */
width: 780px;  /* HEAD的宽，780是在800*600下的推荐宽度。 */
text-align: left;  /* HEAD层内所有所有属性居左。 */
background: url("header.png") no-repeat top center; /* HEAD的背景属性，分别是：背景图URL，背景图不重复，在层的位置：上 中。 */
}

　　我们这回用IE打开刚才的页面看看，怎么样？？？是不是最上面的层出来了？是不是很兴奋？（好兴奋，好兴奋哦~~）

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index1.htm



　　我们继续CONTENT层的制作~

#content {
padding:10px; /* CONTENT层内边距10px。 */
width:780px;  /* CONTENT的宽，780px，和上面的HEAD层对齐。 */
text-align:left;  /* CONTENT层内容居左。 */
background: url("bg.png") repeat-y center;  /* CONTENT的背景属性，分别是：背景图URL，背景图重复在Y轴上（纵向重复显示），在层的位置：中。 */
}

　　然后是FOOTER层。

#footer {
width:780px;  /* FOTTER层宽780px。 */
height: 43px;  /* FOTTER层高43px，根据切出来的图的大小定义。 */
color: #fff; /* FOTTER层内字体颜色，因为背景是黑色，我们选择白色，而且这个地方只准备放版权。 */
text-align: left;  /*  FOTTER层内容居左。 */
padding:13px 0px 0px 30px;  /* FOTTER层的内边距定义，分别是 上 右 下 左。 */
background: url("footer.png") no-repeat;  /* FOTTER的背景属性（我们省略掉一部分属性，因为是浏览器默认的），分别是：背景图URL，背景图不重复。 */
}

　　OK！！我们在HEAD，CONTENT，FOOTER每个层分别随便打几个字上去测试！效果如下：

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index2.htm



　　如果你明白我们为什么这么定义层属性的话，那么恭喜你，你已经基本学会XHTML+CSS制作网页了（理论）。怎么样？是不是Too Easy？

5.2 我的分类

　　我们开始制作“我的分类”的属性。
　　因为OBLog3.0的分类是标签是用li属性的，所以我们要复制“我的分类”HTML源代码到模版页面测试，只是测试，测试完了要删除的。
　　加入“我的分类”代码的模版HTML如下：（这是SNAKE的，每个人的都不一样。）
　　我们使用红色的粗体表示。

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="head">

<ul>
<li><a href="/blog/user1/1243/index.shtml">首页</a></li>
<li><a href="/blog/user1/1243/archives/photo/index.shtml">相册</a></li><li><a href="/blog/user1/1243/subject/2337.shtml">记日(44 target=_blank)</a></li>
<li><a href="/blog/user1/1243/subject/2413.shtml">乐音(2 target=_blank)</a></li>
<li><a href="/blog/user1/1243/subject/2338.shtml">作工(10 target=_blank)</a></li>
<li><a href="/blog/user1/1243/subject/2345.shtml">戏游(2 target=_blank)</a></li>
<li><a href="/blog/user1/1243/subject/2454.shtml">计设(9 target=_blank)</a></li>
<li><a href="/blog/user1/1243/subject/671.shtml">静和(13 target=_blank)</a></li>
</ul>

</div>

<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>

<div id="footer"></div>

好贴！