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

利用CSS进行网页布局

2015-12-13 00:00 676 查看
使宽度自适应使用百分比

一、一列布局

使一个div元素居中，要给其设置宽度，并设置margin:0 auto；即可。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一列居中布局</title>
<style type="text/css">
* { padding:0; margin:0;}
.main { height:300px; width:800px; background-color:#900; margin:0 auto; }
</style>
</head>

<body>
<div class="main"></div>
</body>
</html>

效果：



二、两列布局

固定宽度的两列布局：在上面的main div元素中添加两个div，可以使用百分比，也可以使用像素固定其宽度。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一列居中布局</title>
<style type="text/css">
* { padding:0; margin:0;}
.main { width:800px; height:400px; background-color:#900; margin:0 auto; }
.left { width:250px; height:inherit; background-color:#CCC; float:left; }
.right { width:550px; height:inherit; background-color:#666; float:left; }
</style>
</head>

<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

效果：



三、三列布局

三列宽度相等

实现方法：

设置三列的宽度都为33.33%，并设置三列div元素左浮动。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三列宽度相等布局</title>
<style type="text/css">
#div1 { width:33.33%; height:500px; float:left; background-color:#f00;}
#div2 { width:33.33%; height:500px; float:left; background-color:#0f0;}
#div3 { width:33.33%; height:500px; float:left; background-color:#00f;}
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

效果：



左右宽度固定，中间自适应

实现方法：

左右div块元素设置固定宽度，中间div不设置；

左右div设置position为absolute，并且分别设置位于浏览器左上角和右上角；

设置中间div的左右margin值分别为左右div元素的宽度。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局——中间自适应宽度</title>
<style type="text/css">
* { padding:0; margin:0; }
#div1 { width:200px; height:500px; position:absolute; left:0; top:0; background-color:#f00;}
#div2 { height:500px; margin:0 300px 0 200px; background-color:#0f0;}
#div3 { width:300px; height:500px; position:absolute; right:0; top:0; background-color:#00f;}
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

效果：



四、混合布局

实现：

利用基础的一列、两列、三列布局知识进行组合，利用浮动和定位对网页进行布局。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>混合布局</title>
<style type="text/css">
* { padding:0; margin:0; }
.top { height:50px; background-color:#f00;}
.top-center { width:800px; height:inherit; margin:0 auto; background-color:#009;}
.main { width:800px; height:400px; margin:0 auto; background-color:#0f0;}
.main-left { width:200px; height:inherit; float:left; background-color:#FF0; }
.main-right {width:600px; height:inherit; float:right; background-color:#0FF; }
.sub-left { width:400px; height:inherit; float:left; background-color:#C60;}
.sub-right { width:200px; height:inherit; float:left; background-color:#F0C;}
.foot { width:800px; height:50px; margin:0 auto; background-color:#00f;}
</style>
</head>

<body>
<div class="top">
<div class="top-center"></div>
</div>
<div class="main">
<div class="main-left"></div>
<div class="main-right">
<div class="sub-left"></div>
<div class="sub-right"></div>
</div>
</div>
<div class="foot"></div>
</body>
</html>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航