页面样式又不对了。。

首页课程实战体系课手记专栏慕课教程

页面样式又不对了。。

来源：2-3 首页-头部样式（2）

hyperse

2019-12-15 17:45:11

有三个问题：

1、控制台报错但是点击也没有出现具体是哪里出了错，只知道是index.html里面。该如何查看具体报错信息？控制台没有，

2、然后在命令行里面看到报错是reset.css找不到，但是明明引入了啊，

3、每当出现这种找了半天都不知道错误是哪里的时候，我就会重头写代码，有没有更好的方法呢。。

目录结构如下：

代码如下：

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
		<script type="text/javascript">
			(function (){
				var docEl = document.documentElement;
				function setRemUnit(){
					//获取到rem的基准值
					var rem = docEl.clientWidth / 10;
					
					//动态设置html根元素的font-size
					docEl.style.fontSize = rem + 'px';
				}
				
				setRemUnit();
				
				//窗口大小变化时 触发
				window.addEventListener('resize',setRemUnit);
				
				//窗口出现在当前屏幕时(有浏览器兼容性)
				window.addEventListener('pageshow',function(e){
					if(e.persisted){
						setRemUnit();
					}
				});
			})();
		</script>
		<link rel="stylesheet" type="text/css" href="../lib/reset.css"/>                                                                                                                                                            
		<link rel="stylesheet" type="text/css" href="header/header.css" />
		<link rel="stylesheet" type="text/css" href="searchBar/searchBar.css" />
	</head>
	<body>
		<!-- 头部开始 -->
		<div class="header">
					<div class="search-bar">
						<div class="bar-location">
							<div class="location-icon"></div>
							<div class="location-text">郑州市</div>
						</div>
						<div class="search-btn">
							<p class="place-holder">鸡翅</p>
						</div>
					</div>
					
					<img class="header-img" src="http://img.mukewang.com/climg/5d590b3f0001863804300245.jpg" />
				</div>
		
		<!-- 头部结束 -->
	</body>
</html>

searchBar.css

.search-bar{
	width: 100%;
	height: 1.066666rem;
	position: absolute;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.search-bar .bar-location{
	margin-right: 0.533333rem;
	border-radius:0.346666rem;
	background-color: rgba(0,0,0,0.33);
	width: 2.453333rem;
	height: 0.746666rem;
}
.search-bar .location-icon{
	display: inline-block;
	width: 0.4rem;
	height: 0.533333rem;
	vertical-align: 0.213333rem;
	margin-right: 0.16rem;
	background-image: url(../img/locationIcon.png);
	background-size: cover;
}
.search-bar .location-text{
	position: relative;
	display: inline-block;
	font-size: 0.373333rem;
	color: #fff;
	vertical-align: 0.32rem;
	margin-left: -0.08rem;
	
}
.search-bar .location-text::after{
	content: '';
	display: block;
	width: 0.373333rem;
	height: 0.373333rem;
	background-image: url(../img/arrowIcon.png);
	background-size: cover;
	position: absolute;
	right: -0.4rem;
	top:-0.026666rem;
	
}

header.css

.header{
	position: relative;
	
}
.header .header-img{
	width: 100%;
	height: 4.746666rem;
}

reset.css直接拷贝的

写回答

3回答

樱桃小胖子

2019-12-15

同学你好，同学是将项目放置在服务器上运行的么？服务器可以使用wampserver，也可以直接将项目托管到静态服务器上，操作步骤参考https://class.imooc.com/lesson/1013#mid=24413小节的视频。另外，建议同学详细描述一下是操作到哪一步出现了这样的报错。并且，同学上传的代码中，多了一个<meta charset="utf-8" />。

祝学习愉快！