Divcss页面布局资料(很好很强大)_第1页
Divcss页面布局资料(很好很强大)_第2页
Divcss页面布局资料(很好很强大)_第3页
Divcss页面布局资料(很好很强大)_第4页
Divcss页面布局资料(很好很强大)_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

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

文档简介

1、如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这

2、里就不多说，自己可以去查找相关信息。 理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 CSS盒子模式 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便

3、取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文

4、字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：1. 用div来定义语义结构 现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：以下是引用片段：<div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id=&quo

5、t;footer"></div>上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:以下是引用片段：<body> <div id="header"></div> <div id="nav"></div> <div id="content"></div&

6、gt; <div id="footer"></div> </body>最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是： 以下是引用片段：body  font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px auto; height: auto; width: 760px; border:&

7、#160;1px solid #006633; 页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：以下是引用片段：#header  height: 100px; width: 760px; background-image: url(headPic.gif); background-repeat: no-repeat; margin:0px 0px 3px 0px; 导航栏

8、我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：以下是引用片段：#nav  height: 25px; width: 760px; font-size: 14px; list-style-type: none; #nav li  float:left; #nav li a color:#000000; text-decoration:none; padding-top:4px; display:block;

9、width:97px; height:22px; text-align:center; background-color: #009966; margin-left:2px; #nav li a:hover background-color:#006633; color:#FFFFFF; 内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：以下是引用片段：#content  height:auto; width: 

10、740px; line-height: 1.5em; padding: 10px; #content p  text-indent: 2em; #content h5  font-size: 16px; margin: 10px;版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：以下是引用片段：#footer  height: 50px; width: 740px; line-he

11、ight: 2em; text-align: center; background-color: #009966; padding: 10px; 最后回到样式开头大家会看到这样的样式代码：以下是引用片段：*  margin: 0px; padding: 0px; 这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：以下是引用片段：<style type="tex

12、t/css"> <!- *  margin: 0px; padding: 0px; body  font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px auto; height: auto; width: 760px; border: 1px solid #006633; #header  height: 100px;

13、 width: 760px; background-image: url(headPic.gif); background-repeat: no-repeat; margin:0px 0px 3px 0px; #nav  height: 25px; width: 760px; font-size: 14px; list-style-type: none; #nav li  float:left; #nav li a color:#000000;

14、text-decoration:none; padding-top:4px; display:block; width:97px; height:22px; text-align:center; background-color: #009966; margin-left:2px; #nav li a:hover background-color:#006633; color:#FFFFFF; #content  height:auto; width: 740px; line-height: 1.5em; padding: 

15、10px; #content p  text-indent: 2em; #content h5  font-size: 16px; margin: 10px; #footer  height: 50px; width: 740px; line-height: 2em; text-align: center; background-color: #009966; padding: 10px; -> </style>结构代码是这样的：以下是引

16、用片段：<body> <div id="header"></div> <ul id="nav"> <li><a href="#">首 页</a></li> <li><a href="#">文 章</a></li> <li><a href="#">相册</a

17、></li> <li><a href="#">Blog</a></li> <li><a href="#">论 坛</a></li> <li><a href="#">帮助</a></li> </ul> <div id="content"> <h5>前言</h5> <p>第一段内容</p> <h5>理解CSS盒子模式</h5> <p>第二段内容</p> </div> <div id="footer"> <p>关于华升

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论