如何用CSS进行网页布局

zoukankan html css js c++ java

如何用CSS进行网页布局

1、单列布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.top{height: 100px;background: #ccc;}
.main{ 800px;height: 300px;background: #fcc;margin: 0 auto;}
.footer{ 800px;height: 100px;background: #9cf;margin: 0 auto;}
</style>
</head>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>

2、单列布局水平居中

.main{ 800px;height: 300px;background: #ccc;margin: 0 auto;}

3、自适应宽度两列布局（用得比较少）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.left{ 20%;height: 500px;float: left;background: #fcc;}
.right{ 80%;height: 500px;float: right;background: #95c;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

4、固定宽度两列布局（用得比较多）

两栏被限制在父级div（main）中.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.main{ 800px;margin: 0 auto;}
.left{ 220px;height: 500px;float: left;background: #fcc;}
.right{ 580px;height: 500px;float: right;background: #95c;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

5、自适应三列布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.main{ 800px;margin: 0 auto;}
.left{ 33.33%;height: 500px;float: left;background: #fcc;}
.middle{ 33.33%;height: 500px;float: left;background: #ccc;}
.right{ 33.33%;height: 500px;float: right;background: #95c;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>

6、案例：左侧固定200px，右侧固定300px，中间自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.main{ 800px;margin: 0 auto;}
.left{200px;height: 500px;background: #fcc;position: absolute;left:0;top:0;}
.middle{height: 500px;background: #ccc;margin: 0 300px 0 200px;}
.right{ 300px;height: 500px;background: #95c;position: absolute;right: 0;top:0;}
</style>
</head>
<body>
<div class="main">
<div class="left">200px</div>
<div class="middle">博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT非常落后的小城市，城市虽小，但是这里却有很多求知创新的人，博客园诞生的理由是如此简单。</div>
<div class="right">300px</div>
</div>
</body>
</html>

7、混合布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.top{height: 100px;background: blue;}
.head{height: 100px; 800px;background: #f60;margin: 0 auto;}
.main{ 800px;height:600px;background:#ccc;margin: 0 auto;}
.left{200px;height: 600px;background: #fcc;float: left;}
.right{ 600px;height: 600px;background: #95c;float: right;}
.sub_1{ 400px;height: 600px;background: green;float: left;}
.sub_1{ 200px;height: 600px;background: #09f;float: right;}
.footer{ 800px;height: 100px;background: #900;margin: 0 auto;}
</style>
</head>
<body>
<div class="top">
<div class="head"></div>
</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="sub_1"></div>
<div class="sub_2"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

8、要点回顾：
其实在网页制作当中，页面中的元素就是块与块之间的关系：
块挨着块；块嵌套着块；块叠压着块
通过css将这些块摆放正确，网页布局就自然完美了。

1、margin:0 auto 自动居中
2、两种分成三栏的方式：
1）两边position：absolute，left：0/right：0，top:0，
中间margin｛0 右边 0 左边｝
2）先分两栏左右float 再分两栏左右float

查看全文

相关阅读:
python XML实例
 python XML基础
 python 使用正则表达式的爬虫
 python cookies 爬虫处理
 Selenium 2自动化测试实战22（处理HTML5的视频播放）
Selenium 2自动化测试实战21【调用JavaScript（控制浏览器的滚动条）】
Selenium 2自动化测试实战20（操作cookie）
Selenium 2自动化测试实战19（下载文件）
Selenium 2自动化测试实战18（上传文件）
Selenium 2自动化测试实战17（警告框处理）

原文地址：https://www.cnblogs.com/wuxn/p/4861508.html