Để đá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
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
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
*{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
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
}
Điểm 4.6/5 dựa vào 87 đánh giá