DIVCSS打造PHP168经典模板.docVIP

DIV+CSS打造PHP168经典模板 DIV+CSS设计，减少了以往表格设计的层层嵌套，代码量大大减少，使得草根站长们配置本就不高的虚拟主机压力大大减少。且内容与样式的分离设计，让网站后期维护工作量大大减少。以下是本人最近的一个作品，现在上传再次，与大家一起分享，其代码我将尽量注释明白，但由于本人小学语文是体育老师教的，表达不清之处还请大家多多见谅！ 整图 1、? 网站头部 在head于body之间同都是相同的，我就不累赘了，大家先来看网页顶部的小导航及登录入口  HYPERLINK /showpic.html \l blogid=4c6017a50100gazfurl=/orignal/4c6017a5g796e8d46964d690690 \t _blank  HYPERLINK /showpic.html \l blogid=4c6017a50100gazfurl=/orignal/4c6017a5g796e8e587ced690690 \t _blank  HYPERLINK /showpic.html \l blogid=4c6017a50100gazfurl=/orignal/4c6017a5g796e8bad87c7690690 \t _blank  HYPERLINK /showpic.html \l blogid=4c6017a50100gazfurl=/orignal/4c6017a5g796e8cbdc372690690 \t _blank  HYPERLINK /showpic.html \l blogid=4c6017a50100gazfurl=/orignal/4c6017a5g796e8b25ecb5690690 \t _blank  HYPERLINK /showpic.html \l blogid=4c6017a50100gazfurl=/orignal/4c6017a5g796e8b9e4f1f690690 \t _blank  HYPERLINK /showpic.html \l blogid=4c6017a50100gazfurl=/orignal/4c6017a5g796e8e86309a690690 \t _blank  图列- 1 ? DIV- 1 ? CSS- 1 网页导航部分使用的是ul+li的形式，这种样式替代表格实现导航让人可以一幕了然，接以后如果要更改要是，可以直接在CSS代码中修改（像横排改为竖排，放置的位置的移动东可以真正实现了内容与样式的分离），其中几点我列出来说明一下 A、在每个导航文字的左边有一个竖线是通过CSS代码border-left:1px solid #b8bec1来实现的，当然要注意的是放在li属性中，大家可以发挥一下，将它放在上面（top）左边（left）等都是可以的。 B、导航不是贴在定不，这是通过???? margin-top:5px; 让它据顶部有5个像素的距离，这样好看一点。 2、? 网站主体 大家可以看到，这个网页的主体是三列、两列、三列的形式，在源代码中是通过conter1与conter2实现的，conter1包括left1与right1，conter2包括left2、middle2、right2三个部分。其中我觉得较有特色的几点（呵呵，自卖自夸一下） A、几乎所有的小方块都是通过以下的DIV与CSS实现的，比原来的三层表格嵌套方便太多了，如果出现在标题h3中的文字大家不想要，可以直接使用h3 style=display:none;span1111/span/h3 将标题去掉  HYPERLINK /middle/4c6017a5g796e8bad87c7690  DIV- 2 CSS- 2 B、如果想添加小方块，大家只要将DIV- 2复制到要使用的地方（也就是conter1于2中的left、right、Middle）将label修改下就可以了 C、其中conter1于2中的left、right、Middle的CSS代码如下，当然，其中具体的大小的计算费了我九牛二虎之力啊，因为IE与firefox两个主流的浏览器对web标准的支持不是太一致，就这个有点棘手。 CSS- 3 3、? 网页底部 Foot部分代码很少，也就是定一下h3与li的位置  HYPERLINK /showpic.html \l blogid=4c6017a50100gazfurl=/orignal/4c6017a5g796e8e587ced690690 \t _blank ? DIV- 3 CSS- 4 这个网页就说到这里，希望同道中人可以分享网页设计中的经验 ?