zoukankan      html  css  js  c++  java

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

    简单结构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优化很重要

     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 /**复杂结构布局**/
11 .layout-21{}
12     .layout-21 .wrap{ float:left; width:100%;}
13     .layout-21 .content{margin:0px 160px 0 210px;}
14     .layout-21 .sidebar{float:left; margin-left:-100%;}
15     .layout-21 .more{float:right; margin-left:-150px;}
16 .layout-22{}
17     .layout-22 .wrap{float:left; width:100%;}
18     .layout-22 .content{margin-right:210px;}
19     .layout-22 .sidebar{float:right; margin-left:-200px;}
20 .layout-23{}
21     .layout-23 .wrap{float:left; width:100%; margin-right:-200px;}
22     .layout-23 .content{margin-right:210px;}
23     .layout-23 .sidebar{float:left;}
24 .layout-24{}
25     .layout-24 .wrap{float:right; width:100%; margin-left:-200px;}
26     .layout-24 .content{margin-left:210px;}
27     .layout-24 .sidebar{float:left;}
28 </style>
29 <div class="layout layout-21">
30     <div class="wrap">
31         <div class="content">
32             <p>.layout-21 .wrap{ float:left; 100%;}<br />.layout-21 .content{margin-left:210px;}</p>
33         </div>
34     </div>
35     <div class="sidebar">
36         <p>.layout-21 .sidebar{float:left; margin-left:-100%;/*如果最外边的div.layout,设置了border或者padding的话，那么ie6下的边距表现不对*/}</p>
37     </div>
38     <div class="more"><p>.layout-21 .more{float:right; margin-right:-100%;}</p></div>
39     <p class="clear">是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>  
40 </div>
  • 相关阅读:
    设计模式的四个基本要素
    拖拉记录上下移动--Ajax UI
    Rails-Treasure chest2 嵌套表单；
    YAML(摘录)
    Rails-Treasure chest1 (自定义Model网址;多语言包; 时区设置, TimeZone类; 格式日期时间; 表单单选UI; 表单多选UI;Select2 Plugin)
    iTerm2的设置和Zsh.
    **优化--后端**: 计数缓存counter_cache; rack-mini-profiler(2300🌟) ; bullet(5000✨):侦测N+1query
    优化--前端（全占课，未完成作业：）;CDN; Http／2的设置（未完成)
    null值的判断
    if else
  • 原文地址：https://www.cnblogs.com/qwguo/p/9903348.html
Copyright © 2011-2022 走看看