Chia sẻ thủ thuật - Giải trí tổng hợp
Vũ Steven
Vũ Steven

Chủ Nhật, 3 tháng 11, 2013

Thủ thuật tạo Menu ngang cho Blogger bằng CSS < 2 >

Đơn giản.
Menu - Thủ thuật tạo Menu ngang cho Blogger bằng CSS
<style>
/* liDock CSS */
ul#navlist {
display: inline;
list-style: none;
}

ul#navlist li {
float: left;
width: 60px;
height:24px;
}

ul#navlist li a {
text-decoration: none;
width: 50px;
height:20px;
padding:5px;
font-size:7pt;
font-family:arial;
text-align:center;
line-height:20px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #003663;
display:block;
color:#fff;
}

ul#navlist li a:hover {
border-top: 5px solid #004a80;
border-bottom: 5px solid #004a80;
background:#004a80;
font-size:9pt;
font-weight:bold;
}
</style>
<ul id="navlist">
<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>


Lưu ý : 
width: 60px; , height:24px; : kích thước của mỗi menu khi rê chuột


width: 50px; , height:20px; : khíc thước mỗi menu lúc bình thường


+ line-height:20px; và height:20px; 2 code này phải có trị số bằng nhau.


background: #003663; : màu nền của menu lúc bình thường


background:#004a80; : màu nền của menu khi rê chuột vào
Hãy nhấn like nếu bài viếc có ích
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Posts RSSComments RSSBack to top
Copyright © 2013 by Demo vusteven New5
Ghi rõ nguồn vusteven.info khi phát hành lại thông tin từ trang này.