实训六 Div+CSS布局示例
主要内容：
本周需要完成的任务：根据前几周的设计，
各组创建自己的站点文件夹，并把站点内文件夹结构创建好，搜集相关素材；
使用Div+CSS实现网页框架。
参考图：
操作部分：Div标签及盒子模型
提示：请务必做好准备工作。
在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。
将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”文件夹内，以备制作网页时使用。
将从FTP上下载下来的 test.html 文件，存放在自己的“myweb”文件夹内，这是一个网页HTML代码的标准模版。
将 test.html 复制一份，重命名之后以记事本的方式打开，开始编辑代码。
1.在上一节制作的网页的基础上，继续修改，使三个盒子都能居中显示。
需要修改CSS文件：
body{
background:url(../images/back1.jpg);
margin:0;
}
#red,#blue,#green{
margin:0 auto;
}
……
保存后测试。
2.会发现得到如下结果：
原因：#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应用示例
以如下网页为例，分步讲解：
1.首先，确定网页布局，先横向划分大盒子，划分结果如下：
2.将模版网页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>
……
3.5个盒子中间都没有内容，又没有样式，页面中看不到效果，所以先为盒子添加样式，查看网页布局：
在站点内新建“CSS”文件夹；
在“CSS”文件夹内新建记事本，重命名为“common.css”。
4.在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>
……
保存。
5.以记事本方式打开“common.css”，编辑代码：
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;
}
网页设计html代码大全居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。