1 2 3 4 | <!--[if lt IE 9]> <script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/ html5.js"></script> <![endif]--> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Cross-browser HTML5 and CSS3</title> <!--[if lt IE 9]> <script type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/ html5.js"></script> <![endif]--> </head> <body> <header> <nav> <!--Navigation--> </nav> </header> <section id="intro"> <header> <h2>Cross-browser HTML5 and CSS3</h2> </header> <div>Lorem ipsum</div> </section> <section id="content"> <section id="articles"> <article> <header> <h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00"> September 4th 2009 </time></p> </header> <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div> <h2>Comments</h2> <form id="comment-form"> <input type="text" name="comment" id="comment" /> <input type="submit" value="submit" /> </form> </article> </section> <aside> <h2>About section</h2> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </aside> </section> <footer>Copyright notice</footer> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 | #content { display: table; } #articles { display: table-cell; width: 620px; padding-right: 20px; } aside { display: table-cell; width: 300px; } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |