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