老师我的效果好像和视频不一样

来源：4-3 导航区

hyperse

2019-09-18 16:18:07

文字都挤到一起了。。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<title>响应式布局——三星实例</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/grid.css" />
		<link rel="stylesheet" href="css/index.css" />
		<style>
			
			
		</style>
	</head>
	<body>
		<header class="header-container">
			<div class="container">
				<div class="row">
					<div class="header-logo-container col-8 col-md-3">
						<a href="./samsung.html" class="header-logo">
							<img src="img/logo.svg" />
						</a>
					</div>
					<div class="header-btn-container col-4 d-md-none">
						<button type="button" class="btn-toggle" id="btn-toggle">
							<span class="btn-toggle-bar"></span>
							<span class="btn-toggle-bar"></span>
							<span class="btn-toggle-bar"></span>
						</button>
					</div>
					<div class="header-nav-container col-md-9 d-none d-md-block">
						<ul class="header-nav">
							<li class="header-nav-item">
								<a href="###" class="header-nav-link">手机&amp;平板</a>
							</li>
							<li class="header-nav-item">
								<a href="###" class="header-nav-link">电视&amp;影音</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>
							<li class="header-nav-item">
								<a href="###" class="header-nav-link">网上商城</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</header>
		
		<nav class="nav-container d-md-none" id="nav">
			<ul class="container">
				<li><a href="###" class="nav-link">手机&amp;平板</a></li>
				<li><a href="###" class="nav-link">电视&amp;影音</a></li>
				<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>

index.css:

/* 布局 start */

/* header */
.header-container{
	background-color: #fff;
	border-bottom: 1px solid #dadada;
}
.header-logo-container,
.header-btn-container,
.header-nav-container{
	height: 64px;
}
.header-btn-container{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
/* nav */
.nav-container{
	overflow: hidden;
	position: relative;
	top: -1px;
	height: 0;
	border-bottom: 1px solid #dadada;
	transition: height 0.5s; 
}
.nav-container-extended{
	top: 0;
	height: 201px;
}







/* 组件 start */

/* btn-toggle */
.btn-toggle{
	padding: 10px;
	background-color: transparent;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
.btn-toggle:hover{
	background-color: #f9f9f9;
}
.btn-toggle-bar{
	display: block;
	width: 24px;
	height: 4px;
	background-color: #363636;
	border-radius: 2px;
}
.btn-toggle-bar + .btn-toggle-bar{
	margin-top: 4px;
}
.btn-toggle:hover .btn-toggle-bar{
	background-color: #1428a0;
}






/* 内容 start */

/* header */
.header-logo{
	display: flex;
	align-items: center;
	width: 136px;
	height: 100%;
}
.header-nav,
.header-nav-item,
.header-nav-link{
	height: 100%;
}
.header-nav{
	display: flex;
	justify-content: flex-end;
	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 */
.nva-link{
	display: block;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
}

base.css:

*{
	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{
	width: 100%;
	border: none;
	vertical-align: top;
}

grid.css是下载的源码

写回答

1回答