Hướng dẫn tạo Menu Ngang bằng CSS

Lượt xem:1273
Hướng dẫn tạo Menu Ngang bằng CSS

Hôm nay mình xin hướng dẫn các bạn cách tạo Menu Ngang, sử dụng Css để code. Cách làm này cũng rất đơn gian.

chỉ cần vài đoạn code css là bạn sẽ được một menu ngang. Nhưng điều quan trọng tôi muốn chỉ cho các bạn làm

thế nào khi các menu của các bạn không bị biến dạng nhảy lên, nhảy xuống, để làm cho trang web các bạn thấy đẹp hơn.

và dưới đây là toàn bộ code Menu Ngang các bạn có thể kham khảo và làm theo. Để có thể tích hợp vào website của

các bạn.

Source CSS

<style>
body{background-color:#333300;

    text-align:center;

    }

    p{ color:#FFCC66;

    font-size:50px;

    }

    #menu ul li{

    margin:0;

    padding:0;

    text-align:center;

    display:inline;    }

    #menu li a{

    font-size:20px;

    font-weight:bold;

    color:#CC0033;

    padding: 0 15px;

    border-right:1px solid #00FF333;

    text-transform:uppercase;

    text-decoration:none;

    }

    #menu ul li:hover{background:white;}
</style>

Code HTML

<html>
<head>
<title>MENU NGANG BANG CSS</title>
</head>
<body>
<p> THIET KE WEB</p>
<div id=menu>
<ul>
    <li><a href="#">TRANG CHU</a></li>
    <li><a href="#">PHAN CUNG</a></li>
    <li><a href="#">PHAN MEM</a></li>
    <li><a href="#">HE DIEU HANH</a></li>
    <li><a href="#">DANG KY</a></li>
    <li><a href="#">KINH NGHIEM</a></li>
</ul>
</div>
</body>
</html>

Chúc các bạn làm thành công smiley


Danh Sách Videos Ngôn Ngữ Lập Trình Danh Sách Tin tức