CSS布局方式
一 固定布局:
1 三栏固定宽度:思路 先写一栏,再左浮动写第二栏,再左浮动写第三栏。注意:将三栏的总宽度设为960px。所以创建一个总 容器。
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div id="container"><!--总-->
<nav><!--左导航栏-->
<ul>
<li><a href='#'>链接1</a></li>
<li><a href='#'>链接2</a></li>
<li><a href='#'>链接3</a></li>
<li><a href='#'>链接4</a></li>
<li><a href='#'>链接5</a></li>
<li><a href='#'>链接6</a></li>
<li><a href='#'>链接7</a></li>
</ul>
</nav>
<article><!--中间-->
<p>钱袋子更鼓了! 去年安徽城镇居民人均可支配收入增长8.5%</p>
去年,全省城镇常住居民人均可支配收入同比增长8.5%。社会保险费率政策阶段性实施,为企业减负26.8亿元。援企稳岗补贴政策推行,帮助困业缓缴社会保险费18.7亿元,发放稳岗补贴10.3亿元,稳定就业岗位481.4万个。从2016年起,两年来安置去产能分流职工6.2万人。2017年起,实施为期三年的精准帮扶精准就业精准脱贫专项行动计划,支持大别山区等地的扶贫开发工作,帮助13.2万贫困劳动者就业、创业。五年来,全省新增就业人口335万人,共招录公务员3.3万人,培训120万人次。
</article>
<aside><!--右边-->
民生保障网进一步织密,企业退休人员基本养老金连续增加,月人均达到2232元,与五年前相比增长51.6%;城乡居民基础养老金最低标准提高17元:查处工资类案件2700件,清理拖欠农民工工资7.77亿元
</aside>
</div>
</body>
</html>
css代码:
*{
margin: 0 ;
padding: 0;
}
#container{
width: 960px;
margin: 0 auto;
border:1px solid #ccc;
}
nav{
width: 150px;
float: left;
background: #ccc;
}
nav ul li{
list-style-type: none; /*去掉圆点*/
}
article {
background:#ffed53;
width: 600px;
float: left;
}
aside{
background: #3f7ccf;
width: 210px;
float: left;
}
说明:将三栏宽度分别设为150px,600px;210px,保证总宽度为960px不要设置高度;都设为左浮动。
图示:
再设置头尾:
css:header{background:#f00;} footer{ background:#666;}
我们希望页眉和页脚与布局同宽,而且它们默认就与布局同宽,在此我们只简单地为它们设定了背景色,以便能看到它们在哪儿。
图示:
此时的页眉与布局同宽,其内容高度也比较合适。但是,页脚位于浮动元素后面所以就会尽量往上移动。解决这个问题也很简单.
css中添加 footer {clear:both;}