DivCSS布局示例.docVIP

实训六 Div+CSS布局示例 主要内容： 本周需要完成的任务：根据前几周的设计， 各组创建自己的站点文件夹，并把站点内文件夹结构创建好，搜集相关素材； 使用Div+CSS实现网页框架。 参考图： 操作部分：Div标签及盒子模型 提示：请务必做好准备工作。 在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。 将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”文件夹内，以备制作网页时使用。 将从FTP上下载下来的 test.html 文件，存放在自己的“myweb”文件夹内，这是一个网页HTML代码的标准模版。 将 test.html 复制一份，重命名之后以记事本的方式打开，开始编辑代码。 在上一节制作的网页的基础上，继续修改，使三个盒子都能居中显示。 需要修改CSS文件： body{ background:url(../images/back1.jpg); margin:0; } #red,#blue,#green{ margin:0 auto; } …… 保存后测试。 会发现得到如下结果： 原因：#red和#blue都被添加了float:left;属性,而#green没有float属性。 结论：margin:0 auto;这种居中对齐方法，对于有浮动属性的div不起作用。 解决办法：将显示在同一行的、需要浮动的盒子，用一个大盒子套起来，这个大盒子不必浮动，也就能使margin:0 auto;这种居中对齐方法有效。 首先修改HTML文件： …… body div id=main div id=red左侧/div div id=blue右侧/div /div div id=green页脚/div /body …… 然后修改CSS文件： …… #main,#green{ margin:0 auto; } #main{ width:508px; height:200px; } …… 注意：HTML文件和CSS文件都保存，测试。 知识链接： 使用CSS实现居中的方法： Margin:0 auto; 注：此方法不适用与具有浮动（float）属性的Div。 Div+CSS应用示例 以如下网页为例，分步讲解： 首先，确定网页布局，先横向划分大盒子，划分结果如下： 将模版网页test.html复制一份，将复件重命名为“index.html”，使用记事本的方式打开，并编辑代码： …… body div id=logo/div div id=nav/div div id=banner/div div id=content/div div id=footer/div /body …… 5个盒子中间都没有内容，又没有样式，页面中看不到效果，所以先为盒子添加样式，查看网页布局： 在站点内新建“CSS”文件夹； 在“CSS”文件夹内新建记事本，重命名为“common.css”。 在HTML文件中添加： …… link type=text/css rel=stylesheet href=css/common.css / /head body div id=logo/div div id=nav/div div id=banner/div div id=content/div div id=footer/div /body …… 保存。 以记事本方式打开“common.css”，编辑代码： body,div,p,h1,img{ padding:0; margin:0; } 保存。 通常在CSS文件开头，都写这样几行代码，作用是将浏览器对不同块元素默认设置的边距，包括内边距和外边距，都清零，尽量避免出现浏览器不兼容的现象。 继续修改CSS文件，设置盒子的样式，看到当前网页的布局： body,div,p,h1,img{ padding:0; margin:0; } #logo,#nav,#banner,#content,#footer{ width:900px; height:200px; background:blue; border:1px red solid; } 一般想看到盒子的样式，只要设这三个属性：width、height和background。 为了能看出来是五个盒子，再加上边框属性：border。保存后测试。 看到盒子样式后，再设置所有盒子居中显示： …… #logo,#nav,#banner,#content,#footer{ width:900px; height:200px; background:blue; border:1px red solid; margin:0 auto; } 下面对每个盒子做个