关于页面的多种自适应布局——三列布局

小灰灰 2023-06-03 09:57 18阅读 0赞

## 简单结构1，列表在前，更多列表在中间，内容在后 ##

1 <style type="text/css">
     2 .layout{ background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
     3 .layout:after{ content:"";clear:both; display:block; height:0px; overflow:hidden;}
     4 .wrap{}
     5 .content{ background-color:green; /*height:290px;*/}
     6 .sidebar{ background-color:blue; /*height:290px;*/ width:200px;}
     7 .more{ background-color:red; width:150px;}
     8 p{ color:#fff;font-family:arial; font-size:16px; line-height:30px;}
     9 p.clear{ clear:both;}
    10 /**简单结构1，列表在前，内容在后**/
    11 .layout-1{}
    12 .layout-1 .sidebar{ float:left;}
    13 .layout-1 .more{ float:right;}
    14 .layout-1 .content{ margin:0px 160px 0px 210px; _margin:0px 157px 0 207px; /*IE6下的3像素外边距问题*/}
    15 .layout-1-1{}
    16 .layout-1-1 .sidebar{ float:right;}
    17 .layout-1-1 .more{ float:left;}
    18 .layout-1-1 .content{ margin:0px 210px 0px 160px; _margin:0px 207px 0 157px; /*IE6下的3像素外边距问题*/}
    19 .layout-3{ position:relative;}
    20 .layout-3 .sidebar{ position:absolute; left:10px; top:10px;}
    21 .layout-3 .more{ position:absolute; right:10px; top:10px;}
    22 .layout-3 .content{ margin:0px 160px 0 210px;}
    23 .layout-3-1{ position:relative;}
    24 .layout-3-1 .sidebar{ position:absolute; right:10px; top:10px;}
    25 .layout-3-1 .more{ position:absolute; left:10px; top:10px;}
    26 .layout-3-1 .content{ margin:0px 210px 0 160px ;}
    27 </style>
    28 <div class="layout layout-1">
    29     <div class="sidebar"><p>.layout-1 .sidebar{float:left;}</p></div>
    30     <div class="more"><p>.layout-1 .more{float:right;}</p></div>
    31     <div class="content"><p>.layout-1 .content{margin:0px 160px 0px 210px; _margin:0px 157px 0 207px; /*IE6下的3像素外边距问题*/}</p></div>
    32     <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
    33 </div>
    34 <div class="layout layout-1-1">
    35     <div class="sidebar"><p>.layout-1-1 .sidebar{float:right;}</p></div>
    36     <div class="more"><p>.layout-1 .more{float:left;}</p></div>
    37     <div class="content"><p>.layout-1-1 .content{margin-right:210px; _margin-right:207px; /*IE6下的3像素外边距问题*/}</p></div>
    38     <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
    39 </div>
    40 
    41 <div class="layout layout-3">
    42     <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
    43     <div class="more"><p>.layout-3 .more{position:absolute; right:10px; top:10px;}</p></div>
    44     <div class="content"><p>.layout-3 .content{margin:0px 160px 0px 210px;}</p></div>
    45     <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
    46 </div>
    47 <div class="layout layout-3-1">
    48     <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; right:10px; top:10px;}</p></div>
    49     <div class="more"><p>.layout-3 .more{position:absolute; left:10px; top:10px;}</p></div>
    50     <div class="content"><p>.layout-3 .content{margin:0px 210px 0px 160px;}</p></div>
    51     <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
    52 </div>

## 简单结构2，内容在前，列表在后,这种布局兼容性不是很好，内容在前对于SEO优化很重要 ##

1 <style type="text/css">
     2 .layout{ background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
     3 .layout:after{ content:"";clear:both; display:block; height:0px; overflow:hidden;}
     4 .wrap{}
     5 .content{ background-color:green; /*height:290px;*/}
     6 .sidebar{ background-color:blue; /*height:290px;*/ width:200px;}
     7 .more{ background-color:red; width:150px;}
     8 p{ color:#fff;font-family:arial; font-size:16px; line-height:30px;}
     9 p.clear{ clear:both;}
    10 /**简单结构2，内容在前，列表在后**/
    11 .layout-10{}
    12 .layout-10 .content{ margin:0px 210px -60px 160px;}
    13 .layout-10 .sidebar{ float:right;}
    14 .layout-10 .more{ float:left;}
    15 
    16 .layout-10-1{}
    17 .layout-10-1 .content{ margin:0px 210px 0px 160px;}
    18 .layout-10-1 .sidebar{ float:right; margin-top:-30px;}
    19 .layout-10-1 .more{ float:left; margin-top:-30px;}
    20 .layout-11{ position:relative;}
    21 .layout-11 .content{ margin-left:210px;}
    22 .layout-11 .sidebar{ position:absolute; left:10px; top:10px;}
    23 .layout-11-1{ position:relative;}
    24 .layout-11-1 .content{ margin-right:210px;}
    25 .layout-11-1 .sidebar{ position:absolute; right:10px; top:10px;}
    26 </style>
    27 <div class="layout layout-10">
    28     <div class="content"><p>.layout-10 .content{margin:0px 210px -60px 160px;}/**这里的margin-bottom:-60px;需要通过js来计算，取值为content区的高度，也可以给sidebar：margin-top:-30px;**/}</p></div>
    29     <div class="sidebar"><p>.layout-10 .sidebar{float:right;}</p></div>
    30     <div class="more"><p>.layout-10 .more{float:left;}</p></div>
    31     <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
    32 </div>
    33 <div class="layout layout-10-1">
    34     <div class="content"><p>.layout-10-1 .content{margin:0px 210px 0px 160px;}</p></div>
    35     <div class="sidebar"><p>.layout-10-1 .sidebar{float:right; margin-top:-30px;}/**这里的margin-top:-30px;需要通过js来计算，取值为content区的高度，也可以给content：margin-bottom:-30px;后边的元素需要清除浮动**/}</p></div>
    36     <div class="more"><p>.layout-10-1 .more{float:left; margin-top:-30px;}</p></div>
    37     <p class="clear">.layout-10-1 p{clear:both;}<br/>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
    38 </div>

## 复杂结构,内容在前，列表在后，能够很好的实现自适应布局，并且兼容性好。内容在前对于SEO优化很重要 ##

更多专业前端知识，请上 **【猿2048】www.mk2048.com**