您的位置：首页 > 其它

web四种布局方式

2016-07-30 10:21 267 查看

一：一列布局

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>一列布局</title>
<style type="text/css">
body{margin:0;padding:0;}
.top{height:100px;background:blue;}
.main{width:800px;height:300px;background:#ccc;margin:0 auto;}
.foot{width:800px;height:100px;background:#900;margin:0 auto;}
</style>

</head>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
</body>
</html>

二：两列布局

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>二列布局</title>
<style type="text/css">
body{margin:0;padding:0;}
.main{width:800px;margin:0 auto;}
.left{width:20%;height:500px;float:left;background-color: #ccc;}
.right{width:80%;height:500px;float:right;background-color: #ddd;}
</style>

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

三：三列布局

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>三列布局</title>
<style type="text/css">
body{margin:0;padding:0;}
.left{width:200px;height:500px;background-color: #ccc;position:absolute;left:0;top:0;}
.middle{height:500px;background-color: #999;margin:0 300 0 200;}
.right{width:300px;height:500px;background-color: #ddd;position: absolute;right:0;top:0;}
</style>

</head>
<body>
<div class="left">200</div>
<div class="middle">随着互联网的发展速度迅猛，前端工程师职业越来越火热，想学习Web前端技能吗 ? 该路径从基础知识到实战案例演练，一步步带您快速掌握如何搭建网站静态页面、开发网站交互特效，为您打开WEB前端工程师大门。还在等什么？快来学习吧!
</div>
<div class="right">300</div>
</body>
</html>

四：混合布局

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>混合布局</title>
<style type="text/css">
body{margin:0;padding:0;}
.top{height:100px;background:blue;}
.head{height:100px;width:800px;background:#299;margin:0 auto;}
.main{width:800px;height:600px;background:#ccc;margin:0 auto;}
.left{width:200px;height:600px;background-color: yellow;float:left;}/*不能忘记float*/
.right{width:600px;height:600px;background-color: #369;float:right;}
.foot{width: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>
</div>
<div class="foot"></div>
</body>
</html>

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

标签： 布局

相关文章推荐

新的分享

章节导航