**
CSS3 响应式页面布局
.
今天给到大家介绍的是我们网页中经常用到的一种布局 “响应式布局”,那是响应式布局呢? 百度百科给出的作答是:“响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的”,说的通俗一些就是:为了不同的大小,分辨率所作出的调整,带给用户更好的体验。
废话不多说,上代码:
1.html布局代码
<div id="head">
<div class="top">头部</div>
<div class="content">内容</div>
<div class="font">底部</div>
</div>
css样式代码
*{
padding: 0; //设置部元素内边距为0px;
}
body{
background-color: dodgerblue;
font-size: 18px;
}
#head{
overflow: hidden; //浮动元素会脱离文本流,overflow:hidden元素自动撑开;
padding: 5px;
width: 1200px;
height:auto;
margin: 0 auto;