Viết 1 layout đơn giản bằng CSS

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

HTML Code:
<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

HTML Code:
</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 &copy;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

Post a comment or leave a trackback: Trackback URL.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: