Thứ hai, ngày 5 tháng 12 năm 2016

Tạo Menu bằng CSS

Ngày đăng: 15/3/2011, 18:37:19AM | Lượt xem: 4,166
Hot!

Có nhiều cách để tạo menu cho một website bằng cách sử dụng Photoshop, Corel, Flash, CSS... Tuy nhiên, sử dụng CSS là các tối ưu nhất. Website sẽ được tải lên nhanh hơn. Trong bài viết này, tôi sẽ hướng dẫn cách tạo một menu đơn giản :)

Có nhiều cách để tạo menu cho một website bằng cách sử dụng Photoshop, Corel, Flash, CSS... Tuy nhiên, sử dụng CSS là các tối ưu nhất. Website sẽ được tải lên nhanh hơn.
Trong bài viết này, tôi sẽ hướng dẫn cách tạo một menu đơn giản :)


Bước 1: Tạo menu được bo góc bên trái:

Kết quả:
Menu_bo_trai.bmp
Codes:
<body>
<div id="navigation"><a href="#">Home</a></div>
</body>
<style type="text/css">
#navigation a
{
color: #000;
background: #fb0 url("images/left_tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
</style>

Bước 2: Xây dựng một menu hoàn chỉnh:
Kết quả:
Menu_hoan_chinh.bmp
Codes:


<body>
<div id="navigation">
<a href="/"><span>Home</span></a>
<a href="/"><span>Services</span></a>
<a href="/"><span>Products</span></a>
<a href="/"><span>About Us</span></a>
<a href="/"><span>Contact Us</span></a>
</div>
<div id="border"></div>
</body>

<style type="text/css">
/*Tao mau vang cho menu */
#navigation a span
{
background: url("images/right_tab.gif") right top no-repeat;
padding-right: 10px;
font-weight:bold
}
#navigation a
{
color: #000;
background: #fb0 url("images/left_tab.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

/*Doi mau thi di chuot len menu*/
#navigation a:hover
{
color: #fff;
background: #26a url("images/left_tab_blue.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a:hover span
{
background: url("images/right_tab_blue.gif") right top no-repeat;
padding-right: 10px
}

#border {height:1em; background:#26a}
</style>

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.