CSS学习笔记01各种布局 - 零℃弥合 - 博客园

CSS学习笔记01各种布局

起因是这个网站上说了一些css布局的，但是在这个网站上没有说明具体怎么布局

margin:0 auto ：CSS布局居中功能

width 设置宽度

border边框样式为本案例便于观察而加入CSS样式，实际项目布局根据需要增减

height 设置高度也是本案例便于观察每个DIV层而设置的高度样式，一般结构布局不需要设置高度，因为一般布局如果内容多少不能确定就不设置高度。

margin:0 auto(DIV居中功能)

width:400px(设置宽度为400px)

border:1px solid #F00; border:1px solid #FF0; border:1px solid #00F(设置设置3个分别为红黄蓝的边框)

height:100px;height:200px;height:100px 设置三个CSS高度值

1、上下结构

以下为上下布局结构截图

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#header,#content{margin:0 auto;width:400px; height:100px}
#header{border:1px solid #F00}
#content{ border:1px solid #FF0; height:200px}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
</body>
</html>

感觉其实没什么东西，div默认就是上下排布。

2、上中下结构（竖向）

上中下布局结构截图

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#header,#content,#footer{margin:0 auto;width:400px; height:100px}
#header{border:1px solid #F00}
#content{ border:1px solid #FF0; height:200px}
#footer{border:1px solid #00F}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>

3、左右结构

常见左右分以下2种

当然还有平等分的左右结构

这个我有点不太确定float:left;这个可以实现，它的意思是div向左排队，要实现左右，就要每一个div都有这个属性，但是如果浏览器变小，第二个div就去下一行了。

#left,#right{width:400px; height:100px}
#left{border:1px solid #F00; float:left;}
#right{ border:1px solid #FF0; float:left;}

第二个方案是position:absolute;意思是绝对定位，第一个div是绝对定位，第二个div左外边距就是第一个div的宽度

#left,#right{width:400px; height:100px}
#left{border:1px solid #F00; position:absolute;}
#right{margin-left:400px; border:1px solid #FF0; }

4、左中右（横向）

在左中右里面，我试一点儿更符合要求的，三个div加起来全屏显示，中间的div占百分之五十，左右各占百分之二十五

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#left,#middle,#right{ width:25%; height:100px}
#middle{ width:50%;}
#left{ background: #F00;float: left;}
#middle{ background: #FF0;float: left;}
#right{ background: #00F;float: left;}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>

5、上中（中分左右）下结构

这个实在没必要谢了，直接看6吧

6、上中（中分左中右三列）下结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> </title>
<style type="text/css">
#head{height: 40px;background-color: #0033CC;margin: 0;}
#content{background: #CCCCCC;height: 200px;margin: 0;}
#left{width: 20%;height: 200px;background: #CCCC66;float: left;margin: 0;}
#c{width: 60%;height: 200px;background: red;margin: 0;float: left;}
#right{width: 20%;height: 200px;background: #339966;float: right;margin: 0;}
#foot{background: #0099CC;height: 40px;margin: 0;}
</style>
</head>
<body>
<div id="head">head</div>
<div id="content">
<div id="left">left</div>
<div id="c">content</div>
<div id="right">rigth</div>
</div>
<div id="foot">foot</div>
</body>
</html>

整个过程中我以前不熟的就只有俩东西，第一个是float:left;第二个是position:absolute;

下面两篇分别总结一些css的这俩属性

posted on 2018-10-26 17:28 零℃弥合阅读(349) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

公告