做一个h5商品导航栏,并把他分成四个部分的代码
时间: 2024-03-09 16:46:14 浏览: 19
好的,以下是一个基于HTML5和CSS3的商品介绍导航栏的代码,分成四个部分:
```html
<nav class="product-nav">
<a href="#introduction" class="active">简介</a>
<a href="#details">详情</a>
<a href="#comments">评论</a>
<a href="#consultation">咨询</a>
</nav>
```
```css
.product-nav {
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.product-nav a {
font-size: 16px;
color: #333;
text-decoration: none;
text-transform: uppercase;
position: relative;
}
.product-nav a:after {
content: "";
display: block;
height: 2px;
width: 0;
background-color: #333;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.3s ease-in-out;
}
.product-nav a.active:after {
width: 100%;
}
@media screen and (max-width: 768px) {
.product-nav {
flex-wrap: wrap;
}
.product-nav a {
flex-basis: 25%;
margin-bottom: 10px;
}
}
```
以上代码中,我们使用了HTML5的nav元素来创建导航栏容器,使用了CSS3中的Flex布局来排列四个部分,并定义了按钮的样式。同时,我们使用了CSS3中的伪类选择器:after来为每个按钮添加下划线,并使用了过渡效果和动画效果,让导航栏更加美观和易于使用。最后,我们使用了CSS3中的媒体查询来检测屏幕宽度,并在需要时切换导航栏的样式。