宽度自适应布局：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>宽度自适应布局</title> 6 <style> 7 .wrap { 8 background-color: #D66464; 9 } 10 .clearfix:after { 11 content: ""; 12 clear: both; 13 display: block; 14 } 15 .left { 16 float: left; 17 100px; 18 background: #00f; 19 height: 180px; 20 } 21 .right { 22 float: right; 23 150px; 24 background: #0f0; 25 height: 200px; 26 } 27 .center { 28 background: #FFFFFF; 29 margin-left: 110px; 30 margin-right: 160px; 31 height: 150px; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="wrap clearfix"> 37 <div class="left">left，宽度固定，高度可固定也可以由内容撑开。</div> 38 <div class="right">right，宽度固定，高度可固定也可以由内容撑开。</div> 39 <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div> 40 </div> 41 </body> 42 </html>
响应式布局：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>响应式Web设计</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <!--[if lt IE 9]> 9 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 10 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 11 <![endif]--> 12 13 </head> 14 <style type="text/css"> 15 body { 16 background: #000; 17 font: normal 14px/2 '微软雅黑'; 18 color: #464646; 19 padding-top: 28px; 20 } 21 * { 22 padding: 0; 23 margin: 0; 24 list-style: none; 25 font-style:normal } 26 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 27 display: block; 28 } 29 header { 30 980px; 31 margin: 0 auto; 32 } 33 header .name { 34 font: bold 36px/48px Arial, Helvetica, sans-serif; 35 color: #F90 } 36 header nav { 37 height: 50px; 38 background: #663; 39 border-radius: 5px; 40 text-align: center; 41 } 42 header nav, header nav a { 43 color: #fff } 44 header nav ul li { 45 display: inline-block; 46 *display:inline; 47 *zoom:1; 48 200px; 49 line-height: 50px; 50 } 51 #container { 52 margin: 12px auto; 53 980px; 54 overflow: hidden; 55 zoom: 1; 56 } 57 #container article { 58 700px; 59 background: #fff; 60 border-radius: 5px; 61 float: left; 62 margin-bottom:10px; 63 padding:0 12px; 64 } 65 #container article h1 { 66 height: 48px; 67 } 68 #container article figure { 69 text-align:center; 70 } 71 #container article figure img { 72 max- 100%; 73 height: auto; 74 margin:0 auto 75 } 76 #container article section { 77 margin: 20px; 78 font-size: 12px; 79 } 80 #container article section p { 81 margin-top: 1em; 82 text-indent: 2em } 83 #container aside { 84 240px; 85 float: right; 86 } 87 #container aside article { 88 background: #fff; 89 border-radius: 5px; 90 font-size: 12px; 91 padding: 10px; 92 220px; 93 margin-bottom:12px 94 } 95 #container aside article h1 { 96 font:bold 14px/28px '微软雅黑'; 97 border-bottom:1px solid #eee; 98 height:28px; 99 } 100 #container aside article .imglist { 101 font-size:0 102 } 103 #container aside article .imglist li { 104 display:inline-block; 105 display:inline; 106 zoom:1; 107 66px; 108 height:50px; 109 border:1px solid #eee; 110 overflow:hidden; 111 margin-right:5px; 112 margin-top:5px; 113 } 114 #container aside article .imglist li img { 115 20%; 116 height:auto; 117 margin:2px; 118 } 119 footer { 120 background: #669; 121 980px; 122 margin: 12px auto; 123 color: #fff; 124 height: 36px; 125 text-align: center; 126 font: normal 12px/36px '微软雅黑'; 127 border-radius: 5px; 128 } 129 @media screen and (max-980px) { 130 header { 131 100%; 132 overflow:hidden; 133 *zoom:1; 134 } 135 header .name { 136 font: bold 36px/48px Arial, Helvetica, sans-serif; 137 color: #F90; 138 text-align:center 139 } 140 header nav { 141 background: none; 142 text-align: center; 143 height:auto; 144 100%; 145 } 146 header nav ul li { 147 display:inline-block; 148 background: #663; 149 border-radius: 5px; 150 margin:3px 0; 151 height:30px; 152 line-height:30px; 153 20%; 154 } 155 #container { 156 margin: 12px auto; 157 100%; 158 overflow: hidden; 159 zoom: 1; 160 } 161 #container article { 162 100%; 163 background: #fff; 164 border-radius: 5px; 165 float: none ; 166 padding:0; 167 } 168 #container article h1 { 169 95%; 170 margin:0 auto } 171 #container article figure { 172 95%; 173 margin:0 auto 174 } 175 #container aside { 176 100%; 177 ; float: none; 178 } 179 #container aside article { 180 background: #fff; 181 border-radius: 5px; 182 font-size: 12px; 183 padding: 10px; 184 100%; 185 margin-bottom:6px 186 } 187 footer { 188 background: #669; 189 100%; 190 margin: 12px auto; 191 height:auto; 192 color: #fff; 193 text-align: center; 194 font: normal 12px/24px '微软雅黑'; 195 border-radius: 5px; 196 padding:12px 0 197 } 198 footer em { 199 95%; 200 margin:0 auto; 201 display:block; 202 border-bottom:1px dotted #789 203 } 204 } 205 </style> 206 <body> 207 <header> 208 <div class="name">往事随风</div> 209 <nav> 210 <ul> 211 <li>亿房首页</li> 212 <li>亿房信息</li> 213 <li>在线咨询</li> 214 <li>亿房论坛</li> 215 </ul> 216 </nav> 217 </header> 218 <div id="container"> 219 <article> 220 <h1>武汉亿房网</h1> 221 <figure> 222 <figcaption></figcaption> 223 <img src="images/3.jpg"/> 224 </figure> 225 <section> 226 <p>前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p> 227 <p>html指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML</p> 228 <p>css级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力</p> 229 <p>javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能</p> 230 </section> 231 </article> 232 <aside> 233 <article> 234 <h1>最多访问文章</h1> 235 <ul> 236 <li>·《全民编程》我在微软生活中所接触的 </li> 237 <li>·Eclipse安装SVN插件方式简明介绍</li> 238 <li>·使用Eclipse调试Java程序的10个技巧 </li> 239 <li>·三步学会Java Socket编程 </li> 240 <li>·程序员妻子自述: 那些程序员教给我的</li> 241 <li>·我希望在20岁时就知道的26条时间管理 </li> 242 <li>·详解Java解析XML的四种方法 </li> 243 <li>·Java数组声明、创建、初始化 </li> 244 </ul> 245 </article> 246 <article> 247 <h1>最新发布照片</h1> 248 <ul class="imglist"> 249 <li><img src="images/2.jpg"></li> 250 <li><img src="images/3.jpg"></li> 251 <li><img src="images/4.jpg"></li> 252 <li><img src="images/3.jpg"></li> 253 <li><img src="images/4.jpg"></li> 254 <li><img src="images/2.jpg"></li> 255 <li><img src="images/3.jpg"></li> 256 <li><img src="images/4.jpg"></li> 257 </ul> 258 </article> 259 <article> 260 <h1>最多访问文章</h1> 261 <ul> 262 <li>·《全民编程》我在微软生活中所接触的 </li> 263 <li>·Eclipse安装SVN插件方式简明介绍</li> 264 <li>·使用Eclipse调试Java程序的10个技巧 </li> 265 <li>·三步学会Java Socket编程 </li> 266 <li>·程序员妻子自述: 那些程序员教给我的</li> 267 <li>·我希望在20岁时就知道的26条时间管理 </li> 268 <li>·详解Java解析XML的四种方法 </li> 269 <li>·Java数组声明、创建、初始化 </li> 270 </ul> 271 </article> 272 <article> 273 <h1>最多访问文章</h1> 274 <ul> 275 <li>·《全民编程》我在微软生活中所接触的 </li> 276 <li>·Eclipse安装SVN插件方式简明介绍</li> 277 <li>·使用Eclipse调试Java程序的10个技巧 </li> 278 <li>·三步学会Java Socket编程 </li> 279 <li>·程序员妻子自述: 那些程序员教给我的</li> 280 <li>·我希望在20岁时就知道的26条时间管理 </li> 281 <li>·详解Java解析XML的四种方法 </li> 282 <li>·Java数组声明、创建、初始化 </li> 283 </ul> 284 </article> 285 286 </aside> 287 </div> 288 <footer><em>关于站长之家</em> <em>联系我们(电话)</em> <em>广告服务</em> <em>友情链接</em> <em>网站地图</em> <em>版权声明</em> <em>人才招聘</em></footer> 289 </body> 290 </html>
css架构：
1 /*! 2 * by zhangxinxu(.com) 2010-? 3 * https://github.com/zhangxinxu/zxx.lib.css 4 * under MIT license 5 */ 6 /* 7 * 2010-07-12 v1.0 8 * 2010-07-21 v1.1 添加block元素居中之auto属性，增加鼠标手形样式 9 * 2010-09-17 v1.2 添加z-index层级属性 10 * 2010-09-29 v1.3 添加break-word属性 11 * 2010-11-12 v1.4 添加white-space:nowrap;值，去掉Georgia字体 12 * 2011-01-17 v1.5 去除red颜色，添加cell双栏自适应属性，z样式影响扩至IE7，样式位置以及顺序调整，dib样式忽略Firefox 2，去除Lucida Console字体，添加Verdana字体，添加letter-spacing样式 13 * 2011-07-28 v1.6 增加vertical-align:bottom属性，增加点点点效果多样 14 * 2012-01-18 v1.7 点点点效果样式去除-moz-前缀，多余；增加修复cell下连续单词字符换行问题；去除.ovs{overflow:scroll;} 15 去除.vimg{margin-bottom:-3px;} 16 * 2013-05-24 v2.0 为开源到github上做大改 17 1. 增加margin负值范围 18 2. margin/padding增加15px/30px组 19 3. 中文字体改成英文字符表示，例如“微软雅黑” → "microsoft yahei" 20 4. 新增border系列, background-color系列, width(fixed value/percent value)系列以及.ell以下所有样式 21 * 2013-07-31 v2.1 inline_any等12px字体大小限制去除，inline_box的-3px间距缩进改成-.25em, 以便适应各种字体大小环境 22 * 2013-09-13 v2.2 12px字体大小限制修改为1px笔误了，应该为1em, 删除-ms-transition 23 * 2013-10-11 v2.3 float_seven一直没删除，清掉。增加两个绝对定位隐藏：abs_out和abs_clip 24 * 2013-11-23 v2.4 add p0, ova, f18. 去除trans中-moz-和-o-私有前缀 25 * 2014-02-26 v2.5 fix two name mistake 26 * 2014-02-27 v2.6 add fl 27 */ 28 29 /* ---------------------single CSS----------------------- */ 30 /* display */ 31 .dn{display:none;} 32 .di{display:inline;} 33 .db{display:block;} 34 .dib{display:inline-block;} /* if the element is block level(eg. div, li), using 'inline_any' instead */ 35 /* height */ 36 .h14{height:14px;} 37 .h16{height:16px;} 38 .h18{height:18px;} 39 .h20{height:20px;} 40 .h22{height:22px;} 41 .h24{height:24px;} 42 /* width */ 43 /* fixed width value */ 44 .w20{20px;} 45 .w50{50px;} 46 .w70{70px;} 47 .w100{100px;} 48 .w120{120px;} 49 .w140{140px;} 50 .w160{160px;} 51 .w180{180px;} 52 .w200{200px;} 53 .w220{220px;} 54 .w250{250px;} 55 .w280{280px;} 56 .w300{280px;} 57 .w320{320px;} 58 .w360{360px;} 59 .w400{400px;} 60 .w460{460px;} 61 .w500{500px;} 62 .w600{600px;} 63 .w640{640px;} 64 .w700{700px;} 65 /* percent width value */ 66 .pct10{10%;} 67 .pct15{15%;} 68 .pct20{20%;} 69 .pct25{25%;} 70 .pct30{30%;} 71 .pct33{33.3%;} 72 .pct40{40%;} 73 .pct50{50%;} 74 .pct60{60%;} 75 .pct66{66.6%;} 76 .pct70{70%;} 77 .pct75{75%;} 78 .pct80{80%;} 79 .pct90{90%;} 80 .pct100{100%;} 81 /* line-height */ 82 .lh14{line-height:14px;} 83 .lh16{line-height:16px;} 84 .lh18{line-height:18px;} 85 .lh20{line-height:20px;} 86 .lh22{line-height:22px;} 87 .lh24{line-height:24px;} 88 /* margin */ 89 .m0{margin:0;} 90 .ml1{margin-left:1px;} 91 .ml2{margin-left:2px;} 92 .ml5{margin-left:5px;} 93 .ml10{margin-left:10px;} 94 .ml15{margin-left:15px;} 95 .ml20{margin-left:20px;} 96 .ml30{margin-left:30px;} 97 .mr1{margin-right:1px;} 98 .mr2{margin-right:2px;} 99 .mr5{margin-right:5px;} 100 .mr10{margin-right:10px;} 101 .mr15{margin-right:15px;} 102 .mr20{margin-right:20px;} 103 .mr30{margin-right:30px;} 104 .mt1{margin-top:1px;} 105 .mt2{margin-top:2px;} 106 .mt5{margin-top:5px;} 107 .mt10{margin-top:10px;} 108 .mt15{margin-top:15px;} 109 .mt20{margin-top:20px;} 110 .mt30{margin-top:30px;} 111 .mb1{margin-bottom:1px;} 112 .mb2{margin-bottom:2px;} 113 .mb5{margin-bottom:5px;} 114 .mb10{margin-bottom:10px;} 115 .mb15{margin-bottom:15px;} 116 .mb20{margin-bottom:20px;} 117 .mb30{margin-bottom:30px;} 118 /* margin negative */ 119 .ml-1{margin-left:-1px;} 120 .mr-1{margin-right:-1px;} 121 .mt-1{margin-top:-1px;} 122 .mb-1{margin-bottom:-1px;} 123 .ml-3{margin-left:-3px;} 124 .mr-3{margin-right:-3px;} 125 .mt-3{margin-top:-3px;} 126 .mb-3{margin-bottom:-3px;} 127 .ml-20{margin-left:-20px;} 128 .mr-20{margin-right:-20px;} 129 .mt-20{margin-top:-20px;} 130 .mb-20{margin-bottom:-20px;} 131 /* padding */ 132 .p0{padding:0;} 133 .p1{padding:1px;} 134 .pl1{padding-left:1px;} 135 .pt1{padding-top:1px;} 136 .pr1{padding-right:1px;} 137 .pb1{padding-bottom:1px;} 138 .p2{padding:2px;} 139 .pl2{padding-left:2px;} 140 .pt2{padding-top:2px;} 141 .pr2{padding-right:2px;} 142 .pb2{padding-bottom:2px;} 143 .pl5{padding-left:5px;} 144 .p5{padding:5px;} 145 .pt5{padding-top:5px;} 146 .pr5{padding-right:5px;} 147 .pb5{padding-bottom:5px;} 148 .p10{padding:10px;} 149 .pl10{padding-left:10px;} 150 .pt10{padding-top:10px;} 151 .pr10{padding-right:10px;} 152 .pb10{padding-bottom:10px;} 153 .p15{padding:15px;} 154 .pl15{padding-left:15px;} 155 .pt15{padding-top:15px;} 156 .pr15{padding-right:15px;} 157 .pb15{padding-bottom:15px;} 158 .p20{padding:20px;} 159 .pl20{padding-left:20px;} 160 .pt20{padding-top:20px;} 161 .pr20{padding-right:20px;} 162 .pb20{padding-bottom:20px;} 163 .p30{padding:30px;} 164 .pl30{padding-left:30px;} 165 .pt30{padding-top:30px;} 166 .pr30{padding-right:30px;} 167 .pb30{padding-bottom:30px;} 168 /* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/ 169 .bdc{border:1px solid #ccc;} 170 .blc{border-left:1px solid #ccc;} 171 .brc{border-right:1px solid #ccc;} 172 .btc{border-top:1px solid #ccc;} 173 .bbc{border-bottom:1px solid #ccc;} 174 .bdd{border:1px solid #ddd;} 175 .bld{border-left:1px solid #ddd;} 176 .brd{border-right:1px solid #ddd;} 177 .btd{border-top:1px solid #ddd;} 178 .bbd{border-bottom:1px solid #ddd;} 179 .bde{border:1px solid #eee;} 180 .ble{border-left:1px solid #eee;} 181 .bre{border-right:1px solid #eee;} 182 .bte{border-top:1px solid #eee;} 183 .bbe{border-bottom:1px solid #eee;} 184 /* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */ 185 .bgwh{background-color:#fff;} 186 .bgfb{background-color:#fbfbfb;} 187 .bgf5{background-color:#f5f5f5;} 188 .bgf0{background-color:#f0f0f0;} 189 .bgeb{background-color:#ebebeb;} 190 .bge0{background-color:#e0e0e0;} 191 /* safe color */ 192 .g0{color:#000;} 193 .g3{color:#333;} 194 .g6{color:#666;} 195 .g9{color:#999;} 196 .gc{color:#ccc;} 197 .wh{color:white;} 198 /* font-size */ 199 .f0{font-size:0;} 200 .f10{font-size:10px;} 201 .f12{font-size:12px;} 202 .f13{font-size:13px;} 203 .f14{font-size:14px;} 204 .f16{font-size:16px;} 205 .f18{font-size:18px;} 206 .f20{font-size:20px;} 207 .f24{font-size:24px;} 208 /* font-family */ 209 .fa{font-family:Arial;} 210 .ft{font-family:Tahoma;} 211 .fv{font-family:Verdana;} 212 .fs{font-family:Simsun;} 213 .fl{font-family:'Lucida Console';} 214 .fw{font-family:'Microsoft Yahei';} 215 /* font-style */ 216 .n{font-weight:normal; font-style:normal;} 217 .b{font-weight:bold;} 218 .i{font-style:italic;} 219 /* text-align */ 220 .tc{text-align:center;} 221 .tr{text-align:right;} 222 .tl{text-align:left;} 223 .tj{text-align:justify;} 224 /* text-decoration */ 225 .tdl{text-decoration:underline;} 226 .tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;} 227 /* letter-spacing */ 228 .lt-1{letter-spacing:-1px;} 229 .lt0{letter-spacing:0;} 230 .lt1{letter-spacing:1px;} 231 /* white-space */ 232 .nowrap{white-space:nowrap;} 233 /* word-wrap */ 234 .bk{word-wrap:break-word;} 235 /* vertical-align */ 236 .vm{vertical-align:middle;} 237 .vtb{vertical-align:text-bottom;} 238 .vb{vertical-align:bottom;} 239 .vt{vertical-align:top;} 240 .vn{vertical-align:-2px;} 241 /* float */ 242 .l{float:left;} 243 .r{float:right;} 244 /* clear */ 245 .cl{clear:both;} 246 /* position */ 247 .rel{position:relative;} 248 .abs{position:absolute;} 249 /*z-index*/ 250 .zx1{z-index:1;} 251 .zx2{z-index:2;} 252 /* cursor */ 253 .poi{cursor:pointer;} 254 .def{cursor:default;} 255 /* overflow */ 256 .ovh{overflow:hidden;} 257 .ova{overflow:auto;} 258 /* visibility */ 259 .vh{visibility:hidden;} 260 .vv{visibility:visible;} 261 /* zoom */ 262 .z{*zoom:1;} 263 264 265 /* ------------------- multiply CSS ------------------ */ 266 /* 块状元素水平居中 */ 267 .auto{margin-left:auto; margin-right:auto;} 268 /* 清除浮 动*/ 269 .fix{*zoom:1;} 270 .fix:after{display:table; content:''; clear:both;} 271 /* 基于display:table-cell的自适应布局 */ 272 .cell{display:table-cell; *display:inline-block; 2000px; *auto;} 273 /* 双栏自适应cell部分连续英文字符换行 */ 274 .cell_bk{display:table; 100%; table-layout:fixed; word-wrap:break-word;} 275 /* 单行文字溢出虚点显 示*/ 276 .ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} 277 /* css3过渡动画效果 */ 278 .trans{ 279 -webkit-transition:all 0.3s; 280 transition:all 0.3s; 281 } 282 /* 大小不定元素垂直居中 */ 283 .dib_vm{display:inline-block; 0; height:100%; vertical-align:middle;} 284 /* 加载中背景图片 - 如果您使用该CSS小库，务必修改此图片地址 */ 285 .loading{background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;} 286 /* 无框文本框文本域 */ 287 .bd_none{border:0; outline:none;} 288 /* 绝对定位隐藏 */ 289 .abs_out{position:absolute; left:-999em; top:-999em;} 290 .abs_clip{position:absolute; clip:rect(0 0 0 0);} 291 /* 按钮禁用 */ 292 .disabled{color:#acacac!important; border-color:#acacac!important; text-shadow:1px 1px #fff!important; outline:0!important; cursor:default!important; pointer-events:none;} 293 .disabled:hover{text-decoration:none!important;} 294 /*inline-block与float等宽列表*/ 295 .inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;} 296 .inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;} 297 .float_two, .float_three, .float_four, .float_five, .float_six{float:left;} 298 .inline_two, .float_two{49.9%;} 299 .inline_three, .float_three{33.3%;} 300 .inline_four, .float_four{24.9%;} 301 .inline_five, .float_five{19.9%;} 302 .inline_six, .float_six{16.6%;} 303 .inline_fix{display:inline-block; 100%; height:0; overflow:hidden;}