 | 歪星人ˊˇˋ |
|
<!Doctype html> <html leng="en"> <head> <title>A-LIEN's Page Title</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <header> <h1>HTML 5 Tutorial Sample </h1> </header> <nav> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">About</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</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</a> </li> <li> <a href="#">Feedback</a> </li> <li> <a href="#">Contact</a> </li> </ul> </section> </aside> </div> <footer> <section> Copyright FGISC's A-LIEN 2013. </section> </footer> </body> </html> |
| 回應: 歪星人ˊˇˋ |
|
<style type="text/scc"> *{ margin:0; padding:0; } body { margin:0 auto; width:960px; font-family:Arial, Helvetica, sans-serif; color:#73B7FF; background: url(http://summer2013.usr.sh/image/fgisc_icon.jpg) bottom right no-repeat; } a { color:#73B7FF; text-shadow:2px 1px 2px #AFD6FF; } p { text-align:justify; } header, footer, aside, section { display:block; } h1 { font-size:20px; line-height:30px; padding:15px 0; color:#007AFA; } nav { width:24%; height:40px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background:#FFFFFF; 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:#A1C7EF; border-top:1px solid #cccccc; padding:10px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-radius:5px; text-align:center; color:#ffffff; } </style> |
