页面布局 --- 格子布局

来源：互联网发布：淘宝账号注销不了编辑：程序博客网时间：2024/05/16 04:52

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Example</title> <style type="text/css"> body { background:#FFF; margin:50px; font-family:sans-serif; } section{ width:100%; min-width:500px; } article{ box-sizing:border-box; width:50%; padding:20px; text-align:center; float:left; border-bottom:1px solid rgba(0,0,0,.2); border-right:1px solid rgba(0,0,0,.2); } section{ border-top:1px solid rgba(0,0,0,.2); border-left:1px solid rgba(0,0,0,.2); } section::after{ content:""; display:table; clear:both; } article h1{ font-size:32px; margin:10px 0; color:#666; } article p{ font-size:15px; margin-bottom:0 0 10px; color:#999; } article:nth-child(3){ width:100%; } </style> </head> <body> <section> <article> <h1>Ulysses</h1> <p>Soaring through the galaxies</p> <img src="pic1.png"alt="image of Ulysses"> </article> <article> <h1>Dallas</h1> <p>Rollin' down to Dallas</p> <img src="pic2.png"alt="image of Dallas"> </article> <article> <h1>McKay</h1> <p>McKay and his best friend</p> <img src="pic3.png"alt="image of McKay"> </article> </section> </body> </html>

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Example</title> <style type="text/css"> body { background:#FFF; margin:50px; font-family:sans-serif; } section{ width:100%; min-width:500px; } article{ box-sizing:border-box; width:50%; padding:20px; text-align:center; float:left; border-bottom:1px solid rgba(0,0,0,.2); border-right:1px solid rgba(0,0,0,.2); } section{ border-top:1px solid rgba(0,0,0,.2); border-left:1px solid rgba(0,0,0,.2); } section::after{ content:""; display:table; clear:both; } article h1{ font-size:32px; margin:10px 0; color:#666; } article p{ font-size:15px; margin-bottom:0 0 10px; color:#999; } article{ height:270px; } article:nth-child(2){ height:540px; padding-top:150px; } article:nth-child(3){ margin-top:-270px; } </style> </head> <body> <section> <article> <h1>Ulysses</h1> <p>Soaring through the galaxies</p> <img src="pic1.png"alt="image of Ulysses"> </article> <article> <h1>Dallas</h1> <p>Rollin' down to Dallas</p> <img src="pic2.png"alt="image of Dallas"> </article> <article> <h1>McKay</h1> <p>McKay and his best friend</p> <img src="pic3.png"alt="image of McKay"> </article> </section> </body> </html>

阅读全文

0 0