Index mang mong cách Windows Classic[✔]

by **ilpc** 13/7/2014, 4:36 pm

E mới học được một ít html và css qua mạng. đây là tác phẩm đầu tay. mọi người cho nhận xét về cách viết, cách dùng bộ chọn, cách bố trí, có thể xảy ra lỗi gì, khuyết điểm? Vui

demo copy vào trang này để xem: http://jsbin.com/

Code:: <!DOCTYPE HTML>  <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="ILPC" /> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/index.css"/> <title>title</title> <style type="text/css"> * { padding: 0; margin: 0; } body { color: white; background-color: #0000CC } #main { width: 1000px; height: 650px; margin: 20px auto; border: 1px solid black; background-color: #404040; } #top { width: 990px; height: 50px; border: 1px solid black; margin: 5px auto; background-color: #606060; } #top ul { list-style: none; text-align: center; margin: 10px; } #top ul li { display: inline; padding-left: 50px; } #top ul li a:hover { color: red; } #top ul li a{ font-weight: bold; } #body-1 { width: 78%; height: auto; border: 1px solid black; margin-left: 5px; float: left; background-color: #606060 ; } #body-1 a{ width: 500px; display: block; margin: 5px auto; color: white; border: 1px solid blue; } .center { text-align: center; } #body-1 a:hover { background-color: #404040; } #body-2 { width: 20%; height: auto; border: 1px solid black; margin-left: 5px; margin-right: 5px; float: right; background-color: #606060; } #bottom { width: 1000px; height: 50px; border: 1px solid black; margin: 0px auto; float: none; background-color: #404040; } p.bottom-link { display:inline; } #bottom-nav { float: right; margin-right: 5px; height: 40px; } #copyright { text-align: center; } a { text-decoration: none; color: white; } a:visited { color: white; } a:active { color: blue; } </style> </head> <body> <div id="main"> <div id="top"> <ul> <li><a href="#">MENU 1</a></li> <li><a href="#">MENU 2</a></li> <li><a href="#">MENU 3</a></li> <li><a href="#">MENU 4</a></li> <li><a href="#">MENU 5</a></li> </ul> </div> <div id="body-1"> <p style="background-color: blue; text-align: center;">SUB-MENU 1</p> <div class="center"> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> </div> <p style="background-color: blue; text-align: center;">SUB-MENU 2</p> <div class="center"> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> </div> <p style="background-color: blue; text-align: center;">SUB-MENU 3</p> <div class="center"> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> </div> </div> <div id="body-2"> <p style="background-color: blue; text-align: center;display: block;">SUB-MENU 4</p> <div class="center"> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> <a href="#">Content</a> </div> </div> </div> <div id="bottom"> <div id="bottom-nav"> <a href="#">Trang chủ</a><p class="bottom-link"> |</p> <a href="#">Diễn đàn</a><p class="bottom-link"> |</p> <a href="#">Đăng kí</a><p class="bottom-link"> |</p> <a href="#">Đăng nhập</a> </div> <div id="copyright"> <p style="font-size: small;">Content Content Content Content Content Content Content Content Content Content Content Content Content<br />Copyright 2014 by ...</p> </div> </div> </body> </html>

by **handsomevip007** 13/7/2014, 5:22 pm

Về cấu trúc thì ổn do nó đơn giản. Về màu sắc thì đúng là nó mang phong cách Windows Classic. Về CSS thì quá đầy đủ chính xác và chi tiết. Túm gọn lại là của bạn rất bài bản. Để tập tành, học code thì được chứ đem đi ứng dụng thì không ổn lắm. Chúc bạn học tốt! ngại quá