B7: Tự tạo teamplate khung website bằng css căn bản

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 7/1/16.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,907
    Đã được thích:
    1,200
    Điểm thành tích:
    113
    Giới tính:
    Nam
    B7: Tự tạo teamplate khung website bằng css căn bản​

    Thuộc tính học được từ bài:
    • Tạo bộ ID cho các thuộc tính thẻ div thứ tự theo:
      • #wrapper //thẻ bao bọc toàn bộ web
      • #header // thẻ bao bọc toàn bộ đầu web
      • #menu // danh sách menu
      • #left // bao bọc nội dung bên trái
      • #main // bao bọc nội dung web
      • #footer // bao bọc cuối web
    • Thuộc tính css cần nhớ:
      • opacity:1;// giảm độ mở của hình ảnh, text xuống, thường dùng cho thẻ a khi rê chuột vào.
      • clear:both; // bỏ tất cả các thuộc tính float: left, righ của thẻ đang phải chịu từ các thẻ cha.
      • text-align:center; // canh chữ, hình ở giữa.
      • Thẻ UL : list-style-type:none; // bỏ các ký tự ở đầu không cần thiết.
    • Thẻ UL :
      • list-style-type: upper-latin; // thay đổi ký tự đầu của thẻ UL bằng ký tự khác.
      • list-style-image: url(đường dẫn hình ảnh); // đổi các ký tự đầu thẻ UL bằng hình như ý.
      • list-style-position: outside; // định vị trí
    Demo online trực tếp khung teampalte web : tạo khung tempalte web.

    Code:
    HTML:
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>B7: Tự tạo teamplate khung website bằng css căn bản</title>
<meta content="B7: Tự tạo teamplate khung website bằng css căn bản, B7: Tự tạo teamplate khung website bằng css căn bản, B7: Tự tạo teamplate khung website bằng css căn bản" name="description" />
<style type="text/css">
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    }
#wrapper {
    width: 1000px;
    margin:auto;

} 
#header {
    height: 100px;
    background-color: #666;
}
#menu {
    height: 60px;
    background-color: #F00;
    margin-top:10px;
}
#left {
    min-height: 500px;
    background-color: #0F0;
    float:left;
    width:200px;
    margin-top:10px;
}
#main {
    min-height: 300px;
    background-color:#CCC;
    float:left;
    width:580px;
    padding:10px;
    margin:10px;
}
ul {
    list-style-type:none;
}
li {
    float:left;
    padding:20px 60px; 
}
li:last-child
{
    padding-bottom:5px;
}

a {
    text-decoration:none;
}
a:hover
{
  color:yellow;
  text-decoration:underline;
}
a:active
{
    font-weight:bold;
    text-decoration:overline;
    color:#0FF;
}
#right {
    min-height: 400px;
    background-color: #FF0;
    float:right;
    width:200px;
    margin-top:10px;
}
#footer {
    height: 80px;
    background-color:#F0F;
    clear:both; 
}
img{
    float:left;
    opacity:0.5;
    margin:10px;
}
img:hover
{
    opacity:1;
    width:100px;
    height:300px;
}
</style>
</head>

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="menu">
        <ul>
            <li><a href="#">Trang chủ</a></li>
            <li><a href="#">Giới thiệu</a></li>
            <li><a href="#">Sản phẩm</a></li>
            <li><a href="#">Giỏ hàng</a></li>
            <li><a href="#">Liên hệ</a></li>
        </ul>
    </div>
    <div id="left"></div>
    <div id="main">
    <h1>B7: Tự tạo teamplate khung website bằng css căn bản</h1>
    <img src="images/1.jpg" alt="images">
    ASP.NET là một ngôn ngữ để lập trình website hoặc còn được gọi là một nền tảng ứng dụng web(web application framework),
    Ngôn ngữ ASP.NET được phát triển và cung cấp bởi Microsoft, ngôn ngữ này cho phép những người lập trình tạo ra những trang web động, ứng dụng web và những dịch vụ web.
    ASP.NET lần đầu tiên được đưa ra thị trường vào tháng 2 năm 2002 và đi theo nó là phiên bản .NET framework 1.0, là công nghệ nối tiếp của Microsoft's Active Server Pages(ASP).
    Ngôn ngữ ASP.NET được biên dịch dưới dạng Common Language Runtime (CLR), cho phép những người lập trình viết mã ASP.NET với bất kỳ ngôn ngữ nào được hỗ trợ bởi .NET frameword.
    Ngôn ngữ ASP.NET ngày càng phát triển và đi theo nó là các bản .NET frameword 1.0, 2.0, 3.0, 3.5, 4.0, 4.5 và càng ngày càng nâng cao.
    </div>
    <div id="right"></div>
    <div id="footer" style="text-align:center;"><h1>Footer</h1></div>
</div>
</body>
</html>
     
    Cảm ơn đã xem bài:

    B7: Tự tạo teamplate khung website bằng css căn bản

    Chỉnh sửa cuối: 7/1/16
    admin, 7/1/16
    #1


Chủ để tương tự : Tự tạo
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Xin Javascript setting cài đặt của cube portfolio để tùy biến trường default value 22/10/22
Ngôn ngữ lập trình CSS, HTML, HTML5 Xin kích thước tất cả các size của youtube video channel? 23/11/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap 13/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Tắt tự động chạy slider Stop Autoplay Bootstrap Carousel slider như thế nào 7/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Các ký tự đặc biệt trong html và html5 23/1/16