《DIVCSS打造PHP168经典模板》由会员分享，可在线阅读，更多相关《DIVCSS打造PHP168经典模板（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 实
3、现的，conter1 包括 left1 与 right1，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这个网页就说到这里，希望同道中人可以分享网页设计中的经验
