基本网页布局（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>