css负边距自适应布局

文章目录

单列定宽单列自适应布局:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>单列定宽单列自适应布局</title>
<style type="text/css">
* {margin:0;padding:0;}
.cont, .side {float:left;}
.cont {width:100%;}
.main {margin-right:200px;background:#DDDDDD;}
.side {margin-left:-200px;width:200px;background:#F7F7F7;}
</style>
</head>
<body>
<div class="cont">
<div class="main">main</div>
</div>
<div class="side">side</div>
</body>
</html>

左右定宽中间自适应布局:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>左右定宽中间自适应布局</title>
<style type="text/css">
* {margin:0;padding:0;}
.cont, .side, .sub-main {float:left;}
.cont {width:100%;}
.main {margin-right:200px;margin-left:300px;background:#DDDDDD;}
.side {margin-left:-200px;width:200px;background:#F7F7F7;}
.sub-main {margin-left:-100%;width:300px;background:#F7F7F7;}
</style>
</head>
<body>
<div class="cont">
<div class="main">main</div>
</div>
<div class="side">side</div>
<div class="sub-main">sub-main</div>
</body>
</html>

两列等高自适应布局:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>两列等高自适应布局</title>
<style type="text/css">
* {margin:0;padding:0;}
.layout {overflow:hidden;}
.cont, .side {float:left;padding-bottom:9999px;margin-bottom:-9999px;}
.cont {width:100%;}
.main {margin-right:200px;background:#DDDDDD;}
.side {margin-left:-200px;width:200px;background:#F7F7F7;}
</style>
</head>
<body>
<div class="layout">
<div class="cont">
<div class="main">
main
<br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
<div class="side">side</div>
</div>
</body>
</html>

以上代码来自:cssbox.net

总结扩展

现在的自适应模板大部分都是用百分比来做,还有一些是用css3的媒体查询,是用上述的负边距不算是真正的自适应布局,例如在小屏幕访问的时候依然是超出间距的。有些是隐藏了,看不到了。

css3的媒体查询如下:

@media screen and (max-width:1200px){

}

@media screen and (min-width:951px) and (max-width:1200px){

}

@media screen and (max-width:950px){

}

自适应布局现在在移动平板上应用得比较多。而上述的css负边距可能适合不同分辨率的网站浏览有比较好的体验。

现在也有很多用web前端框架来架构网站,例如用bootstrap、jquery ui、jquery easyui、yii等框架。

现在很多大型的项目也使用css栅格化形式来布局统一界面了。相信web前端开发这方面将会变得更规范和更容易上手。

查看我之前做的自适应演示(使用css3媒体查询)

前端网站推荐

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:css负边距自适应布局 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/355.html)

发表评论

请登录后发表评论: