admin 管理员组文章数量: 887021
2023年12月19日发(作者：重庆网站制作公司)
实训六
Div+CSS布局示例
主要内容：
本周需要完成的任务：根据前几周的设计，
➢ 各组创建自己的站点文件夹，并把站点内文件夹结构创建好，搜集相关素材；
➢ 使用Div+CSS实现网页框架。
参考图：
操作部分：Div标签及盒子模型
提示：请务必做好准备工作。
➢ 在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。
➢ 将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”文件夹内，以备制作网页时使用。
➢ 将从FTP上下载下来的 文件，存放在自己的“myweb”文件夹内，这是一个网页HTML代码的标准模版。
➢ 将 复制一份，重命名之后以记事本的方式打开，开始编辑代码。
1. 在上一节制作的网页的基础上，继续修改，使三个盒子都能居中显示。
需要修改CSS文件：
body{
background:url(../images/);
margin:0;
}
#red,#blue,#green{
margin:0 auto;
}
……
保存后测试。
2. 会发现得到如下结果：
原因：#red和#blue都被添加了float:left;属性,而#green没有float属性。
结论：margin:0 auto;这种居中对齐方法，对于有浮动属性的div不起作用。
解决办法：将显示在同一行的、需要浮动的盒子，用一个大盒子套起来，这个大盒子不必浮动，也就能使margin:0 auto;这种居中对齐方法有效。
首先修改HTML文件：
……
……
然后修改CSS文件：
……
#main,#green{
margin:0 auto;
}
#main{
width:508px;
height:200px;
}
……
注意：HTML文件和CSS文件都保存，测试。
知识链接：
使用CSS实现居中的方法：
➢ Margin:0 auto;
注：此方法不适用与具有浮动（float）属性的Div。
Div+CSS应用示例
以如下网页为例，分步讲解：
1. 首先，确定网页布局，先横向划分大盒子，划分结果如下：
2. 将模版网页复制一份，将复件重命名为“”，使用记事本的方式打开，并编辑代码：
……
……
3. 5个盒子中间都没有内容，又没有样式，页面中看不到效果，所以先为盒子添加样式，查看网页布局：
➢ 在站点内新建“CSS”文件夹；
➢ 在“CSS”文件夹内新建记事本，重命名为“”。
4. 在HTML文件中添加：
……
……
保存。
5. 以记事本方式打开“”，编辑代码：
body,div,p,h1,img{
padding:0;
margin:0;
}
保存。
通常在CSS文件开头，都写这样几行代码，作用是将浏览器对不同块元素默认设置的边距，包括内边距和外边距，都清零，尽量避免出现浏览器不兼容的现象。
6. 继续修改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。保存后测试。
7. 看到盒子样式后，再设置所有盒子居中显示：
……
#logo,#nav,#banner,#content,#footer{
width:900px;
height:200px;
background:blue;
border:1px red solid;
margin:0 auto;
}
8. 下面对每个盒子做个性化设置：
#logo：
……
#logo{
height:80px;
background:#fff;
}
#nav：
……
#nav{
height:40px;
background:#56990c;
}
#banner：
……
#banner{
height:250px;
background:#bbb;
}
#content：
……
#content{
height:400px;
background:#fff;
}
#footer：
……
#footer{
height:50px;
background:#68acd3;
}
9. 对布局进行细化，比如盒子#content，需要分成左右两块，先修改HTML文件：
……
……
10. 设置#conL，#conR的样式：
……
#content #conL{
width:600px;
height:400px;
background:#f0f0f0;
}
#content #conR{
width:300px;
height:400px;
background:#d3e7f2;
}
……
保存后测试。
11. 为了让#conL和#conR在同一行，需要为两个盒子都添加float属性：
#content #conL,#content #conR{
float:left;
padding:15px;
}
同时为了内容显示好看，为两个盒子都加了内边距padding。
保存后，测试。
12. 会发现#conL，#conR的位置又错了，不在同一行了：
➢ 原因是加了padding，两个盒子的总宽度超过了大盒子#content的宽度；
➢ 解决方法：
……
#content #conL{
width:570px;
height:400px;
background:#f0f0f0;
}
#content #conR{
width:270px;
height:400px;
background:#d3e7f2;
}
……
13. 仔细观察还会发现，#footer的位置也会受前面盒子float浮动的影响：
……
#footer{
clear:both;
height:50px;
background:#68acd3;
}
……
14. 网页布局基本完成，一般布局不用显示边框：
……
#logo,#nav,#banner,#content,#footer{
width:900px;
height:200px;
background:blue;
border:1px red solid;
margin:0 auto;
}
……
思考操作：
将小组网站规划设计中，设计的网页框架，使用Div+CSS实现出来。
示例：
版权声明：本文标题：Div+CSS布局示例 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1702929555h436351.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论