发表于： 2020-06-20 22:01:58
1 1370
今天完成的事情：
完成了任务14的头尾和下拉框组件
完成效果：
下拉框html代码：
<div class="title">
<div class="container title">
<div class="row title">
<div class="col">
<img src="../14w/葡萄藤.png">
</div>
<div class="col link">
<a class="title-a" href="#">关于</a>
<a class="title-a" href="#">推荐</a>
<a class="title-a" href="#">职业</a>
<a class="title-a" href="#">首页</a>
</div>
<div class="col btn">
<label for="menu">
<div></div>
<div></div>
<div></div>
</label>
</div>
</div>
</div>
<input type="checkbox" id="menu">
<div class="link-1">
<div>
<a class="title-a1" href="#">首页</a>
</div>
<div>
<a class="title-a1" href="#">职业</a>
</div>
<div>
<a class="title-a1" href="#">推荐</a>
</div>
<div>
<a class="title-a1" href="#">关于</a>
</div>
</div>
</div>
</header>
css代码：
.title{
height: 70px;
background: #29b078;
}
.title img{
height: 45px;
margin-top: 12px;
}
.title .link{
padding-right: 0;
}
a{
text-decoration: none;
color:#fff;
}
.title .title-a{
height: 67px;
width: 70px;
font-size: 14px;
text-align: center;
line-height: 67px;
float: right;
}
@media(max-width:991px) {
.link{
display: none;
}
}
.title .title-a:hover{
border-bottom: 3px solid #fff;
}
.title .btn{
display: none;
}
.title label{
width: 55px;
height: 40px;
margin-top:15px;
border: 1px solid #4f4f4f;
border-radius: 5px;
background: #29b078;
float: right;
}
.title label div{
width: 30px;
height: 3px;
margin: 7px auto 0;
border-radius: 5px;
background: #4f4f4f;
}
label:hover{
background: #269869;
}
@media(max-width:991px){
.title .btn{
display: block;
}
}
.link-1{
text-align: center;
background: #29b078;
display: none;
}
.title .link-1 div{
height: 67px;
width: 70%;
margin: auto;
font-size: 14px;
line-height: 67px;
border-bottom: 3px solid #29b078;
}
.title .link-1 div:hover{
border-bottom: 3px solid #fff;
}
input[type="checkbox"] {display: none;}
input[type="checkbox"]:checked~ .link-1{
display: block;
}
返回列表
评论