本文详细介绍了基本的网页布局概念，包括盒子模型的边界、填充、边框和背景图像，以及如何使用CSS进行流式布局、浮动定位和绝对定位。此外，还探讨了清除浮动、溢出处理等布局技巧，并提供了多个示例代码，展示了如何创建一列、两列和三列的固定宽度布局。文章最后提到了在使用DIV+CSS布局时应注意的事项，如处理元素边界和内嵌框架的使用。
基本网页布局
一、盒子模型（网页布局的基础）
（1）边界（margin）：盒子的边框与包含该盒子的容器之间的距离
A、margin-top：上边界
B、margin-right：右边界
C、margin-bottom：下边界
D、margin-left: 左边界
(2)填充(padding)：内补白(内边距)，盒子中的内容与盒子边框之间的距离
A、padding: 上 右 下 左
B、padding-top:上边距
C、padding-right:右边距
D、padding-bottom：下边距
E、padding-left：左边距
(3)边框(border)：盒子的边框线
A、border-style:边框的样式【上、右、下、左】
B、border-width:边框的宽度【上、右、下、左】
C、border-color:边框的颜色【上、右、下、左】
D、border(综合设置边框): 边框的宽度 边框的样式 边框的颜色
E、border-radius(圆角边框):水平半径参数/垂直半径参数
(4)清除页面元素的默认内外边距
*{
padding: 0px;
margin: 0px;
}
‘*’：通配符，代表所有元素
(5)背景图像：
background-repeat:
repeat 默认值，图像在水平和垂直方向上都平铺
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺
示例代码
div{
width: 400px;
height: 400px;
background-color: coral;
border-style: ridge dashed dotted double;
border-width: 5px;
border-color: cornflowerblue gray red aqua;
border-radius: 20%;
border-top-left-radius: 40%;
margin-top: 200px;
margin-right: 300px;
margin-left: 300px;
background-image: url('./image/1267541.gif');
background-repeat: repeat-y;
}
二、DIV+CSS进行网页布局
1、网页布局的目的：页面结构清晰、有条理、易读
2、如何布局：
(1)确定"版心"：页面主体内容所在的位置。(通常在页面中水平居中)
(2)分析页面中的模块：头部(header)、导航(nav)、焦点图(banner)、主体内容(content)、页面底部 (footer)
(3)控制页面中的模块：通过盒子模型，使用DIV+CSS进行模块的控制
3、页面元素的定位机制：
(1)流式布局：按照元素的类型和在HTML源文件中出现的顺序进行定位
A、块(block):从上到下依次排列
B、水平布局(inline)：在一行中进行水平布局
(2)浮动(float)：当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果
(3)绝对定位(position:absolute)：通过页面坐标(页面左上角)的方式来定位元素。使用绝对定位后元素不会占用普通流空间
(4)相对定位(position:relative):
如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动
注意：与定位相关的属性有left、top、right、bottom,这四个属性只有在使用了定位属性(position)后才有效;只能同时使用相邻的两个属性，不能同时使用相对的两个属性
三、布局中的常用属性
1、浮动属性（float）
选择器{
float: 属性值;
}
left：左浮动
right：右浮动
none：不浮动(默认值)
例1、 DIV+CSS,一列固定宽度与一列自适应宽度
<title>一列固定宽度与一列自适应宽度</title>
</head>
<style>
body{
margin-top: 5px;
}
#layout{
height: 300px;
width: 500px;
background: blueviolet;
margin: auto;
}
#d1{
height: 300px;
width: 500px;
background: orange;
margin: auto;
}
#d2{
height: 200px;
background: cornflowerblue;
margin: auto;
}
</style>
<body>
<div id="layout">西安邮电大学</div>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
例2、两列固定宽度自动居中 两列自适应宽度
<title>两列固定宽度自动居中 两列自适应宽度</title>
</head>
<style>
#d1{
height: 300px;
width: 150px;
background: crimson;
float: left; /*设置第一个为浮动格式，就留出了位置，第二个就飘上去了*/
}
#d2{
height: 400px;
width: 230px;
background: aqua;
margin-left: 150px;
}
#main{
width: 380px;
margin: auto;
}
</style>
<body>
<div id="main">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
例3、三列固定宽度自动居中 三列自适应宽度
<title>三列固定宽度自动居中 三列自适应宽度 </title>
</head>
<style>
#d1{
height: 300px;
width: 200px;
background: rosybrown;
float: left;
}
#d2{
height: 300px;
width: 200px;
background: yellowgreen;
float: left;
}
#d3{
height: 300px;
width: 200px;
background: indigo;
float: left;
}
#main{
margin: 0 auto;
width: 600px;
}
</style>
<body>
<div id="main">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>
2、清除属性 （clear）
none：允许元素两边都有浮动元素
left：不允许元素左边有浮动的元素
right：不允许元素右边有浮动的元素
both：不允许两边有浮动的元素
例如
<style type="text/css">
.leftText{
margin: 5px;
height: 200px;
width: 180px;
border: 1px solid #aaa;
background-color: indigo;
float: right;
}
.footText{
height: 200px;
border: 2px solid lightcoral;
clear: both;
}
/* .Clear{
clear: both;
} */
</style>
<body>
<div class="leftText">区块一</div>
<div class="leftText">区块二</div>
<div class="Clear">asd</div>
<!-- <div class="Clear"></div> Clear这个DIV如果不加的话，区块二和区块三会并列成一行，加上Clear这个DIV区块之后，区块三会不受影响，显示在下一行-->
<div class="footText">区块三</div>
</body>
</html>
3、溢出属性（overflow):当内容溢出元素边框的时候，内容的处理方式
scroll：提供滚动机制(带有滚动条)
visible：默认值，内容溢出到边框以外
hidden: 内容被修剪。溢出的部分看不见
auto：如果内容被修剪，则显示器会显示滚动条以便查看其余的内容
<title>overflow的用法</title>
</head>
<style type="text/css">
#d1{
width: 100px;
height: 300px;
background-color: lightcoral;
overflow: visible;
}
#d2{
width: 100px;
height: 300px;
background-color: aqua;
overflow: auto;
}
</style>
<body>
<div id="d1">asdfghjaaaaaaaaaaaaaaaa</div>
<div id="d2">asdfghjaaaaaaaaaaaaaaaa</div>
</body>
</html>
四、使用DIV+CSS进行布局时要注意的问题：
1、div、ul、ol、p、li都是块，它们和周围的元素都有边界(margin),在块级标签嵌套的时候， 要注意处理这些边界
2、补充
内嵌框架
<iframe src="" frameborder="0"></iframe>
简单页面布局的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面布局例子</title>
</head>
<style>
body{
margin-top: 2px;
}
#header{
width: 1200px;
height: 120px;
margin: auto; /*margin: auto为元素水平居中*/
background-image: url('./image/1.jpg');
}
#nav{
width: 1200px;
height: 50px;
margin: auto;
margin-top: 2px;
background-color: royalblue;
}
ul{
margin-top: 0px;
}
#navItem >li{
list-style: none; /*list-style：设置列表的项目符号的格式 none表示不要项目符号*/
display: inline-block; /*列表显示在一行，每个列表呈现块状显示*/
text-align: center;
margin-left: 50px;
line-height: 50px;
width: 150px;
color: white;
}
#navItem > li:hover{
background-color: rgb(26, 59, 209);
cursor: pointer; /*将光标设置成手型样式*/
}
#main{
width: 1200px;
margin: auto;
margin-top: 2px;
}
#left{
width: 150px;
height: 530px;
float: left;
background-color: lightcoral;
}
#right{
width: 1048px;
height: 530px;
margin-left: 152px;
background-color: lightseagreen;
}
#leftMenu{
margin-top: 35px;
}
.Item{
list-style: none;
margin-top: 20px;
}
.Item>a{
text-decoration: none;
}
#if{
width: 1028px;
height: 530px;
}
</style>
<body>
<div id="header"></div>
<div id="nav">
<ul id="navItem">
<li>首页</li>
<li>西安邮电大学</li>
<li>长安大学</li>
<li>陕西师范大学</li>
<li>西安外国语大学</li>
</ul>
</div>
<div id="main">
<div id="left">
<ul id="leftMenu">
<li class="Item">
<a href="#">首页</a>
</li>
<li class="Item">
<a href="001.html" target="deyun">西安邮电大学</a>
</li>
<li class="Item">
<a href="002.html" target="deyun">长安大学</a>
</li>
<li class="Item">
<a href="003.html" target="deyun">陕西师范大学</a>
</li>
<li class="Item">
<a href="004.html" target="deyun">西安外国语大学</a>
</li>
</ul>
</div>
<div id="right">
<iframe src="" frameborder="0" id="if" name="deyun"></iframe>
</div>
</div>
</body>
</html>
扫一扫
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
