Thành viên:Tuantran1985
Một số hướng dẫn ngắn các thủ thuật 1. Tạo menu ngang - CSS và HTML Code:
Sau khi ta viết mã HTML vào file menungang.html bạn ra ngoài chạy thử thì sẽ chưa thấy xuất hiện hình dạng một thanh menu ngang . Nên chúng ta sẽ viết một file CSS riêng bên ngoài rồi các bạn dẫn nó vào file HTML hoặc các bạn có thể viết trực tiếp trong phần thẻ <head> của file HTML. Còn mình thì sẽ tạo một file stylemenu.css và viết các lệnh CSS ở đó rồi dẫn nó vào file HTML cho nó chuyên nghiệp. Bên dưới là code CSS.
- menungang ul{
list-style-type:none; padding:0px; margin:0px; }
- menungang ul li{
display:inline; }
- menungang ul a{
text-decoration:none; width:129px; float:left; background:#000; color:#fff; font-weight:bold; text-align:center; line-height:35px; border-left:1px solid #fff;
}
2. Tạo menu ngang đa cấp:
Code html trong trang chủ.
<html> <head> <title>Tạo menu ngang đa cấp</title> <link rel="stylesheet" href="style.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body>
</body> </html>
Code trong trang CSS:
*{ margin: 0px; padding: 0px;}
li{ list-style: none;} a{text-decoration: none;color: #FFF;font-size: 16px;} .thietke{ thietke: both;} .wrapper{ width: 960px; height: 500px; background: #F8F8F8; margin: 0px auto; } .menu_chinh{ background: #00A69B; margin-top: 30px;} .menu_chinh>ul>li{ float: left;padding: 11px 27px; position: relative; border-right: 1px dotted #ACACAC;} .menu_chinh>ul>li:last-child{ border-right: none;} .menu_chinh>ul>li>ul{ display: none; position: absolute; background: #00A69B;top: 41px;width: 198px; left: 0px;} .menu_chinh>ul>li:hover ul{ display: block;} .menu_chinh ul li:hover{ background: #5F5C5C; transition: all 0.25s;} .menu_chinh>ul>li>ul>li{ padding: 5px 10px;} .menu_chinh>ul>li>ul>li{ border-bottom: 1px dotted #ACACAC;}
3. Tạo menu dọc đa cấp 1 Code của trang html:
Danh mục sản phẩm
- <a href="#">Lap top</a>
- <a href="#">Desktop</a>
- <a href="#">Mobile phone </a>
- <a href="#">Tai phone</a>
- <a href="#">USB</a>
- <a href="#">Loa</a>
- <a href="#">Cáp</a>
- <a href="#">Màn hình </a>
- <a href="#">Website</a>
- <a href="#">UPS</a>
- <a href="#"> Bàn phím</a>
Code trang CSS:
- left{
width:165px; }
- left h1{
background:#99CC00; color:#FFFFFF; font-size:14px; text-align:center; }
- left ul{
list-style-type:none; margin:0px; padding:0px; }
- left ul a{
text-decoration:none; line-height:25px; color:#333333; background:#EEEEEE; display:block; width:150px; border-top:1px solid #FFFFFF; border-bottom:1px solid #CCCCCC; padding-left:15px; }
- left ul a:hover{
background:#FFCC99; }