老师请优化一下，里面的半圆感觉有点问题
来源：4-4 自由编程
慕函数4234673
2020-04-08 09:41:14
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-size: 14px;
}
li {
list-style: none;
}
a {
font-size: 14px;
color: #363636;
text-decoration: none;
}
a:hover {
color: #1428a0;
}
img {
vertical-align: top;
width: 100%;
border: none;
}
.header{
width: 100%;
background: #fff;
border: 1px solid #eee;
}
.content,
.content-extend,
.logo{
height: 64px;
}
/*小屏的状态*/
.content{
display:flex;
justify-content: flex-start;
align-items: center;
}
.btn-toggle{
position: relative;
left: -16px;
width: 64px;
height: 64px;
background: red;
border-radius: 2px 64px 3px 0px;
outline: none;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn-toggle-bar{
width: 17px;
height: 2px;
background: #fff;
margin-top: 3px;
}
.logo {
display: flex;
justify-content: flex-end;
align-items: center;
}
.logo img{
width: 200px;
height: 100%;
}
/*小屏时的下拉单*/
.nav-content{
position: relative;
top: 0px;
background: gray;
transition: all 0.5s;
height: 0px;
overflow: hidden;
}
.tab-item{
height: 30px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px solid #eee;
}
.nav-contend-extend{
position: relative;
top:-1px;
height:92px;
}
/*大屏时的状态*/
.content-extend{
display: flex;
}
.content-extend-tab{
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.content-extend-tab-item{
font-size: 16px;
font-weight: bold;
color:black;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="content col-3 d-md-none">
<button class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
<div class="content-extend col-md-3 d-none d-md-block" >
<ul class="content-extend-tab">
<li class="content-extend-tab-item">首页</li>
<li class="content-extend-tab-item">合作</li>
<li class="content-extend-tab-item">关于合作</li>
</ul>
</div>
<div class="logo col-9 col-md-9">
<img src="img/logo.png">
</div>
</div>
</div>
</div>
<div class="nav-content" id="nav">
<ul class="tab">
<li class="tab-item">首页</li>
<li class="tab-item">合作</li>
<li class="tab-item">关于合作</li>
</ul>
</div>
<script type="text/javascript">
var nav = document.getElementById('nav'),
btntoggle=document.getElementById('btn-toggle')
btntoggle.onclick = function() {
if (nav.classList.contains("nav-contend-extend")) { // 收起
nav.classList.remove("nav-contend-extend");
} else { // 展开
nav.classList.add("nav-contend-extend");
}
};
</script>
</body>
</html>
1回答
-
好帮手慕码
2020-04-08
同学你好，建议优化如下：
（1）logo图大致是在居中的位置的：
（2）下拉框的高度超出了：
可以适当减小一些：
（3）半圆的逻辑是没有问题的，当缩小到一定程度的时候，会被logo图片挤小，可以添加最小宽度：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题