DIV+CSS打造PHP168经典模板.doc_第1页
DIV+CSS打造PHP168经典模板.doc_第2页
DIV+CSS打造PHP168经典模板.doc_第3页
DIV+CSS打造PHP168经典模板.doc_第4页
免费预览已结束，剩余1页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

DIV+CSS打造PHP168经典模板DIV+CSS设计，减少了以往表格设计的层层嵌套，代码量大大减少，使得草根站长们配置本就不高的虚拟主机压力大大减少。且内容与样式的分离设计，让网站后期维护工作量大大减少。以下是本人最近的一个作品，现在上传再次，与大家一起分享，其代码我将尽量注释明白，但由于本人小学语文是体育老师教的，表达不清之处还请大家多多见谅！整图1、 网站头部在head于body之间同都是相同的，我就不累赘了，大家先来看网页顶部的小导航及登录入口图列- 1DIV- 1CSS- 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中的文字大家不想要，可以直接使用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部分代码很少，也就是定
人人文库> 全部分类> 应用文书 > 技术指导

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论