【H5】小米导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>小米导航栏</title>
</head>
<style>
a {
text-decoration: none;
color: white;
display: block;
width: 250px;
height: 40px;
background-color: #595959;
padding-left: 2.5rem;
line-height: 2.5rem;
transition: background-color 0.5s;
}
a:hover {
background-color: #7bbbff;
}
img {
margin-top: 10px;
}
a:first-child {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background-color: #7bbbff;
font-size: 21px;
}
a:last-child {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
</style>
<body>
<nav>
<div class="nav">
<a href="">
<b>2024.10——2024.12</b>
</a>
<a href="">斯皮尔伯格影迷主页</a>
<a href="">页面布局训练</a>
<a href="">个人主页V1</a>
<a href="">期末展示-个人主页V2</a>
<a href="">更多作品敬请期待</a>
<a href="">健康 儿童</a>
<a href="">耳机 音响</a>
</div>
</nav>
</body>
</html>
打赏
微信扫一扫，打赏作者吧～
Osinghong">