Computer >> Máy Tính >  >> Lập trình >> CSS

Làm cách nào để tạo menu điều hướng thuốc bằng CSS?


Sau đây là mã để tạo menu điều hướng thuốc bằng CSS -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document </title>
<style>
nav{
   width: 100%;
   background-color: rgb(255, 251, 251);
   overflow: auto;
   height: auto;
}
.links {
   display: inline-block;
   text-align: center;
   padding: 14px;
   text-decoration: none;
   font-size: 17px;
   border-radius: 5px;
   color:black;
}
.links:hover {
   background-color: rgba(129, 129, 129, 0.473);
}
.selected{
   background-color: rgb(33, 126, 255);
   color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1> Pill navigation example </h1>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</body>
</html>

Đầu ra

Đoạn mã trên sẽ tạo ra kết quả sau -

Làm cách nào để tạo menu điều hướng thuốc bằng CSS?