1.HTML5 非常强调代码的语义化. 在过去我们用的是表格来实现页面布局, 但那是很糟糕的语义实现, 因此逐渐被抛弃了. 在 HTML5 页面布局时, 应该首先考虑代码的语义化, 尽量使用代码中不包含冗余的 DOM 结构, 在此基础上尽可能的使用 CSS 样式来完成页面的布局. 在迫不得已的时候我们在适当的添加一些 DOM 结构来帮助实现某些特定的布局效果.
2. 绝大部分的页面布局都是浮动 float, 定位 position 和内外边距 margin,padding 三者的有机结合, 一些高级的布局效果甚至使用负 margin 这样的独特技巧来加以实现.
3. 要对布局有更深的理解还需要掌握各种元素的呈现方式 display 及其与整个页面空间的关系, 这也是所谓的文档流.
图文混编与题图文字布局, 使用 align="right" 实现不推荐使用
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 图文</title>
- <style>
- section{
- width: 700px;
- background-color: #eeffee;
- margin: 0 auto;
- }
- section p{
- text-indent: 2em;
- }
- </style>
- </head>
- <body>
- <section>
- <img src="https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/7c1ed21b0ef41bd5faa7ae315ada81cb38db3d7a.jpg" alt="古诗" width="200" height="90px" align="right">
- <p>
赠汪伦是唐代大诗人李白于泾县 (今安徽皖南地区) 游历桃花潭时写给当地好友汪伦的一首留别诗. 此诗前两句描绘李白乘舟欲行时, 汪伦踏歌赶来送行的情景, 朴素自然地表达出汪伦对李白那种朴实, 真诚的情感; 后两句先用 "深千尺" 赞美桃花潭水的深湛, 紧接 "不及" 两个字笔锋一转, 用衬托的手法, 把无形的情谊化为有形的千尺潭水, 生动形象地表达了汪伦对李白那份真挚深厚的友情. 全诗语言清新自然, 想象丰富奇特, 虽仅四句二十八字, 却是李白诗中流传最广的佳作之一.
- </p>
- </section>
- </body>
- </html>
因此最后的方式是通过 css 来实现图文混排使用 float, 一旦设置成了浮动, img 这个块级元素就被从整个文档流中抽取出来, 根据浮动的方向重新定位, img 原有的位置空了出来, 被下方的段落所取代, 两者有上下排列变成了排排坐. 而由于 img 有浮动后占据了右侧的一块区域, 因此段落中的行内元素将避开这一已经占据的区域.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 图文</title>
- <style>
- section{
- width: 700px;
- background-color: #eeffee;
- margin: 0 auto;
- }
- section p{
- text-indent: 2em;
- }
- section img{
- float: right;
- width: 200px;
- height: 90px;
- margin: 5px;
- }
- </style>
- </head>
- <body>
- <section>
- <img src="https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/7c1ed21b0ef41bd5faa7ae315ada81cb38db3d7a.jpg" alt="古诗">
- <p>
赠汪伦是唐代大诗人李白于泾县 (今安徽皖南地区) 游历桃花潭时写给当地好友汪伦的一首留别诗. 此诗前两句描绘李白乘舟欲行时, 汪伦踏歌赶来送行的情景, 朴素自然地表达出汪伦对李白那种朴实, 真诚的情感; 后两句先用 "深千尺" 赞美桃花潭水的深湛, 紧接 "不及" 两个字笔锋一转, 用衬托的手法, 把无形的情谊化为有形的千尺潭水, 生动形象地表达了汪伦对李白那份真挚深厚的友情. 全诗语言清新自然, 想象丰富奇特, 虽仅四句二十八字, 却是李白诗中流传最广的佳作之一.
- </p>
- </section>
- </body>
- </html>
通过综合运用背景色, 边框, 内外边距等样式属性实现图文布局方式. Hero Unit(主角单元), 其中使用了 text-align 属性来设置文本居中他的效果很大, 使 div 中的块级元素全部居中显示. 在页面中效果存在一个问题, 在添加完 padding 属性后 div 的宽度和高度都已经超过了原来所设置的大小. 解决方法使用 div 的 box-sizing 属性为 border-box.
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素.
例如, 假如您需要并排放置两个带边框的框, 可通过将 box-sizing 设置为 "border-box". 这可令浏览器呈现出带有指定宽度和高度的框, 并把边框和内边距放入框中.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 图文</title>
- <style>
- #description{
- width: 700px;
- margin: 0 auto;
- background: #f39c12;
- text-align: center;
- padding: 30px;
- box-sizing: border-box;
- }
- #description img{
- width: 150px;
- height: 70px;
- }
- #description h1{
- color: #fff;
- margin: 15xp auto;
- font-size: 50px;
- }
- #description p{
- color: rgba(255, 255, 255, 0.7);
- }
- </style>
- </head>
- <body>
- <div id="description">
- <img src="https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8d5494eef01f3a293ed2980b9225bc315d607cd8.jpg" alt=comment"">
- <h1 > 桃花溪</h1>
- <p > 隐隐飞桥隔野烟, 石矶西畔问渔船. 桃花尽日随流水, 洞在清溪何处边.</p>
- </div>
- </body>
- </html>
设置标题和说明文字为绝对定位, 为了使两部分内容垂直居中, 技巧为先使其 top 设置为 50%, 既垂直方向上位于中点, 然后设置 translateY(-50%),transform 的属性设置 y 方向负偏移 50%, 向上移动其高度的 50%, 以此实现垂直方向居中.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 美女</title>
- <style>
- .description{
- width: 700px;
- height: 300px;
- margin: 0 auto;
- background: #f39c12;
- padding: 30px;
- box-sizing: border-box;
- position: relative;
- }
- .description img{
- left: 5%;
- width: 200px;
- height: 130px;
- }
- .content{
- left: 35%;
- }
- .content,img{
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- }
- h1{
- color: #fff;
- margin: 15px auto;
- font-size: 50px;
- }
- p{
- align: left;
- text-indent: 2em;
- color: rgba(255, 255, 255, 0.7);
- }
- </style>
- </head>
- <body>
- <div class="description">
- <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop=0,48,500,330;c0=baike80,5,5,80,26/sign=90b6f2f489cb39dbd58f3d16ed262510/024f78f0f736afc33443a97bbb19ebc4b7451264.jpg" alt="diaochan">
- <div class="content">
- <h1 > 四大美女. 貂蝉</h1>
- <p > 在民间传说中她原名任红昌, 是山西一村姑, 也有人认为吕布部将秦宜禄前妻杜氏 (杜秀娘) 即是貂蝉. 她为了报答义父王允的养育之恩而甘愿献身完成连环计的故事在民间广为流传.</p>
- </div>
- </div>
- </body>
- </html>
两列布局
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 布局</title>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- section{
- width:980px;
- height: 150px;
- background: #f5f5f5;
- box-shadow: 0 0 1px rgba(0,0,0,0.4) inset;
- box-sizing: border-box;
- padding: 40px;
- margin: 0 auto;
- }
- article img{
- width:134px;
- height: 80px;
- position: absolute;
- top: 40px;
- }
- article:after{
- content: "";
- display: table;
- clear: both;
- }
- article{
- width: 49%;
- float: left;
- postion: relative;
- }
- article:first-child{
- margin-right: 2%;
- }
- h1{
- font-size: 32px;
- margin-bottom: 15px;
- }
- p{
- font-size: 15px;
- color: #777;
- }
- h1,p{
- width:65%;
- margin-left: 35%;
- }
- </style>
- </head>
- <body>
- <section>
- <article>
- <h1>峨眉山月歌</h1>
- <p > 峨眉山月半轮秋, 影入平羌江水流. 夜发清溪向三峡, 思君不见下渝州.</p>
- <img src="https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh=600,800/sign=8114a6e678f082022dc799397bcbd7d5/810a19d8bc3eb1351fa5f57ead1ea8d3fc1f4490.jpg" alt="shige1">
- </article>
- <article>
- <h1>江上</h1>
- <p > 江水漾西风, 江花脱晚红. 离情被横笛, 吹过乱山东.</p>
- <img src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh=600,800/sign=b6cd7b46042442a7ae5bf5a3e1738173/9358d109b3de9c82f9c4b84a6781800a18d84355.jpg" alt="shige2">
- </article>
- </section>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 两格布局</title>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- section{
- width:980px;
- height:250px;
- margin: 0 auto;
- background-color: #f39c12;
- padding: 40px;
- box-sizing: border-box;
- }
- article img{
- width: 150px;
- height: 150px;
- border-radius: 50%;
- position: absolute;
- top: 0;
- }
- section article{
- width: 45%;
- float: left;
- padding: 2px;
- position: relative;
- }
- h1,p{
- width: 65%;
- margin-left: 37%;
- }
- h1{
- color: #fff;
- font-size: 30px;
- }
- p{
- text-indent: 2em;
- color: rgba(255, 255, 255, 0.7);
- }
- </style>
- </head>
- <body>
- <section>
- <article>
- <h1 > 四大美女. 貂蝉</h1>
- <p > 在民间传说中她原名任红昌, 是山西一村姑, 也有人认为吕布部将秦宜禄前妻杜氏 (杜秀娘) 即是貂蝉. 她为了报答义父王允的养育之恩而甘愿献身完成连环计的故事在民间广为流传.</p>
- <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop=0,48,500,330;c0=baike80,5,5,80,26/sign=90b6f2f489cb39dbd58f3d16ed262510/024f78f0f736afc33443a97bbb19ebc4b7451264.jpg" alt="diaochan">
- </article>
- <article>
- <h1 > 四大美女. 杨玉环</h1>
<p > 杨玉环天生丽质, 加上优越的教育环境, 使她具备有一定的文化修养, 性格婉顺, 精通音律, 擅歌舞, 并善弹琵琶. 在白居易的长恨歌中描述其为: 天生丽质难自弃, 一朝选在君王侧.</p>
- <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike92,5,5,92,30/sign=e862d72857fbb2fb202650402e234bc1/bd315c6034a85edf3c3d21564b540923dd547516.jpg" alt="yangyuhuan">
- </article>
- </section>
- </body>
- </html>
四个布局竖着
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 四格布局</title>
- <style>
- section{
- background-color: hotpink;
- width: 250px;
- }
- article{
- width: 250px;
- height: 250px;
- padding: 20px;
- text-align: center;
- box-sizing: border-box;
- }
- article img{
- width: 150px;
- height: 150px;
- border-radius: 50%;
- }
- h1{
- font-size: 15px;
- }
- p{
- }
- </style>
- <!-- <style>
- *{
- margin: 0;
- padding: 0;
- }
- section{
- width:980px;
- height:250px;
- margin: 0 auto;
- background-color: #f39c12;
- padding: 40px;
- box-sizing: border-box;
- }
- article img{
- width: 150px;
- height: 150px;
- border-radius: 50%;
- position: absolute;
- top: 0;
- }
- section article{
- width: 45%;
- float: left;
- padding: 2px;
- position: relative;
- }
- h1,p{
- width: 65%;
- margin-left: 37%;
- }
- h1{
- color: #fff;
- font-size: 30px;
- }
- p{
- text-indent: 2em;
- color: rgba(255, 255, 255, 0.7);
- }
- </style>-->
- </head>
- <body>
- <section>
- <article>
- <h1 > 四大美女. 貂蝉</h1>
- <p > 闭月羞花, 沉鱼落雁</p>
- <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop=0,48,500,330;c0=baike80,5,5,80,26/sign=90b6f2f489cb39dbd58f3d16ed262510/024f78f0f736afc33443a97bbb19ebc4b7451264.jpg" alt="diaochan">
- </article>
- <article>
- <h1 > 四大美女. 杨玉环</h1>
- <p > 玉环羞花, 贵妃醉酒</p>
- <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike92,5,5,92,30/sign=e862d72857fbb2fb202650402e234bc1/bd315c6034a85edf3c3d21564b540923dd547516.jpg" alt="yangyuhuan">
- </article>
- <article>
- <h1 > 四大美女. 西施</h1>
- <p > 中国古代四大美女之首</p>
- <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike116,5,5,116,38/sign=192893bc27a446236ac7ad30f94b196b/359b033b5bb5c9ea61c4ea25d239b6003bf3b3c5.jpg" alt="yangyuhuan">
- </article>
- <article>
- <h1 > 四大美女. 王昭君</h1>
- <p> 吐气如兰惹芳芬</p>
- <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike80,5,5,80,26/sign=9120971f9f504fc2b652b85784b48c74/d01373f082025aaf1a0165dcffedab64034f1af1.jpg" alt="yangyuhuan">
- </article>
- </section>
- </body>
- </html>
使用 float:left
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 四格布局</title>
- <style>
- section{
- background-color: hotpink;
- width: 500px;
- height: 550px;
- }
- article{
- width: 250px;
- height: 250px;
- padding: 20px;
- text-align: center;
- box-sizing: border-box;
- float: left;
- }
- article img{
- width: 150px;
- height: 150px;
- border-radius: 50%;
- }
- h1{
- font-size: 15px;
- }
- p{
- }
- </style>
- <!-- <style>
- *{
- margin: 0;
- padding: 0;
- }
- section{
- width:980px;
- height:250px;
- margin: 0 auto;
- background-color: #f39c12;
- padding: 40px;
- box-sizing: border-box;
- }
- article img{
- width: 150px;
- height: 150px;
- border-radius: 50%;
- position: absolute;
- top: 0;
- }
- section article{
- width: 45%;
- float: left;
- padding: 2px;
- position: relative;
- }
- h1,p{
- width: 65%;
- margin-left: 37%;
- }
- h1{
- color: #fff;
- font-size: 30px;
- }
- p{
- text-indent: 2em;
- color: rgba(255, 255, 255, 0.7);
- }
- </style>-->
- </head>
- <body>
- <section>
- <article>
- <h1 > 四大美女. 貂蝉</h1>
- <p > 闭月羞花, 沉鱼落雁</p>
- <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop=0,48,500,330;c0=baike80,5,5,80,26/sign=90b6f2f489cb39dbd58f3d16ed262510/024f78f0f736afc33443a97bbb19ebc4b7451264.jpg" alt="diaochan">
- </article>
- <article>
- <h1 > 四大美女. 杨玉环</h1>
- <p > 玉环羞花, 贵妃醉酒</p>
- <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike92,5,5,92,30/sign=e862d72857fbb2fb202650402e234bc1/bd315c6034a85edf3c3d21564b540923dd547516.jpg" alt="yangyuhuan">
- </article>
- <article>
- <h1 > 四大美女. 西施</h1>
- <p > 中国古代四大美女之首</p>
- <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike116,5,5,116,38/sign=192893bc27a446236ac7ad30f94b196b/359b033b5bb5c9ea61c4ea25d239b6003bf3b3c5.jpg" alt="yangyuhuan">
- </article>
- <article>
- <h1 > 四大美女. 王昭君</h1>
- <p> 吐气如兰惹芳芬</p>
- <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike80,5,5,80,26/sign=9120971f9f504fc2b652b85784b48c74/d01373f082025aaf1a0165dcffedab64034f1af1.jpg" alt="yangyuhuan">
- </article>
- </section>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>san 格布局优化</title>
- <style>
- section{
- background-color: hotpink;
- width: 100%;
- }
- article{
- width: 50%;
- min-height: 500px;
- padding: 20px;
- text-align: center;
- box-sizing: border-box;
- float: left;
- }
- article:nth-child(3){
- width: 100%;
- }
- article img{
- width: 150px;
- height: 150px;
- border-radius: 50%;
- }
- h1{
- font-size: 15px;
- }
- </style>
- </head>
- <body>
- <section>
- <article>
- <h1 > 四大美女. 貂蝉</h1>
- <p > 闭月羞花, 沉鱼落雁</p>
- <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop=0,48,500,330;c0=baike80,5,5,80,26/sign=90b6f2f489cb39dbd58f3d16ed262510/024f78f0f736afc33443a97bbb19ebc4b7451264.jpg" alt="diaochan">
- </article>
- <article>
- <h1 > 四大美女. 杨玉环</h1>
- <p > 玉环羞花, 贵妃醉酒</p>
- <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike92,5,5,92,30/sign=e862d72857fbb2fb202650402e234bc1/bd315c6034a85edf3c3d21564b540923dd547516.jpg" alt="yangyuhuan">
- </article>
- <article>
- <h1 > 四大美女. 西施</h1>
- <p > 中国古代四大美女之首</p>
- <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike116,5,5,116,38/sign=192893bc27a446236ac7ad30f94b196b/359b033b5bb5c9ea61c4ea25d239b6003bf3b3c5.jpg" alt="yangyuhuan">
- </article>
- </section>
- </body>
- </html>
多列其中使用了 margin: -500px. overflow:haidden 来实现特效
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 多列布局</title>
- <style>
- #container{
- width: 100%;
- overflow: hidden;
- }
- #container .col{
- width: 33%;
- padding: 20px;
- text-align: center;
- float: left;
- color:#fff;
- border:1px solid;
- background-color: red;
- box-sizing: border-box;
- padding-bottom: 500px;
- margin-bottom: -500px;
- }
- #container .col img{
- width: 30%;
- border-radius: 50%;
- margin-top: 30px;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div class="col">
- <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike116,5,5,116,38/sign=192893bc27a446236ac7ad30f94b196b/359b033b5bb5c9ea61c4ea25d239b6003bf3b3c5.jpg" alt="yangyuhuan">
- <h1 > 西施</h1>
- <p > 中国古代四大美女之首</p>
- </div>
- <div class="col">
- <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop=0,48,500,330;c0=baike80,5,5,80,26/sign=90b6f2f489cb39dbd58f3d16ed262510/024f78f0f736afc33443a97bbb19ebc4b7451264.jpg" alt="diaochan">
- <h1 > 貂蝉</h1>
- <p > 闭月羞花, 沉鱼落雁</p>
- </div>
- <div class="col">
- <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0=baike92,5,5,92,30/sign=e862d72857fbb2fb202650402e234bc1/bd315c6034a85edf3c3d21564b540923dd547516.jpg" alt="yanghuan">
- <h1 > 杨玉环</h1>
- <p > 玉环羞花, 贵妃醉酒</p>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/note/49226/de4e973f707f5636bfc2dccdc818d933.html