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 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

*{
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

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 *