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>