Thursday, June 1, 2017

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


THỦ THUẬT SEO

Bài liên quan

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


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



Biểu tượng cảm xúc ( Copy và dán xuống phần Comment )
Hãy Comment Những Gì Bạn Chưa Hiểu Hay Đơn Giản Là Để góp phần Tạo Động Lực Cho Tác Giả
• Không SPAM bạn nhé!
EmoticonEmoticon