在网页设计中,导航条是一个至关重要的组成部分,它可以为用户提供网站的整体结构和内容。而如何使用CSS来设置导航条呢?首先,我们需要构建一个基本的HTML结构,包含导航条的容器、Logo、导航链接等。代
<div class="navbar"> <div class="logo"> <a href="#">My Website</a> </div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
.navbar{ position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #333; }
.nav-links li{ display: inline-block; margin: 0 10px; } .nav-links li a{ padding: 5px 10px; color: #fff; text-decoration: none; } .nav-links li a:hover{ background-color: #fff; color: #333; }
.logo{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 50px; line-height: 50px; text-align: center; font-size: 18px; font-weight: bold; color: #fff; }
粉丝
0
关注
0
收藏
0