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

	好贴！