您的位置：首页 > Web前端 > CSS

DIV&CSS布局

2016-11-16 15:13 267 查看

1、DIV+CSS布局与HTML表格定位方式不同。现在网站设计标准已经不再使用表格定位技术了，而是使用DIV+CSS的布局来实现各种定位。div盒子模型结构将各部分内容分配到不同的区块，再用CSS来设置盒子模型的位置、大小、边框、内外边距、排列方式等等。也即：div用来搭建网站结构即框架，css用来创建网站的外观表现即样式或美化。注意：不是所有的网页都需要DIV布局，如数据页面、报表之类的页面，使用HTML的表格会比较好。

2、DIV&CSS标准的优点：a：表现和内容分离，在HTML文件中只存放文本信息，而控制样式格局的设计是单独存放在样式文件中的，实现了HTML文件的简洁性。b：代码简洁，提高页面浏览器速度。c：易于维护和改版。d：提高搜索引擎对网页的索引效率（搜素引擎会绕过样式表去直接抓取网页内容）

<html>
<head>
<title>div+css网页    标准化布局</title>
<style>

</style>
</head>
<body>
<span>span也是区块标签定义的内容默认是不换行的，它是内联的，定义的是一个小块</span>
<span>span也是区块标签定义的内容默认是不换行的</span>
<div>div区块标签定义的内容，默认是换行的，定义的是一个大块</div>
<div>div区块标签定义的内容，默认是换行的</div>
</body>
</html>

2、盒子模型的介绍

每个HTML元素都可以看做一个装有东西的盒子，盒子具有宽度（width）和高度（height）,盒子里放的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间还有边界（margin）。

<head>
<style>
#bor{}
#main{}
span{}
</style>
</head>
<body>
<div id="bor">
<div id="main">
<span>内容元素</span>
</div>
</div>
</body>

3、在body体中，默认有一个外边距margin,若需去掉，则在body的style设计中加上margin:0px；

4、用padding 设置为固定的内边距可以使区块随窗口变化而变化。

<style>
body{
background:green;
margin:0px;
padding:100px
}
#main{
width:100px;
height:400px;
background:yellow;
}
</style>
<body>
<div id="main">
</div>
</body>

4、区块框浮动

<style>
body{
margin:0px;
}
#main{
float:left;(脱离文档流想左浮动)
width:200px;
height:200px
background:red
}
#one{
float:left;(脱离文档流想左浮动)
width:200px;
height:200px
background:green
}
</style>
<body>
<div id="main">
wwww
</div>
<div id="one">
bbbb
</div>
</body>

.clear{
clear:both;
}
<div class="clear"></div>
此作用相当于给浮动的区块换行

5、一个实例

建一个css文件夹放单独设计的.css文件：globle.css(全局样式设计文件)，layout.css(布局设计文件)，font.css(字体设计文件)，link.css（链接样式文件），print.css(打印样式文件)

divcss.html设计

<html>
<head>
<title>页面布局实例</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
/*(链接样式文件)*/<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<styl
c0a3
e>
#one{
float:left;/*(脱离文档流想左浮动)*/
width:200px;
height:200px
background:green
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="banner">
</div>
<div id="tool">
</div>
<div class="nav">
</div>/*设计一个分隔区块*/
<div id="menu">
</div>
</div>
<div class="nav">
</div>/*设计一个分隔区块*/
<div id="main">
</div>
<div class="nav">
</div>/*设计一个分隔区块*/
<div id ="footer">
</div>
</div>
</body>
</html>

layout.css设计

body{
margin:0px;
padding:0px;
font:12px Arial,宋体；
text-align:center;
/*这样对于IE浏览器会有居中效果*/
}
#container{
margin-left:auto;
margin-right:auto;
/*这样对于FF火狐浏览器效果会居中*/
/*float:left;(脱离文档流想左浮动)*/
width:960px;
height:800px;/*临时用*/
background:green；/*临时用*/
text-align:left;/*在container区块里面的内容左对齐*/
}
#header{
width:100%;
height:80px;
background:red;
}/*IE会自动调整高度，FF不会，指定多高就为多高（解决方法：在header的设计中将高度去掉）*/
#header #logo{
float:left;/*像左摆放logo*/
width:200;
height:80px;
margin-right:10px;
background:#ff00ff;
}
#header #banner{
float:left;/*像左摆放banner*/
width:600px;
height:80px;
background:blue;
}
#header #tool{
float:left;/*像左摆放tool*/
width:140px;
height:80px;
background:#ff0000;
}
#header #menu{
float:left;
width:100%;
height:28px;
background:#eee;
clear:both;
}
#main{
width:100%;
height:600px;
background:yellow;
}
#footer{
width:100%;
height:80px;
background:yellow;
}
.nav{
width:100%;
height:10px;/*但是IE浏览器最小高度为18px，所以当小于18px时都为18px*/
clear:both;
overflow:hidden;/*解决高度小于18px时不同浏览器显示效果不同的问题*/
}/*将header、main、footer三个区块用10个像素分开*/

IE浏览器与FF浏览器居中设计方式不同；IE指定的最小高度为18px(解决方法：overflow：hidden；);IE会自动调整高度，FF不会，指定多高就为多高（解决方法：在header的设计中将高度去掉）；FF如果使用浮动才是正常的，（解决方法：让所有的区块都脱离文档流）;IE和FF在列表的外边距和内边距有区别（解决方法：ul{margin:0px; padding:0px; list-style:none;}）

#header #menu.tiao{}/*这是一个关联选择器，优先级最高*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航