05/04/2025

Thiết kế Giao diện cơ bản CSS và HTML

 Giao diện



Code file myCSS.css

body{
    font-size: 14px;
    color: green;
    font-family: Arial;
}
.tieu-de-tren{
    float: left;
    width: 97%;
    height: 100px;
    margin: 5px; /*K. cách bên ngoài khung*/
    padding: 5px;/*K. cách bên trong khung*/
    border: 2px solid green; /*Kẻ viền*/
    font-size: 30px;
    text-align: center;
    padding-top: 40px;
}
.menu-ngang{
    float: left;
    width: 97%;
    height: 25px;
    margin: 5px;
    padding: 5px;
    border: 2px solid green;
    background:#a6160c;
    color: white;
}
/*Định dạng Thẻ <a> trong .menu-ngang*/
.menu-ngang a{
    color: gold;
}
.menu-trai{
    float: left;
    width: 15%;
    height: 300px;
    margin: 5px;
    padding: 5px;
    border: 2px solid green;
}
.noi-dung{
    float: left;
    width: 78%;
    height: 300px;
    margin: 5px;
    padding: 5px;
    border: 2px solid green;
}
.tieu-de-duoi{
    float: left;
    width: 97%;
    height: 50px;
    margin: 5px; /*K. cách bên ngoài khung*/
    padding: 5px;/*K. cách bên trong khung*/
    border: 2px solid green; /*Kẻ viền*/
    text-align: center;
    padding-top: 20px;
}


Code file index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Trang chủ</title>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="myCSS.css"/>
    </head>
    <body>
        <div class="tieu-de-tren">
          <span><img src="hinh/LEGO_logo.svg.png" width="70px" height="70px"/> </span>  
          <span style="color: red;">Shop Điện máy VẠN GIÃ</span>
        </div>
        <div class="menu-ngang">
            <span><a href="index.html">Trang chủ</a> |</span>
            <span><a href="gioi-thieu.html">Giới thiệu</a> |</span>
            <span><a href="lien-he.html">Liên hệ</a> |</span>
            <span><a href="san-pham.html">Sản phẩm</a> |</span>
        </div>
        <div class="menu-trai">
            <p>SẢN PHẨM</p>
            <ul>
                <li><a href="ti-vi.html">Ti vi</a></li>
                <li><a href="tu-lanh.html">Tủ lạnh</a></li>
                <li><a href="may-tinh.html">Máy tính</a></li>
            </ul>
        </div>
        <div class="noi-dung">
            <h3>HIỂN THỊ NỘI DUNG</h3>
        </div>
        <div class="tieu-de-duoi">
            <span>Copyright: Nguyễn Văn Anh </span>  
        </div>
    </body>
</html>


Liên hệ

Tên

Email *

Thông báo *