Thursday, June 1, 2017

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

Từ khóa

Để đá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

Điểm 4.6/5 dựa vào 87 đánh giá
  • Lazada : Mở chương trình "giá khuynh đảo", giới hạn mỗi người mua tối đa 2 sản phẩm Click xem
  • Adayroi : iPhone 7 lần đầu về giá dưới 15 triệu đồng Click xem
  • Tiki : Giảm 10% cho thẻ tín dụng HSBC Click xem

Bài liên quan