HTML+CSS自适应布局

今天自己写了一个自适应布局画面,贴出来做个记录

/* 
    Created on : Mar 2, 2017, 4:57:51 PM
    Author     : yongshun.zheng
*/
@charset "utf-8";
/*---------------------------------------------
            Common styles for all
----------------------------------------------*/
html,body{-webkit-text-size-adjust:none;}
body{font-size:12px;min-width:1000px;line-height:1.5em; color:#333;font-family:Arial,"Microsoft YaHei","微软雅黑","宋体", sans-serif; background-color: #f0f1f1; width: 100%;  overflow-x: hidden;}
html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,img,a,input,select,form,fieldset,table,tr,td,dl,dt,dd{padding:0px; margin:0px;}
form,fieldset{border:none;}
table, td, th{ border-collapse:collapse;border-spacing: 0px;border:#CCC 1px solid;}
ul,ol,li{ list-style:none;}
img{border:0 none;}
a{color:#333;text-decoration:none;}
a:hover{color:#C00; text-decoration:underline;}
a.hidefocus {
    hide-focus: expression(this.hideFocus=true); /* for ie 5+ */
    outline: none; /* for firefox 1.5 + */
}

.clearboth, .clear{clear: both;font-size: 0px;height: 0px;line-height: 0px;width: 100px;margin: 0px auto;}
.shadow{width:100%;height:8px;display:block;overflow:hidden;}
.txt_shadow{text-shadow: 3px 3px 0 #DDD;}
.box_shadow {-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);}
.radius{-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}

/* width setting styles */
.w20{width:20px;}
.w40{width:40px;}
.w60{width:60px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w120{width:120px;}
.w140{width:140px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w220{width:220px;}
.w235{width:235px;}
.w240{width:240px;}
.w260{width:260px;}
.w280{width:280px;}
.w300{width:300px;}
.w320{width:320px;}
.w340{width:340px;}
.w360{width:360px;}
.w380{width:380px;}
.w400{width:400px;}
.w420{width:420px;}
.w440{width:440px;}
.w460{width:460px;}
.w480{width:480px;}
.w500{width:500px;}
.w520{width:520px;}
.w780{width:780px;}

/* margin setting styles */
.mgTB10{ margin:10px 0;}
.mgLR10{ margin:0px 10px;}
.mgT10{margin:10px 0 0 0;}
.mgT20{margin:20px 0 0 0;}
.mgR10{margin:0 10px 0 0;}
.mgR20{margin:0 20px 0 0;}
.mgB10{margin:0 0 20px 0;}
.mgB20{margin:0 0 20px 0;}
.mgB40{margin:0 0 40px 0;}
.mgB100{margin:0 0 100px 0;}
.mgL10{margin:0 0 0 20px;}
.mgL20{margin:0 0 0 20px;}


/* color setting styles */
.warn{ border-color:#f40;}
.red{ color:#F00;}
.red02{color:#C00;}
.green{color:#090;}
/* 
    Created on : Mar 2, 2017, 5:06:26 PM
    Author     : yongshun.zheng
*/
.container {
    margin: 0 auto;
    border: solid #6AC5AC 3px;
}

/*头部样式*/
.iconfont {
    
}
.quickMenu {
    line-height: 30px;
    overflow: hidden;
    border: solid #ccc 3px;
    box-sizing: border-box;
    /*background:#b5cfd2 url(images/cell-blue.jpg);*/
}
.location {
    margin-left: 20%; 
    float: left;
}
.qMenuListUl {
    float: right;
    margin-right: 5%;
}
.qMenuListUl li {
    float: left;
    display: inline-block;
}

.qMenuListUl .spacer {
    width: 1px;
    height: 10px;
    margin: 11px 11px 0;
    background-color: #ccc;
}
.main {
    margin: 0 auto;
    width: 90%;
    /*border: solid #ccffcc 3px;*/
}
.main .adsCartAC {
    position: relative;
    height: 50px;
    line-height: 50px;/*暂时使用为了使文字垂直居中*/
}
.main .adsCartAC .spacerAC {
    /*height: 48px;*/
    height: 100%;
    float: left;
}
.main .adsCartAC .spacerAC, .main .adsCartAC .adsCart {
    box-sizing: border-box;
    text-align: center;
}
.main .adsCartAC .spacerAC {
    width: 200px;
    border: solid #ff3399 1px;
    *border-width: 0;
    background-color: #66cff0;
}
.main .adsCartAC .adsCart {
    height: 100%;
    margin-left: 200px;
}
.adsCartAC .adsCart .ads {
    float: left;
    height: 100%;
    width: 70%;
    *width: 69.99%;
    display: inline-block;
    box-sizing: border-box;
    border: solid #993399 1px;
    *border-width: 0;
    background-color: #66cc00;
}
.adsCartAC .adsCart .cart {
    float: left;
    height: 100%;
    width: 30%;
    display: inline-block;
    box-sizing: border-box;
    border: solid #993399 1px;
    *border-width: 0;
    background-color: #66cff0;
}
.main .typeSlideSearch {
    height: 500px;
    /*border: solid #ff3366 1px;*/
}
.main .typeSlideSearch .productType {
    float: left;
    width: 200px;
    height: 100%;
    line-height: 500px;
    /*min-height: 500px;*/
    text-align: center;
    border: solid #993399 1px;
    box-sizing: border-box;
    *border-width: 0;
    background-color: #cccccc;
}
.main .typeSlideSearch .slideSearch {
    height: 100%;
    margin-left: 200px;
    text-align: center;
    /*border: solid #ffcc00 1px;
    box-sizing: border-box;*/
}
.typeSlideSearch .slideSearch .pdSearch {
    height: 50px;
    line-height: 50px;/*暂时使用为了使文字垂直居中*/
    box-sizing: border-box;
    border: solid #ffcc00 1px;
    *border-width: 0;
    background-color: #ff3399;
}
.typeSlideSearch .slideSearch .pdMenu {
    height: 50px;
    line-height: 50px;/*暂时使用为了使文字垂直居中*/
    box-sizing: border-box;
    border: solid #6AC5AC 1px;
    *border-width: 0;
    background-color: #6AC5AC;
}
.typeSlideSearch .slideSearch .slideImage {
    height: 400px;
    line-height: 400px;/*暂时使用为了使文字垂直居中*/
    border: solid #cc66ff 1px;
    box-sizing: border-box;
    *border-width: 0;
    background-color: #ffcc00;
}
.main .adsImage {
    height: 60px;
    line-height: 60px;/*暂时使用为了使文字垂直居中*/
    border: solid #ff3399 1px;
    box-sizing: border-box;
    text-align: center;
    *border-width: 0;
    background-color: #c55ccc;
}
.main .pdListRank {
    height: 200px;
    *zoom: 1;
    position: relative;
}
.main .pdListRank .pdList, .main .pdListRank .pdRank {
    height: 100%;
    line-height: 200px;/*暂时使用为了使文字垂直居中*/
    border: solid #ffcc00 1px;
    box-sizing: border-box;
    text-align: center;
    *border-width: 0;
}
.main .pdListRank .pdList {
    margin-right: 200px;
    background-color: #c5516c;
}
.main .pdListRank .pdRank {
    position: absolute; 
    right: 0; 
    top: 0;
    width: 200px;
    background-color: #c5f16c;
}
.main .pdOtherList, .main .pdOtherList2, .main .pdOtherList3 {
    height: 350px;
}
.main .pdList1, .main .pdList2, .main .pdList3 {
    display: inline-block;
    height: 100%;
    border: solid #996600 1px;
    box-sizing: border-box;
    text-align: center;
    *float: left;
    *border-width: 0;
    line-height: 350px;/*暂时使用为了使文字垂直居中*/
}
.main .pdList1 {
    background-color: #c5f16c;
}
.main .pdList2 {
    background-color: #c5116c;
}
.main .pdList3 {
    background-color: #c1f77c;
}
.main .pdList1, .main .pdList2, .main .pdList3 {
    width: 33.33%;
}
@media screen and (max-width:1016px) {
    .main .pdList1, .main .pdList2, .main .pdList3 {
        width: 298px;
    }
}
.main .pdList4, .main .pdList5, .main .pdList6 {
    display: inline-block;
    height: 100%;
    border: solid #66cc00 1px;
    box-sizing: border-box;
    text-align: center;
    *float: left;
    *border-width: 0;
    line-height: 350px;/*暂时使用为了使文字垂直居中*/
}
.main .pdList4, .main .pdList5, .main .pdList6 {
    width: 33.33%;
}
.main .pdList4 {
    background-color: #f541fc;
}
.main .pdList5 {
    background-color: #cf11fc;
}
.main .pdList6 {
    background-color: #c10f21;
}
@media screen and (max-width:1016px) {
    .main .pdList4 {
        width: 149px;
    }
    .main .pdList5 {
        width: 447px;
    }
    .main .pdList6 {
        width: 298px;
    }
}
.main .pdOtherList3 {
    position: relative;
}
.pdList7, .pdList9 {
    position:absolute; 
    top:0; 
    width:200px; 
    height:100%;
}
.pdList7 {
    left:0; 
    background:#a0b3d6;
}
.pdList9 {
    right:0; 
    background:#a0b3d6;
}
.pdList8 {
    margin:0 210px; 
    background:#ffe6b8; 
    height:100%;
}
<div class="container">
    <div class="quickMenu">
        <ul class="location"><li><i class="iconfont"></i>上海</li></ul>
        <ul class="qMenuListUl">
            <li><a href="">请登录</a>  <a href="">免费注册</a></li><li class="spacer"></li>
            <li><a href="">我的订单</a></li><li class="spacer"></li>
            <li><a href="">我的主页</a></li><li class="spacer"></li>
            <li><a href="">购买流程</a></li><li class="spacer"></li>
            <li><a href="">客服中心</a></li><li class="spacer"></li>
            <li><a href="">手机商城</a></li>
        </ul>
    </div>
    <div class="main">
        <div class="adsCartAC">
            <div class="spacerAC">logo延伸区</div>
            <div class="adsCart"><!----><div class="ads">广告区</div><div class="cart">购物车按钮区</div><!----></div>
        </div>
        <div class="typeSlideSearch">
            <div class="productType">产品类别区</div>
            <div class="slideSearch">
                <div class="pdSearch">产品检索</div>
                <div class="pdMenu">产品菜单</div>
                <div class="slideImage">轮播图片</div>
            </div>
        </div>
        <div class="adsImage">
            产品广告图
        </div>
        <div class="pdListRank">
            <div class="pdList">产品列表</div>
            <div class="pdRank">产品等级排列</div>
        </div>
        <div class="pdOtherList">
            <div class="pdList1">
                模块一
            </div><div class="pdList2">
                模块二
            </div><div class="pdList3">
                模块三
            </div>
        </div>
        <div class="pdOtherList2">
            <div class="pdList4">
                模块四
            </div><div class="pdList5">
                模块无
            </div><div class="pdList6">
                模块六
            </div>
        </div>
        <div class="pdOtherList3">
              <div class="pdList7">
                    模块七
              </div><div class="pdList8">
                    模块八
              </div><div class="pdList9">
                    模块九
              </div>
        </div>
    </div>
</div>

效果图如下:

本站地址:http://findbug.site/static/css3-page-layout.html

宽屏图:

self-adaption-layout2

self-adaption-layout

小屏图:

self-adaption-layout-small

超小屏图:

self-adaption-layout-micro2

self-adaption-layout-micro

以下有其他例子:

http://nec.netease.com/library/category/#grid

以下是网上的例子:来自一位哥们

老生长谈:css实现右侧固定宽度,左侧宽度自适应

1.右边固定,左侧自适应,三种方法:

1).固定宽度区使用绝对定位,自适应区照例设置margin

<style type="text/css">  
  #wrap {
    *zoom: 1; position: relative;
  }
  #sidebar {
    width: 300px; position: absolute; right: 0; top: 0;
    background-color: #c55ccc;
  }
  #content {
    margin-right: 310px;
    background-color: #c5545c;
  }
</style>
<div id="wrap">
  <div id="content" style="height:340px;">自适应区,在前面</div>
  <div id="sidebar" style="height:240px;">固定宽度区</div>
</div>

2).固定宽度区浮动,自适应区不设宽度而设置 margin

#wrap {
    overflow: hidden; *zoom: 1;
}
#content ,#sidebar {
    background-color: #eee; 
}
#sidebar {
    float: right; width: 300px;
}
#content {
    margin-right: 310px;
}
<div id="wrap">
  <div id="sidebar" style="height:240px;">固定宽度区</div>
  <div id="content" style="height:340px;">自适应区</div>
</div>

2).float与margin齐上阵

#sidebar {
    width: 300px; float: right;
}
#content {
    margin-left: -310px; float: left; width: 100%;
}
#contentb {
    margin-left: 310px;
}
<div id="wrap">
  <div id="content" style="height:140px;">
    <div id="contentb">
      content自适应区,在前面
    </div>
  </div>
  <div id="sidebar" style="height:240px;">sidebar固定宽度区</div>
</div>

 

One Comment

Leave a comment