Sharing & Linking: [Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 6

MỤC TIÊU:

Kết thúc bài này bạn có khả năng:

Thiết kết được layour cho web
Tổ chức được website với iframe

THỰC HIỆN

Bài 1:
Thiết kết layout thô 1

css
html
Layout

Tạo thư mục CSS và lưu file css với tên css/lab6.1.layout.css

body{ /* bỏ lề và khoảng đệm xung quanh trang */
    padding: 0px;
    margin: 0px;
}
.container{
    max-width: 1260px; /* rộng tối đa */
    height: 900px;
    background-color: green;
    margin: 0 auto; /* căn giữa */
}
header{
    background-color: red;
    width: 100%;
    height: 300px;
    
}
nav{
    background-color: yellow;
    width: 100%;
    height: 50px;
}
article{
    background-color: gray;
    width: 75%;
    min-height: 400px;
    float: left; /* thả nổi trái*/
}
aside{
    background-color: orange;
    width: 25%;
    min-height: 400px;
    float: right; /* thả nổi phải*/
}
footer{
    background-color:pink;
    width: 100%;
    height: calc(100% - 300px - 50px - 400px ) ;
    clear: both; /* bỏ thả nổi */
}

Link tới file css/lab6.1.layout.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 6 | Bài 1 - Layout </title>
    <link rel="stylesheet" href="css/lab6.1.layout.css">
</head>
<body>
   <div class="container">
        <header></header>
        <nav></nav>
        <article></article>
        <aside></aside>
        <footer></footer>

   </div> 
   
</body>
</html>

Kết quả

Thiết kết layout thô 2

css
html
Layout

Tạo thư mục CSS và lưu file css với tên css/lab6.1.layout2.css

body{ /* bỏ lề và khoảng đệm xung quanh trang */
    padding: 0px;
    margin: 0px;
}
.container{
    max-width: 1260px; /* rộng tối đa */
    height: 900px;
    background-color: green;
    margin: 0 auto; /* căn giữa */
}
header{
    background-color: red;
    width: 100%;
    height: 300px;
    
}

nav{
    background-color: yellow;
    width: 100%;
    height: 50px;
}

asideright{
    background-color: orange;
    width: 30%;
    min-height: 400px;
    float: right; /* thả nổi phải*/
}

asideleft{
    background-color: yellowgreen;
    width: 20%;
    min-height: 400px;
    float: left; 
}

article{
    background-color: gray;
    /* width: 75%; */
    width: 50%;
    min-height: 400px;
    margin-left: 20%; /* bằng độ rộng của left */
    /* margin: 0 auto;  */
}

footer{
    background-color:pink;
    width: 100%;
    height: calc(100% - 300px - 50px - 400px ) ;
    clear: both; /* bỏ thả nổi */
}

Link tới file css/lab6.1.layout2.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 6 | Bài 1 - Layout (vck) </title>
    <link rel="stylesheet" href="css/lab6.1.layout2.css">
</head>
<body>
   <div class="container">
        <header></header>
        <nav></nav>
        <asideright></asideright>
        <asideleft></asideleft>
        <article></article>
        <footer></footer>

   </div> 
   
</body>
</html>

Kết quả

Thiết kế theo yêu cầu:

css
html
Kết quả

Tạo thư mục CSS và lưu file css với tên css/lab6.1.css

body{ /* bỏ lề và khoảng đệm xung quanh trang */
    padding: 0px;
    margin: 0px;
}
.container{
    max-width: 1260px; /* rộng tối đa */
    height: 900px;
    background-color: green;
    margin: 0 auto; /* căn giữa */
}
header{
    background-color: red;
    width: 100%;
    height: 300px;
    
}
nav{
   
    width: 100%;
    height: 50px;

    background-color:  #006666;
    line-height: 40px;
    color: white;
    text-align: center;
    font-variant: small-caps;

}
nav a{
    color: white;
    text-decoration: none;
    line-height: 50px;
    margin: 0 10px;
}
nav a:hover{ /* Hiệu ứng rê chuột */
    color: yellowgreen;
    text-decoration: underline;
    font-weight: bold;
}

article{
    background-color:gainsboro;
    width: 75%;
    min-height: 400px;
    float: left; /* thả nổi trái*/
}
aside{
    background-color:  #001111;
    width: 25%;
    min-height: 400px;
    float: right; /* thả nổi phải*/
}
aside a{
    text-decoration: none;
    color: #006666;
    
}
aside a:hover{
    text-decoration: underline;
    color: #00cc99;
}
footer{
    border-top: 5px, double darkgreen;
    background-color:  #001111;
    width: 100%;
    height: calc(100% - 300px - 50px - 400px ) ;
    clear: both; /* bỏ thả nổi */
    text-align: center;
    line-height: 150px  ;
    font-size: 30px;
    color: #006666;
}

Tạo thư mục img và lưu hình ảnh muốn làm banner.png vào trong thư mục này (nên điều chỉnh kích thước hình ảnh bằng kích thước của header) Tạo file html và link đến file css/lab6.1.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 6 | Bài 1 - Layout </title>
    <link rel="stylesheet" href="css/lab6.1.css">
</head>
<body>
   <div class="container">
        <header>
            <img src="img/banner.png" alt=""> <!-- nên chỉnh kích thước hình bằng kích header trước khi chèn  --> 
        </header>
        <nav>
            <a href="#">Trang chủ</a> |
            <a href="#">Giới thiệu</a> |
            <a href="#">Liên hệ</a> |
            <a href="#">Góp ý</a> |
            <a href="#">Hỏi đáp</a>
        </nav>
        <article></article>
        <aside>
            <ul>
                <li>
                    <a href="">Máy tính xách tay</a>
                </li>
                <li>
                    <a href="">Điện thoại di động</a>
                </li>
                <li>
                    <a href="">Máy quay phim</a>
                </li>
                <li>
                    <a href="">Máy chụp ảnh</a>
                </li>
            </ul>
        </aside>
        <footer>
            Khanhvc | Tìm hiểu HTML
        </footer>

   </div> 
   
</body>
</html>

Kết quả cuối cùng

Bài 2:

css
html
Kết quả

Tạo file css có tên: ccss/lab6.1.css

body{ /* bỏ lề và khoảng đệm xung quanh trang */
    padding: 0px;
    margin: 0px;
}
.container{
    max-width: 1260px; /* rộng tối đa */
    height: 900px;
    background-color: green;
    margin: 0 auto; /* căn giữa */
}
header{
    background-color: red;
    width: 100%;
    height: 300px;
    
}
nav{
   
    width: 100%;
    height: 50px;

    background-color:  #006666;
    line-height: 40px;
    color: white;
    text-align: center;
    font-variant: small-caps;

}
nav a{
    color: white;
    text-decoration: none;
    line-height: 50px;
    margin: 0 10px;
}
nav a:hover{ /* Hiệu ứng rê chuột */
    color: yellowgreen;
    text-decoration: underline;
    font-weight: bold;
}

article{
    background-color:gainsboro;
    width: 75%;
    min-height: 400px;
    float: left; /* thả nổi trái*/
}
aside{
    background-color:  #001111;
    width: 25%;
    min-height: 400px;
    float: right; /* thả nổi phải*/
}
aside a{
    text-decoration: none;
    color: #006666;
    
}
aside a:hover{
    text-decoration: underline;
    color: #00cc99;
}
footer{
    /* border-top: 5px, double darkgreen; */
    background-color:  #001111;
    width: 100%;
    height: calc(100% - 300px - 50px - 400px ) ;
    clear: both; /* bỏ thả nổi */
    text-align: center;
    line-height: 150px  ;
    font-size: 30px;
    color: #006666;
}
iframe[name=page]{
    width: 100%;
    min-height: 400px - 5px;
    
}

Trang html link đến css/lab6.1.css Tạo các trang httm, dùng thẻ a để lên đến các trang này.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 6 | Bài 1 - Layout </title>
    <link rel="stylesheet" href="css/lab6.1.css">
</head>
<body>
   <div class="container">
        <header>
            <img src="img/banner.png" alt=""> <!-- nên chỉnh kích thước hình bằng kích header trước khi chèn  --> 
        </header>
        <nav>
            <a href="trangchu.html" target="page">Trang chủ</a> |
            <a href="gioithieu.html" target="page">Giới thiệu</a> |
            <a href="#" target="page">Liên hệ</a> |
            <a href="#">Góp ý</a> |
            <a href="#">Hỏi đáp</a>
        </nav>
        <article>
            <iframe name="page" src="trangchu.html" frameborder="0"></iframe>
            
        </article>
        <aside>
            <ul>
                <li>
                    <a href="">Máy tính xách tay</a>
                </li>
                <li>
                    <a href="">Điện thoại di động</a>
                </li>
                <li>
                    <a href="">Máy quay phim</a>
                </li>
                <li>
                    <a href="">Máy chụp ảnh</a>
                </li>
            </ul>
        </aside>
        <footer>
            Khanhvc | Tìm hiểu HTML
        </footer>

   </div> 
   
</body>
</html>

Kết quả cuối cùng

Xong!

Sharing & Linking

Pages

[Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 6 - Thiết Kế Layout

Để có những bài viết tốt hơn, hãy cho chúng tôi bình luận của bạn về bài viết này. Cám ơn các bạn!

No comments:

Post a Comment