Chuyển tới nội dung
Trang chủ » Hướng dẫn code menu ngang đẹp bằng html css

Hướng dẫn code menu ngang đẹp bằng html css

Để đáp ứng nhu cầu của một số bạn. Hôm nay mình sẽ hướng dẫn các bạn code menu ngang đẹp bằng html, css , các bạn tham khảo nhé Để tạo ra…

Để đáp ứng nhu cầu của một số bạn. Hôm nay mình sẽ hướng dẫn các bạn code menu ngang đẹp bằng html, css, các bạn tham khảo nhé

Để tạo ra menu ngang bằng html, css chúng ta cần phần mềm để lập trình như notepad++, Adobe dreamword.., hoặc có thể sử dụng trang lập trình trực tuyến như codepen.io. Riêng  mình thì thích sài Sublime Text, các bạn có thể tải trên mạng, nó có dung lượng khá nhẹ và dễ sử dụng

 

READ  Mẹo thay đổi tên facebook quá 5 lần thành công 100%

Cách tạo menu ngang bằng html, css

Đâu tiên các bạn mở phần mềm lập trình và tạo file mới và lưu dưới dạng index.html, với Sublime Text các an ấn vào phía dưới góc bên phải cho Plain Text và chọn ngôn ngữ để lập trình

Bước tiếp theo các bạn gõ html và ấn Tab nó tự động sinh ra code mặc định của html, sau đó  chép đoạn code dưới đây vao file index.html

READ  Hướng dẫn cài theme anime cho pc chi tiết có video

1. Mã HTML

<!DOCTYPE html>
<html>
<head>
<title>Code menu ngang bằng html css</title>
</head>
<body>
<div class=”wrapper”>
<header>
<h1>Tao menu ngang đẹp</h1>
</header>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Product</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>

 2. Mã CSS

*{
padding: 0px;
margin: 0px
}
.wrapper{
width: 960px;
height: 400px;
overflow: hidden;
margin: 0 auto;
padding: 0;
background: #ccc
}
h1{
padding: 10px;
color: #fff
}
header{
width: 100%;
height: auto;
background: #357ae8;
}
li{list-style-type: none;}
a{text-decoration: none;}
nav{
width: 100%;
height: auto;
background: #222;
}
nav ul {
width: 100%;
height: 40px;
text-align: center;
}
nav ul li{
display: inline-table;
padding:0px 15px;
line-height: 40px
}
nav ul li a{
color: #f1f1f1
}
nav ul li:hover {
background: #fff;
text-transform: 1.2s
}
nav ul li a:hover {
color: #666
}

Chỉ cần như vậy thôi các bạn đã sở hữu thanh menu ngang đẹp bằng html css rồi đó chúc các bạn thành công

READ  Hướng dẫn tạo menu responsive đa cấp html và css 3, jquery chi tiết
Rate this post

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *