左右很多空白间距

来源：4-4 自由编程

慕言_7946275

2019-11-10 12:32:34

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>4-4自由编程</title>
<link rel="stylesheet" href="css/grid.css">
<style>
/*-- 布局 start --*/
* {
    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*/
.header-container{
    background-color: #fff;
    border-bottom: 1px solid #dadada;
}
.header-logo-container,
.header-nav-container,
.header-btn-container{
    height: 64px;
}
.header-btn-container{
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: -15px;
}


/*nav*/
.nav-container{
overflow: hidden;
position: relative;
top:-1px;
height: 0;
transition: all 1.5s;

}
.nav-container-extended{
top:0;
height:200px;
}
.nav-container li{

background: lightgray;
     border-bottom: 2px solid #dadada;
     height: 2em;
     display: flex;
     align-items: center;
}


/*-- 布局 end --*/


/*-- 组件 start --*/

/*btn-toggle*/
.btn-toggle{
height: 64px;
            width: 64px;
            background: red;
            border: none;
            border-radius: 0 80px 0 0;
            cursor: pointer;
        
}

.btn-toggle-bar{
margin-left: 12px;
display: block;
width: 24px;
height: 4px;
background-color: #fff;
border-radius: 4px;

}
.btn-toggle-bar+.btn-toggle-bar{
margin-top: 10px;
}




/*-- 组件 end --*/


/*-- 内容 start --*/

/*header*/
.header-logo{
display: flex;
align-items: center;
width: 150px;
height: 100%;
}
.header-nav,
.header-nav-item,
.header-nav-link{
height: 100%;
}
.header-nav{
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;

}
.header-nav-item{
margin-left: 24px;
}
.header-nav-item:first-child{
margin-left: 0;
}
.header-nav-link{
display: flex;
align-items: center;
font-weight:bold;
}



/*nav*/
.nav-link{
display:block;
height:40px;
line-height: 40px;
font-weight:bold;
text-indent: 2em;
}

.nav-container .container{
padding: 0;
}


/*-- 内容 end --*/

</style>
</head>
<body>
<header class="header-container">
<div class="container">
<div class="row">

<div class="header-btn-container col-5 d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
<div class="header-nav-container col-sm-5 d-none d-md-block">
<ul class="header-nav">
<li class="header-nav-item"><a href="###" class="header-nav-link">首页</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">关于</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">商业合作</a></li>
</ul>
</div>

<div class="header-logo-container col-7 col-sm-7">
<a href="./index.html" class="header-logo">
<img src="https://www.imooc.com/static/img/index/logo.png" alt="cellphone">
</a>
</div>
</div>
</div>
</header>

<nav class="nav-container d-md-none" id="nav">
<ul class="container">
<li><a href="###" class="nav-link">首页</a></li>
<li><a href="###" class="nav-link">关于</a></li>
<li><a href="###" class="nav-link">商业合作</a></li>
</ul>
</nav>

<script>
var nav=document.getElementById('nav');
var navExtendedClassName='nav-container-extended';
document.getElementById('btn-toggle').onclick=function(){
if(nav.classList.contains(navExtendedClassName)){
nav.classList.remove(navExtendedClassName);
}else{
nav.classList.add(navExtendedClassName);
}
}
</script>
</body>
</html>

写回答

1回答