<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>两种导航样式</title>
<style>
body{
font-family: "微软雅黑";
}
/* 设置横向导航 */
.navbar{
list-style: none;
margin: 0;
padding: 0;
background: #4c6ca0;
border-radius: 5px;
overflow: auto;
}
.navbar li{
float: left;
}
.navbar li a{
display: block;
color: #fff;
text-decoration: none;
padding: 15px 20px;
}
.navbar li a:hover{
background: #446190;
color: #f4f4f4;
color: red;
}
/* 设置侧边导航 */
.side-menu{
list-style: none;
border: 1px solid #ddd;
border-radius: 10px;
width: 300px;
padding: 20px;
}
.side-menu li{
font-size: 18px;
line-height: 2.4em;
border-bottom: dotted 1px #ddd;
}
.side-menu li:last-child{
border: none;
}
.side-menu li a{
color: #333;
text-decoration: none;
}
</style>
</head>
<body>
<ul class="navbar">
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<ul class="side-menu">
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
Html、CSS实现两种导航布局
最新推荐文章于 2024-05-17 03:52:12 发布