Hướng dẫn tạo menu ngang đơn giản cho website
Bài viết này sẽ hướng dẫn các bạn tạo một menu ngang đơn giản bằng CSS và HTML. Nếu như bạn nào đã đọc các bài viết trước thì sẽ dễ hiểu và sẽ dễ dàng hơn.
Đầu tiên chúng ta tạo file menu.html và thiết kế HTML để có được một menu ngang như sau.
Và dưới đây là mã HTML mình viết trong file menu.html
Sau khi viết mã HTML vào file menu.html các bạn ra ngoài chạy thử thì sẽ chưa thấy xuất hiện hình dạng một thanh menu ngang phải không. Các bạn yên tâm để làm cho nó trở thành một thanh menu ngang tuyệt đẹp thì chúng ta sẽ CSS để chỉnh sửa nó. Và bây giờ chúng ta sẽ viết một file CSS riêng bên ngoài rồi các bạn dẫn nó vào file HTML hoặc các bạn có thể viết trực tiếp trong phần thẻ <head> của file HTML nhé.
Còn mình thì sẽ tạo một file style.css và viết các lệnh CSS ở đó rồi dẫn nó vào file HTML cho nó chuyên nghiệp. Dưới đây là các lệnh mình viết trong file style.css.
Sau khi các bạn viết các lệnh CSS này xong thì các bạn ra ngoài chạy file menu.html để xem kết quả như trên nhé.
Chúc các bạn thành công.
Bài viết này sẽ hướng dẫn các bạn tạo một menu ngang đơn giản bằng CSS và HTML. Nếu như bạn nào đã đọc các bài viết trước thì sẽ dễ hiểu và sẽ dễ dàng hơn.
Đầu tiên chúng ta tạo file menu.html và thiết kế HTML để có được một menu ngang như sau.
Mã:
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Site Map</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>Sau khi viết mã HTML vào file menu.html các bạn ra ngoài chạy thử thì sẽ chưa thấy xuất hiện hình dạng một thanh menu ngang phải không. Các bạn yên tâm để làm cho nó trở thành một thanh menu ngang tuyệt đẹp thì chúng ta sẽ CSS để chỉnh sửa nó. Và bây giờ chúng ta sẽ viết một file CSS riêng bên ngoài rồi các bạn dẫn nó vào file HTML hoặc các bạn có thể viết trực tiếp trong phần thẻ <head> của file HTML nhé.
Còn mình thì sẽ tạo một file style.css và viết các lệnh CSS ở đó rồi dẫn nó vào file HTML cho nó chuyên nghiệp. Dưới đây là các lệnh mình viết trong file style.css.
Mã:
#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
}
#menu ul li{
display:inline;
}
#menu ul a{
text-decoration:none;
width:129px;
float:left;
background:#000;
color:#fff;
font-weight:bold;
text-align:center;
line-height:35px;
border-left:1px solid #fff;
}Sau khi các bạn viết các lệnh CSS này xong thì các bạn ra ngoài chạy file menu.html để xem kết quả như trên nhé.
Chúc các bạn thành công.
Nguồn: tuhocphp.com
Bài viết liên quan
Bài viết mới
