基本⽹页布局（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;
html个人网页完整代码div+cssborder-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、页⾯元素的定位机制：ug自学网视频教程全集
(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;
}
ill怎么读#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;
}dw中cellpadding
#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表⽰不要项⽬符号*/

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