样式不起作用

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

样式不起作用

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

慕标5156652

2020-11-10 12:37:57

# 具体遇到的问题

# 报错信息的截图

目录结构

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【
searchBar.css
.search-bar {
width: 100%;
height: 1.066667rem;
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-top: 0.213333rem;
}

.search-bar .bar-location {
margin-right: 0.533333rem;
border-radius: 0.346667rem;
background-color: rgba(0,0,0,0.33);
width: 2.453333rem;
height: 0.746667rem;
}
.search-bar .location-icon {
display: inline-block;
width: 0.4rem;
height: 0.533333rem;
vertical-align: 0.213333rem;
margin-left: 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;
}
代码语言】突出显示
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0,user-scalable=0">
<title>首页</title>

<script>
(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" href="../lib/reset.css">

<link rel="stylesheet" type="text/css" href="./searchBar/searchBar.css">

<link rel="stylesheet" href="./header/header.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="https://app.nihaoshijie.com.cn/upload/bannertemp.e8a6fa63.jpg" alt="">
</div>
</body>
</html>