Html5代码
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <link href="css/style.css" type="text/css" rel="stylesheet">
- <title>New Html</title>
- </head>
- <body>
- <header><h1>This Is Header</h1></header>
- <nav><h1>This Is Nav</h1></nav>
- <div id="center">
- <article>
- <h1>This Is Article</h1>
- <section><h1>This Is Section</h1></section>
- </article>
- <aside><h1>This Is Aside</h1></aside>
- </div>
- <footer><h1>This Is Footer</h1></footer>
- </body>
- </html>
Css代码
- @charset "utf-8";
- /* CSS Document */
- /*-- Reset --*/
- html, body, div, span, applet, object, iframe, h1, h2, h3, h4, img, ol, ul, p {
- border: 0 none;
- margin: 0;
- padding: 0;
- }
- ul li{
- list-style: none outside none;
- }
- a,a:link{
- text-decoration: none;
- }
- .clear{
- clear: both;
- }
- :focus {
- outline: 0 none;
- }
- h1{
- font:normal bold 1.875rem/3.43rem "Times New Roman", Times, serif;
- color:#FFF;
- text-align:center;
- letter-spacing:0.3rem;
- line-height:3.43rem;
- }
- body{
- background:#f2f2f2;
- width: 100%;
- height:100vh;
- }
- header,nav,article,aside,footer{
- background:#595959;
- border-radius:.5rem;
- -webkit-border-radius:.5rem;
- -moz-border-radius:.5rem;
- }
- header,nav,footer{
- width:97%;
- height:3.43rem;
- margin:0.75rem auto 0;
- }
- #center{
- width:97%;
- margin:0.75em auto 0;
- display:table;
- clear:both;
- }
- article{
- width:62%;
- height:33rem;
- float:left;
- }
- section{
- width:97%;
- height:28.8rem;
- background:#3b3b3b;
- border-radius:.5rem;
- -webkit-border-radius:.5rem;
- -moz-border-radius:.5rem;
- margin:0 auto;
- }
- aside{
- width:37.2%;
- height:33rem;
- margin-right:0;
- float:rightright;
- }
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助