Viết 1 layout đơn giản bằng CSS
dưới đây là 1 layout thông thường được viết bằng CSS các bạn có thể tham khảo cách viết này cho những ai mới bắt đầu.
code CSS
<style type="text/css"> body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#f0f0f0; word-wrap:break-word;} #header {background:#a31e39;} #outer1 {float:left; width:20%; background:#e0d0d0;} #outer2 {float:left; width:60%; background:#c0c0c0;} #outer3 {float:right; width:20%; background:#b0b0b0;} #outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;} #wrapper {overflow:hidden; background:#c0c0c0;} #footer {clear:both; background:#455c5a;} h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;} h3 {font-size:18px; margin:0; padding:8px 0;} .content {padding:10px;} p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0;} #footer p, #header p {color:#fff;} #footer a {color:#fff;} #footer a:hover {text-decoration:none;} </style> <!--[if lte IE 7]> <style type="text/css"> body {word-wrap:break-word;} #outer2 {float:left; width:59.8%; background:#c0c0c0;} /* for IE6 */ * html #wrapper {display:inline-block;} </style> <![endif]-->
Phần html
</head> <body> <div id="header"> <div class="content"> <h1>CSS play - SIMPLE Flexible Layout - 3 columns all percentage widths</h1> <p>Resize you browser window and watch it stay in shape. NO graphics have been used in this demonstration (except for the 'Donate' button).</p> </div> </div> <!-- end header --> <div id="wrapper"> <div id="outer1"> <div class="content"> <h3>Left 20%</h3> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p> <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p> </div> <!-- end content --> </div> <div id="outer2"> <div class="content"> <h3>Center 60%</h3> <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p> <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p> </div> <!-- end content --> </div> <!-- end outer2 --> <div id="outer3"> <div class="content"> <h3>Right 20%</h3> <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p> <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p> <p>All three columns will end at the footer.</p> </div> <!-- end content --> </div> <!-- end outer2 --> </div><!-- end #wrapper --> <div id="footer"> <div class="content"> <p>Copyright ©2009 stu nicholls - cssplay.co.uk | <a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Flexible%203Cols" accesskey="C" title="Comments for this Layout">comments on these layouts</a></p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <div> <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="2928152" /> <input type="image" src="http://www.cssplay.co.uk/graphic/paypal.png" name="submit" alt="" /> <img alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" /> </div> </form> </div> </div> <!-- end footer --> </body> </html>
Demo : http://www.cssplay.co.uk/layouts/flexible-3column.html
Nguồn Cssplay