HTML5和CSS3基础教程(第7版)-BruseHyslope---用CSS进行布局
不得不说一下CSS的功能太强大了,关键在于你对它的全面了解,并灵活运用,HTML元素只是用来表示语义(它不涉及表现形式),如果不用CSS或浏览器默认的CSS样式,那么HTM文档只是一个"文档流",下面看一下如何用CSS对HTML页面进行布局。首先解释一下相关的几个HTML元素.
article: <article>表示一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。<article> 元素的潜在来源 :论坛帖子,报纸文章,博客条目,用户评论.
aside:<aside> 的内容可用作文章的侧栏
nav:<nav> 标签定义导航链接的部分。
section: <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
header:<header> 标签定义文档的页眉（介绍信息）
footer:<footer> 标签定义文档或节的页脚。
div: <div> 可定义文档中的分区或节（division/section）也可以用作通用容器。
先看一个没用应用样式的HTML文档流。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>photobarcelona - Liz Castro's photographs and blog about Barcelona</title> 6 </head> 7 <body> 8 <div id="container"> 9 <div id="page"> 10 <!-- ==== START MASTHEAD ==== --> 11 <header id="masthead" role="banner" class="clearfix"> 12 <p class="logo"><a href="/">photobarcelona… <span>capturing barcelona's cultural treasures on film</span></a></p> 13 14 <div> 15 <nav role="navigation"> 16 <ul class="nav"> 17 <li><a href="#" class="current">home</a></li> 18 <li><a href="/about/">about</a></li> 19 <li><a href="/resources/">resources</a></li> 20 <li><a href="/archives/">archives</a></li> 21 </ul> 22 </nav> 23 24 <form method="get" role="search"> 25 <label for="search">Search:</label> 26 <input type="text" name="search" id="search" maxlength="100" placeholder="architecture, Gaudí, etc." /> 27 <input type="submit" value="Go" title="Submit search" /> 28 </form> 29 </div> 30 </header> 31 <!-- end #masthead --> 32 33 <!-- ==== START MAIN CONTENT ==== --> 34 <div id="main" role="main"> 35 <h1>Recent Entries</h1> 36 37 <!-- Start Entry #1 --> 38 <section class="entry"> 39 <header> 40 <h2 lang="es">Hospital Sant Pau</h2> 41 <p class="date"><time datetime="2011-06-26" pubdate="pubdate">June 26, 2011</time></p> 42 </header> 43 44 <p class="photo"><a href="http://www.flickr.com/photos/cookwood/140084106/" title="Photo Sharing"><img src="http://static.flickr.com/52/140084106_cf60074d2a_t.jpg" width="100" height="75" alt="" /></a></p> 45 46 <div class="intro"> 47 <p>The Saint Paul Hospital at the top of Gaudí Avenue in the Sagrada Família neighborhood is an oft-overlooked gem of modernist architecture. Although the building was begun in 1902 under the direction of the architect Lluís Domènec i Montaner, the hospital itself dates from the 14th century. It serves some 34,000 inpatients yearly, along with more than 150,000 emergency room…</p> 48 49 <p class="continued"><a href="#">continued</a></p> 50 </div> 51 </section> 52 <!-- end .entry #1 --> 53 54 <!-- Start Entry #2 --> 55 <section class="entry"> 56 <header> 57 <h2>Cathedral Cloister</h2> 58 <p class="date"><time datetime="2011-06-24" pubdate="pubdate">June 24, 2011</time></p> 59 </header> 60 61 <p class="photo"><a href="http://www.flickr.com/photos/cookwood/140083631/" title="Photo Sharing"><img src="http://static.flickr.com/49/140083631_2f53b49778_t.jpg" width="100" height="75" alt="" /></a></p> 62 63 <div class="intro"> 64 <p>Outside it feels like a battle is raging, with firecrackers going off left and right in honor of Sant Joan, but in the cloister of Barcelona's 12th century Cathedral, it's quiet enough to hear the trickle of the water from the fountain. As everywhere else in Barcelona, Saint George is slaying his dragon here. Somehow…</p> 65 </div> 66 67 <p class="continued"><a href="#">continued</a></p> 68 </section> 69 <!-- end .entry #2 --> 70 71 <!-- Start Entry #3 --> 72 <section class="entry"> 73 <header> 74 <h2>Market Day</h2> 75 <p class="date"><time datetime="2011-06-23" pubdate="pubdate">June 23, 2011</time></p> 76 </header> 77 78 <p class="photo"><a href="http://www.flickr.com/photos/cookwood/140083416/" title="Photo Sharing"><img src="http://static.flickr.com/48/140083416_8c127e3118_t.jpg" width="100" height="75" alt="" /></a></p> 79 80 <div class="intro"> 81 <p>Quiet returns. And the refrigerator was empty, so off I set on my way to the market. The plan was homemade sushi with friends so I made the trip down to the central Barcelona market: the <i lang="es">Boquería</i>.</p> 82 83 <p>I never get tired of coming here. There are rows and rows of busy stalls with fresh fruit and vegetables, and spices and nuts. And more than a couple of crazy tourists like me taking pictures. I confuse the locals by talking to them in Catalan, but…</p> 84 85 <p class="continued"><a href="#">continued</a></p> 86 </div> 87 </section> 88 <!-- end .entry #3 --> 89 </div> 90 <!-- end #main content --> 91 92 <!-- ==== START SIDEBAR ==== --> 93 <div id="related" class="sidebar" role="complementary"> 94 <aside class="feature"> 95 <h2>From my Window</h2> 96 97 <p>Around the corner from our apartment there is a mosaics studio. Last year and the year before, I walked by and looked in wistfully, thinking how cool it would be to make some of the incredible mosaics they have displayed.</p> 98 99 <p>This year, I signed up. It’s a 22 hour workshop, spread into 2 hour chunks. I’ve been going Monday and Wednesday mornings, and it’s been great. I’ve learned how to cut ceramic tiles and also <span lang="es">“gres”</span> (their word for sandstone, and refers to a matte tile) and how to fit them together. I’ve got a bunch of ideas for more projects.</p> 100 101 <p>So, the other day we make our annual pilgrimage to the Sagrada Familia, and my favorite part is always watching what they’re working on, and there in the middle of the work area is a small pile of green and gold mosaic triangles, just like the ones I’ve been cutting…</p> 102 103 <p class="continued"><a href="#">continued</a></p> 104 </aside> 105 106 <aside class="archive"> 107 <nav role="navigation"> 108 <h2>Archive</h2> 109 <ol reversed="reversed"> 110 <li><a href="/archive/2011/may/">May 2011</a></li> 111 <li><a href="/archive/2011/april/">Apr 2011</a></li> 112 <li><a href="/archive/2011/march/">Mar 2011</a></li> 113 <li><a href="/archive/2011/february/">Feb 2011</a></li> 114 <li><a href="/archive/2011/january/">Jan 2011</a></li> 115 </ol> 116 117 <p class="continued"><a href="/archive/">More from the archive</a></p> 118 </nav> 119 </aside> 120 </div> 121 <!-- end #related .sidebar --> 122 123 <!-- ==== START FOOTER ==== --> 124 <footer id="footer" role="contentinfo"> 125 <h1>about this photoblog</h1> 126 127 <p>This photoblog is the product of a love of computers, photography, and Barcelona. If you're interested in any of my photos, please contact me. <small>The photographs on these pages are licensed under the Creative Commons Attribution-NonCommercial-NoDerivs License. To view a copy of this license, visit <a href="http://creativecommons.org/licenses/by-nc-nd/2.5/" rel="external">http://creativecommons.org/<wbr />licenses/<wbr />by-nc-nd/2.5/</a>; or, (b) send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.</small></p> 128 129 <ul class="thumbnails"> 130 <li><img src="assets/img/thumb-5179.jpg" width="25" height="33" alt="" /></li> 131 <li><img src="assets/img/thumb-5879.jpg" width="33" height="25" alt="" /></li> 132 <li><img src="assets/img/thumb-5928.jpg" width="33" height="24" alt="" /></li> 133 <li><img src="assets/img/thumb-5932.jpg" width="25" height="33" alt="" /></li> 134 <li><img src="assets/img/thumb-5971.jpg" width="33" height="24" alt="" /></li> 135 <li><img src="assets/img/thumb-6023.jpg" width="33" height="24" alt="" /></li> 136 <li><img src="assets/img/thumb-9659.jpg" width="24" height="33" alt="" /></li> 137 <li><img src="assets/img/thumb-0029.jpg" width="33" height="25" alt="" /></li> 138 <li><img src="assets/img/thumb-9662.jpg" width="33" height="24" alt="" /></li> 139 <li><img src="assets/img/thumb-6886.jpg" width="25" height="33" alt="" /></li> 140 <li><img src="assets/img/thumb-7298.jpg" width="33" height="25" alt="" /></li> 141 <li><img src="assets/img/thumb-9661.jpg" width="33" height="24" alt="" /></li> 142 <li><img src="assets/img/thumb-6888.jpg" width="25" height="33" alt="" /></li> 143 <li><img src="assets/img/thumb-7306.jpg" width="33" height="25" alt="" /></li> 144 <li><img src="assets/img/thumb-9451.jpg" width="33" height="25" alt="" /></li> 145 <li><img src="assets/img/thumb-9539.jpg" width="25" height="33" alt="" /></li> 146 <li><img src="assets/img/thumb-9560.jpg" width="33" height="25" alt="" /></li> 147 <li><img src="assets/img/thumb-0011.jpg" width="33" height="24" alt="" /></li> 148 <li><img src="assets/img/thumb-7124.jpg" width="25" height="33" alt="" /></li> 149 <li><img src="assets/img/thumb-0055.jpg" width="33" height="24" alt="" /></li> 150 <li><img src="assets/img/thumb-3973.jpg" width="33" height="24" alt="" /></li> 151 <li><img src="assets/img/thumb-3975.jpg" width="24" height="33" alt="" /></li> 152 <li><img src="assets/img/thumb-4083.jpg" width="33" height="24" alt="" /></li> 153 <li><img src="assets/img/thumb-5894.jpg" width="33" height="24" alt="" /></li> 154 <li><img src="assets/img/thumb-5958.jpg" width="33" height="24" alt="" /></li> 155 </ul> 156 </footer> 157 <!-- end #footer --> 158 </div> 159 <!-- #page --> 160 </div> 161 <!-- #container --> 162 </body> 163 </html>
恰当的应用article ,aside,nav,section,header,footer 和div 元素将页面划分为不同的逻辑块,根据需要对它们应用ARIA地标角色(即属性role),地标角色是属性,在CSS中可以使用属性选择器
进行选择,而不一定使用元素id.CSS中有几个重要的属性和font-size的设置。
display:属性规定元素应该生成的框的类型
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
position:
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
float:
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小.
比如
<div style="font-size=12px">
<span style="fontsize=2em">这里的字是24px</span>
</div>
如果使用em来指定填充,填充的宽度是相对于DIV元素的字体大小而定的.
width: 宽度设置为百分比，这个百分比是相对于父窗口大小。
1 @charset "utf-8"; 2 3 /* ---------------------------------- */ 4 /* Chapter 11: Layout with Styles */ 5 /* Section: Changing the Cursor */ 6 /* ---------------------------------- */ 7 8 9 /* CSS RESET 10 ------------------------------------------------ */ 11 /* http://meyerweb.com/eric/tools/css/reset/ 12 v2.0 | 20110126 13 License: none (public domain) 14 */ 15 16 html, body, div, span, applet, object, iframe, 17 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 18 a, abbr, acronym, address, big, cite, code, 19 del, dfn, em, img, ins, kbd, q, s, samp, 20 small, strike, strong, sub, sup, tt, var, 21 b, u, i, center, 22 dl, dt, dd, ol, ul, li, 23 fieldset, form, label, legend, 24 table, caption, tbody, tfoot, thead, tr, th, td, 25 article, aside, canvas, details, embed, 26 figure, figcaption, footer, header, hgroup, 27 menu, nav, output, ruby, section, summary, 28 time, mark, audio, video { 29 margin: 0; 30 padding: 0; 31 border: 0; 32 font-size: 100%; 33 font: inherit; 34 vertical-align: baseline; 35 } 36 37 /* HTML5 display-role reset for older browsers */ 38 article, aside, details, figcaption, figure, 39 footer, header, hgroup, menu, nav, section { 40 display: block; 41 } 42 43 body { 44 line-height: 1; 45 } 46 47 /* Note from Bruce: The Meyer Reset includes this rule, but I've commented it out so it doesn't take effect. If it weren't commented out, it would turn off the numbers before list items in an ol, and the bullets before list items in an ul. 48 ol, ul { 49 list-style: none; 50 } */ 51 52 blockquote, q { 53 quotes: none; 54 } 55 56 blockquote:before, blockquote:after, 57 q:before, q:after { 58 content: ''; 59 content: none; 60 } 61 62 table { 63 border-collapse: collapse; 64 border-spacing: 0; 65 } 66 67 68 /* GENERAL 69 ---------------------------------------------- */ 70 body { 71 color: #1d3d76; 72 font: 100% "Trebuchet MS", Verdana, sans-serif; 73 padding-bottom: 20px; 74 } 75 76 h1, 77 h2, 78 h3, 79 h4, 80 h5, 81 h6, 82 .logo { 83 color: #b74e07; 84 font-weight: bold; 85 } 86 87 h1 { 88 font-size: 1.5em; /* 24px/16px */ 89 margin-bottom: .75em; 90 text-transform: lowercase; 91 } 92 93 h2 { 94 font-size: 1.375em; /* 22px/16px */ 95 } 96 97 p { 98 margin: 0 0 .5em; 99 padding-right: 10px; 100 } 101 102 /* link states */ 103 a { 104 padding: .2em; 105 } 106 107 a:link { 108 text-decoration: none; 109 color: #597dbd; 110 } 111 112 a:visited { 113 text-decoration: none; 114 color: #597dbd; 115 } 116 117 a:focus, 118 a:hover, 119 a:active { 120 background: #f3cfb6; 121 text-decoration: underline; 122 } 123 124 .nav a:hover { 125 text-decoration: none; 126 } 127 128 a.current { 129 color: #1d3d76; 130 } 131 132 a:hover.current { 133 background: white; 134 cursor: default; 135 } 136 137 /* Contain floats: h5bp.com/q */ 138 .clearfix:before, .clearfix:after { content: ""; display: table; } 139 .clearfix:after { clear: both; } 140 .clearfix { zoom: 1; } 141 142 143 /* CONTAINERS 144 ---------------------------------------------- */ 145 #container { 146 background: url(../img/bg-bluebench.jpg) repeat-y; 147 margin: 20px auto; 148 max-width: 950px; 149 width: 90%; 150 padding: 30px 10px 0 0; 151 } 152 153 #page { 154 background: #fff; 155 padding: 10px 10px 10px 0; 156 max-width: 940px; 157 width: 97.9167%; /* 940px/960px */ 158 } 159 160 #masthead { 161 padding-bottom: 20px; 162 } 163 164 #main { 165 float: left; 166 width: 71%; 167 } 168 169 #related { 170 margin-left: 72%; 171 } 172 173 #footer { 174 border-top: 2px dotted #b74e07; 175 clear: both; 176 margin-top: 10px; 177 } 178 179 180 /* MASTHEAD 181 ---------------------------------------------- */ 182 #masthead { 183 border-bottom: 2px dotted #1d3d76; 184 margin-bottom: 30px; 185 } 186 187 /* Logo */ 188 .logo { 189 float: left; 190 font-size: 2.5em; /* 40px/16px */ 191 margin: 0; 192 } 193 194 .logo a { 195 color: #1d3d76; 196 padding: 0; 197 } 198 199 .logo a:hover { 200 background: transparent; 201 color: #597dbd; 202 text-decoration: none; 203 } 204 205 .logo span { 206 color: #1d3d76; 207 display: block; 208 font-size: 0.3em; /* 12px/40px */ 209 font-style: italic; 210 font-weight: normal; 211 margin: 3px 0 0 1em; 212 } 213 214 /* ::: Navigation and Search Form ::: */ 215 #masthead div { 216 float: right; 217 position: relative; 218 } 219 220 /* Search */ 221 #masthead form { 222 position: absolute; 223 top: 7px; 224 right: 0; 225 } 226 227 input, 228 label, 229 .entry .date, 230 .continued , 231 .sidebar p, 232 .archive ol { 233 font-size: .75em; /* 12px/16px */ 234 } 235 236 input[type="text"] { 237 padding: 2px 3px; 238 width: 150px; 239 } 240 241 input[type="submit"] { 242 vertical-align: top; 243 } 244 245 /* Site Nav */ 246 .nav { 247 margin-top: 45px; 248 } 249 250 .nav li { 251 float: left; 252 font-size: .75em; /* 12px/16px */ /* makes the bullets smaller */ 253 padding: 0 25px 0 3px; 254 } 255 256 .nav li a { 257 font-size: 1.5em; /* 18px/12px */ /* makes the linked text larger than the bullets */ 258 } 259 260 .nav li:first-child { 261 list-style: none; 262 padding-left: 0; 263 } 264 265 .nav li:last-child { 266 padding-right: 0; 267 } 268 269 270 /* CONTENT 271 ---------------------------------------------- */ 272 /* Blog snippet */ 273 .entry { 274 border-right: 2px dashed #b74e07; 275 margin: 0 .5em 2em 0; 276 } 277 278 .entry h2 { 279 font-size: 1.25em; /* 20px/16px */ 280 line-height: 1; 281 } 282 283 .continued, 284 .entry .date { 285 text-align: right; 286 } 287 288 .entry .date { 289 line-height: 1; 290 margin: 0 1em 0 0; 291 padding: 0; 292 position: relative; 293 top: -1em; 294 } 295 296 .continued { 297 font-style: italic; 298 margin-top: -5px; 299 } 300 301 /* Photos */ 302 .intro { 303 margin: -5px 0 0 110px; 304 } 305 306 .photo { 307 float: left; 308 height: 75px; 309 width: 100px; 310 } 311 312 .photo a { 313 margin: 0; 314 padding: 0; 315 } 316 317 318 /* SIDEBAR 319 ---------------------------------------------- */ 320 .sidebar { 321 background: #f5f8fa; 322 padding: 10px; 323 } 324 325 aside h2 { 326 font-size: .9375em; /* 15px/16px */ 327 margin-bottom: 3px; 328 text-transform: lowercase; 329 } 330 331 .feature { 332 font-style: italic; 333 } 334 335 /* Archive */ 336 .archive ol { 337 list-style: disc; /* changes list items from numbers to bullets */ 338 padding-left: 18px; 339 } 340 341 .archive .continued { 342 margin-top: 0; 343 } 344 345 346 /* FOOTER 347 ---------------------------------------------- */ 348 #footer h1 { 349 font-size: 1em; 350 margin-bottom: .25em; 351 padding-top: .25em; 352 } 353 354 #footer p { 355 font-size: .6875em;
356 } 357 358 .thumbnails { 359 list-style: none; 360 padding-top: 4px; 361 } 362 363 .thumbnails li { 364 display: inline; 365 } 366 367 .thumbnails img { 368 vertical-align: middle; 369 }
网页浏览效果如下:
浙公网安备 33010602011771号