 | Anny |
|
<! DOCTYPE html> <html lang ="en"> <head> <title> Anny's Page Title </title> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head> <body> <header> <h1> HTML 5 Tutotial Sample </h1> </header> <nav> <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About Us</a> </li> <li> <a href="#"> Feedback </a> </li> <li> <a href="#"> Contact </a> </li> </ul> </nav> <div id = "content " > <div id = "mcontent " > <section> <!-- Defining content section article --> <article class="bpage"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. Phasellus vitae tellus orci, at elementum ipsum. In in quam eget diam adipiscing condimentum. Maecenas gravida diam vitae nisi convallis vulputate quis sit amet nibh. Nullam ut velit tortor. Curabitur ut elit id nisl volutpat consectetur ac ac lorem. Quisque non elit et elit lacinia lobortis nec a velit. Sed ac nisl sed enim consequat porttitor.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. Phasellus vitae tellus orci, at elementum ipsum. In in quam eget diam adipiscing condimentum. Maecenas gravida diam vitae nisi convallis vulputate quis sit amet nibh. Nullam ut velit tortor. Curabitur ut elit id nisl volutpat consectetur ac ac lorem. Quisque non elit et elit lacinia lobortis nec a velit. Sed ac nisl sed enim consequat porttitor.</p> </div> </article> </section> </div> <aside> <section> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Contact</a></li> </ul> </section> <section> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Contact</a></li> </ul> </section> </aside> </div> <footer> <section> Copyright TFG 2013. </section> </footer> </body> </html> |
| 回應: Anny |
|
<style type="text/css"> * { margin:0; padding:0; } body { margin:0 auto; width:960px; font-family:Arial, Helvetica, sans-serif; background:url(http://bgimages.kontraband.com/media/images/bg_body.jpg) top left no-repeat; } a {color:#000000; text-shadow:1px 1px 1px #cccccc;} p {text-align:justify;} header, footer, aside, section {display:block;} h1 { font-size:26px; line-height:40px; padding:18px 0; } nav { width:77%; height:40px; -moz-border-radius:10px; -webkit-border-radius:10px; background:#f3f3f3; border:1px solid #cccccc; position:absolute; } nav ul { list-style-image:none; list-style-position:outside; list-style-type:none; margin:0 auto; width:940px; } nav ul li { float:left; } nav ul li a{ margin-right:20px; display:block; line-height:40px; } #content { display:table; margin-top:40px; } #mcontent { display:table-cell; padding-right:22px; width:620px; } aside { display:table-cell; width:300px; background:#f3f3f3; } .bpage div { -webkit-column-count:2; -moz-column-count:2; -moz-column-gap:22px; -webkit-coulmn-gap:22px; } aside section { -moz-border-radius:11px; -webkit-border-radius:11px; background:#e0e0e0; margin:22px 0 0 22px; padding:11px 22px; width:50%; } .image {margin:6px auto; -moz-border-radius:10px; -webkit-border-radius:10px; background:url(test.jpg); height:250px; width:600px; } footer{background:#666666; border-top:1px solid #cccccc; padding:10px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; text-align:center; color:#ffffff; } </style> |
