css负边距自适应布局

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


<html>
>
 charset="UTF-8">
>单列定宽单列自适应布局>
 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;}
>
>
>
> class="main">main> > class="side">side> > >

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


>
>
 charset="UTF-8">
>左右定宽中间自适应布局>
 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;}
>
>
>
 class="cont">
 class="main">main>
>
 class="side">side>
>sub-main> > >

两列等高自适应布局:


>
>
 charset="UTF-8">
>两列等高自适应布局>
 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;}
>
>
>
 class="layout">
>
> main />/>/>/>/>/>/> > > class="side">side> > > >

以上代码来自: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前端开发这方面将会变得更规范和更容易上手。

转载于:https://www.cnblogs.com/songmz/p/3657151.html

你可能感兴趣的:(css负边距自适应布局)