Thiết kế web - Tạo menu xổ
Việc đầu tiên cho thiết kế website là tạo ra một menu chuyên nghiệp với hiệu ứng màu và động bắt mắt sẽ làm khả dụng khung nhìn nhiều hơn. Với điều đó, nay chúng ta cùng nghiên cứu cách thiết kế một web với CSS.
Trước hết chúng ta hãy cùng tổng quát lại kiến thức với và thuộc tính của CSS nhé!
| Tên thuộc tính | Ví dụ | Giải thích |
|---|---|---|
| :hover | li: hover{ color: red; background-color: blue;} | Xác định thẻ li được hover, thì những đoạn text nó chứa sẽ có màu đỏ, và background màu xanh dương. |
| #menu | #menu{ padding:5px;position: relative;} <ul id="menu"> ..... | Xác định thể ul có id là menu sẽ có khoảng không padđing là 5px và có vị trí là tương đối. |
| #menu li a | #menu li a{ color:white; text-decoration: none;} | Xác định thẻ a là phần tử nằm trong thẻ li theo thứ tự #menu li a . Nếu đúng thứ tụ như thế thì thẻ a sẽ có text là màu trắng và không có gạch đích. |
Bây giờ chúng ta bắt đầu bắt tay vào làm nhá:
Demo
<style type="text/css">
#wrap{margin:0 auto;
position:relative;}
#menu{
padding:5px;
display:block;
}
#menu li,#menu li a, #sub li a{
display:block;
text-align:center;
background-color:#C90;
color:#FFF;
}
#menu li{
float:left;
list-style:none;
height:30px;
width:80px;
padding:0px;
}
#menu li a, #sub li a{
text-decoration:none;
padding:5px;
}
#sub li{
clear:both;
border:thin #FFF solid;
margin-top:0px;
}
#menu #sub{
visibility:hidden;
padding:0px;
display:block;
}
#menu li:hover #sub{
visibility:visible;
}
#menu li:hover a {
background-color:rgba(51,0,0,0.5);
}
#menu li:hover #sub li a{
background:#C90;
}
#menu li #sub li:hover a{
background:rgba(51,0,0,0.5);
}
</style>
....
<div id="wrap">
<ul id="menu">
<li><a href="#">aa</a>
<ul id="sub">
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
</ul>
</li>
<li><a href="#">bb</a></li>
<li><a href="#">cc</a></li>
<li><a href="#">dd</a></li>
<li><a href="#">ee</a></li>
</ul>
</div>
#wrap{margin:0 auto;
position:relative;}
#menu{
padding:5px;
display:block;
}
#menu li,#menu li a, #sub li a{
display:block;
text-align:center;
background-color:#C90;
color:#FFF;
}
#menu li{
float:left;
list-style:none;
height:30px;
width:80px;
padding:0px;
}
#menu li a, #sub li a{
text-decoration:none;
padding:5px;
}
#sub li{
clear:both;
border:thin #FFF solid;
margin-top:0px;
}
#menu #sub{
visibility:hidden;
padding:0px;
display:block;
}
#menu li:hover #sub{
visibility:visible;
}
#menu li:hover a {
background-color:rgba(51,0,0,0.5);
}
#menu li:hover #sub li a{
background:#C90;
}
#menu li #sub li:hover a{
background:rgba(51,0,0,0.5);
}
</style>
....
<div id="wrap">
<ul id="menu">
<li><a href="#">aa</a>
<ul id="sub">
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
</ul>
</li>
<li><a href="#">bb</a></li>
<li><a href="#">cc</a></li>
<li><a href="#">dd</a></li>
<li><a href="#">ee</a></li>
</ul>
</div>
Kết quả:
Không có nhận xét nào:
Đăng nhận xét