1. Hướng dẫn tạo jQuery right click context menu
  2. Create CSS Transition Sidebar Nav
  3. Hướng dẫn sử dụng Div bằng HTML với CSS
  4. Hướng dẫn tạo Form Hổ trợ trực tuyến phần 1
  5. Hướng dẫn tạo Form đăng ký thành viên
  6. Hướng dẫn tạo Form đăng nhập hệ thống kết hợp với CSDL
  7. Hướng dẫn tạo Menu Ngang bằng CSS
  8. Hướng dẫn tạo Menu xổ bằng code CSS đơn giản
  9. Hướng dẫn tạo menu xổ bằng CSS
  10. Hướng dẫn tạo Menu xổ bằng Jquery đơn giãn
  11. JQuery CSS Image Slider
  12. Tìm kiếm bằng Ajax
  13. Sự sắp xếp chiều dọc của thẻ block trong HTML
  14. Tạo Layout đơn giản với DIV và CSS

Hướng dẫn sử dụng Div bằng HTML với CSS

min read
Tags: Html/Css

Xin chào các bạn hôm nay mình xin hướng dẫn các bạn sử dụng div để tạo bố cục cho một trang web của các bạn.

Bài viết này cũng tương đối đơn gian nên tôi cũng không giải thích nhiều cho lắm nhé các bạn.

Ở đây tôi đã chuẩn bị một layout bố cục sẵn rồi giờ chỉ còn viết code cho layout đã được vẽ trên photoshop thôi.

Dưới đây là toàn bộ code. đầu tiên các bạn tạo cho tôi một file tên gì cũng được tùy các bạn nhé rồi copy source code bên dưới vào đúng vị trí là được

Code HTML


<html>
<head>
    <meta charset="utf-8">
<title> Hướng dân sữ dụng Div</title>
<style type="text/css">

   /* source code css để ở đây */
</style>
</head>
<body>
    <!--tao backgroud cho toàn trang-->
    <div id="background">
        <div id="background_con">
            <!--header-->
            <div class="header">
                <h1>header</h1>
            </div>
            <!--end header-->
            <!--slide_bar_left-->
            <div class="slide_bar_left">
                <h2>list mục sản phẩm</h2>
            </div>
            <!--end slide_bar_left-->
            
            <!--content-->
            <div class="content">
                <h2>Nội dung của trang</h2>
            </div>
            <!--end content-->
            <!--slide_bar_right-->
            <div class="slide_bar_right">
                <h2>list mục được xem nhiều nhất</h2>
            </div>
            <!--end slide_bar_right-->
            <!--footer-->
            <div class="footer" style="text-align:center">
                <h1>copyright:nguyễn thanh hòa</h1>
            </div>
            <!--end footer-->
        </div>
    </div>
    <!--ket thuc background-->
    
</body>

</html>

 

Code CSS


*{margin: 0px;padding:0px;}
    div#background{width: 900px;margin: 0px auto;}
    div#background div#background_con{width: 900px;margin: 0px auto;}
    div#background_con div{float: left;}
    div.header{width: 900px;background: blue;height: 150px;text-align: center;line-height: 150px;}
    div.slide_bar_left{width: 250px;background: #ccc;height: 500px;}
    div.content{width: 400px;background: #686;height: 500px;}
    div.slide_bar_right{width: 250px;background: #ccc;height: 500px;}
    div.footer{width: 900px;background: #000;height: 100px;text-align: center;color: aqua;line-height: 110px;}
    

Còn đây là toàn bộ source code của file:


<html>
<head>
    <meta charset="utf-8">
<title> Hướng dân sữ dụng Div</title>
<style type="text/css">
    *{margin: 0px;padding:0px;}
    div#background{width: 900px;margin: 0px auto;}
    div#background div#background_con{width: 900px;margin: 0px auto;}
    div#background_con div{float: left;}
    div.header{width: 900px;background: blue;height: 150px;text-align: center;line-height: 150px;}
    div.slide_bar_left{width: 250px;background: #ccc;height: 500px;}
    div.content{width: 400px;background: #686;height: 500px;}
    div.slide_bar_right{width: 250px;background: #ccc;height: 500px;}
    div.footer{width: 900px;background: #000;height: 100px;text-align: center;color: aqua;line-height: 110px;}
    
</style>
</head>
<body>
    <!--tao backgroud cho toàn trang-->
    <div id="background">
        <div id="background_con">
            <!--header-->
            <div class="header">
                <h1>header</h1>
            </div>
            <!--end header-->
            <!--slide_bar_left-->
            <div class="slide_bar_left">
                <h2>list mục sản phẩm</h2>
            </div>
            <!--end slide_bar_left-->
            
            <!--content-->
            <div class="content">
                <h2>Nội dung của trang</h2>
            </div>
            <!--end content-->
            <!--slide_bar_right-->
            <div class="slide_bar_right">
                <h2>list mục được xem nhiều nhất</h2>
            </div>
            <!--end slide_bar_right-->
            <!--footer-->
            <div class="footer" style="text-align:center">
                <h1>copyright:nguyễn thanh hòa</h1>
            </div>
            <!--end footer-->
        </div>
    </div>
    <!--ket thuc background-->
    
</body>

</html>

Chúc các bạn làm thành công nhé!

Tags: Html/Css
x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)