老师，图片中圈起来的那里为什么没有反应的？
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" href="./header/header.css">
<link rel="stylesheet" href="./searchBar/searchBar.css">
<link rel="stylesheet" href="./category/category.css">
<link rel="stylesheet" href="./contentList/contentList.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">
</div>
<!-- 头部结束 -->
<!-- 类目开始 -->
<div class="category-content clearfix"></div>
<!-- 类目结束 -->
<!-- 商家列表开始 -->
<div class="list-content">
<h4 class="list-title">
<span class="title-line"></span>
<span>附近商家</span>
<span class="title-line"></span>
</h4>
<div class="list-wrap"></div>
</div>
<!-- 商家列表结束 -->
<script src="../lib/jquery.min.js"></script>
<script src="./contentList/contentList.js"></script>
<script src="./category/category.js"></script>
</body>
</html>
CSS:
.list-content{
overflow: hidden;
padding-bottom: 1.333333rem;
}
.list-content .list-title{
text-align: center;
font-size: 0.426666rem;
margin-top: 0.373333rem;
margin-bottom: 0.133333rem;
}
.list-content .title-line{
display: inline-block;
border-bottom: 0.026666rem solid #949494;
height: 0.026666rem;
width: 0.8rem;
margin-left: 0.106666rem;
margin-right: 0.106666rem;
margin-bottom: 0.106666rem;
}
.r-item-content{
display: flex;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
margin-left: 0.266666rem;
margin-right: 0.266666rem;
color: #656565;
position: relative;
}
.r-item-content .item-img{
width: 2.293333rem;
height: 1.733333rem;
border: 0.026666rem solid #e4e4e4;
}
.r-item-content .item-info-content{
flex: 1;
margin-left: 0.186666rem;
overflow: hidden;
}
.r-item-content .brand{
position: absolute;
left: 0.026666rem;
top: 0.426666rem;
font-size: 0.32rem;
padding: 0.053333rem;
color: #fff;
}
.r-item-content .brand-pin{
background-color: #ffa627;
}
.r-item-content .brand-xin{
background-color: #21c56c;
}
.r-item-content .item-title{
margin-top: 0.08rem;
font-size: 0.426666rem;
font-weight: 500;
color: #333;
}
.r-item-content .item-desc{
margin-top: 0.346666rem;
font-size: 0.32rem;
}
.r-item-content .item-count{
float: left;
margin-left: 0.133333rem;
}
.r-item-content .item-time{
float: right;
}
.r-item-content .item-distance{
float: right;
}
.r-item-content .item-score{
float: left;
}
.r-item-content .item-price{
margin-top: 0.266666rem;
font-size: 0.32rem;
height: 0.64rem;
}
.r-item-content .other-info{
color: #898989;
margin-top: 0.186666rem;
font-size: 0.32rem;
display: flex;
}
.r-item-content .other-tag{
width: 0.373333rem;
height: 0.373333rem;
}
.other-content{
margin-left: 0.08rem;
height: 0.373333rem;
width: 6.133333rem;
}
js:
(function(){
// 商家详情模板字符串
var itemTmpl = '<div class="r-item-content">'+
'<img class="item-img" src=$pic_url>'+
'$brand'+
'<div class="item-info-content">'+
'<p class="item-title">$name</p>'+
'<div class="item-desc clearfix">'+
'<div class="item-score">$wm_poi_score</div>'+
'<div class="item-count">月售$monthNum</div>'+
'<div class="item-distance"> $distance</div>'+
'<div class="item-time">$mt_delivery_time |</div>'+
'</div>'+
'<div class="item-price">'+
'<div class="item-pre-price">$min_price_tip</div>'+
'</div>'+
'<div class="item-others">'+
'$others'+
'</div>'+
'</div>'+
'</div>';
/**
* 获取商家列表数据
* param
*/
function getList(){
$.get('../json/homelist.json',function(data){
console.log(data);
var list=data.data.poilist || [];
initContentList(list);
});
}
/**
* 渲染是否是新到热门品牌标签
* param {} data
*/
function getBrand(data){
if(data.brand_type){
return '<div class="brand brand-pin">品牌</div>';
}else{
return '<div class="brand brand-xin">新到</div>';
}
}
/**
* 渲染月售
* param {} data
*/
function getMonthNum(data){
var num = data.month_sale_num;
//大于999采用999+
if(num>999){
return '999+';
}
return num
}
/**
* 渲染商家活动
* param {} data
*/
function getOthers(data){
var array = data.discounts2;
var str='';
array.forEach(function(item,index){
// 内部的商家活动模版字符串
var _str='<div class="other-info">'+
'<img src=$icon_url class="other-tag">'+
'<p class="other-content">$info</p>'+
'</div>';
// 模版字符串替换数据
_str=_str.replace('$icon_url',item.icon_url)
.replace('$info',item.info);
// 字符串拼接
str=str+_str;
})
return str;
}
/**
* 渲染列表数据
* param []
*/
function initContentList(list){
list.forEach(function(item,index){
var str = itemTmpl
.replace('$pic_url',item.pic_url)
.replace('$name',item.name)
.replace('$distance',item.distance)
.replace('$min_price_tip',item.min_price_tip)
.replace('$mt_delivery_time',item.mt_delivery_time)
.replace('$brand',getBrand(item))
.replace('$monthNum',getMonthNum(item))
.replace('$others',getOthers(item));
$('.list-wrap').append($(str));
})
}
function init(){
getList();
}
init();
})();
正在回答
同学你好，老师测试你的代码，圈起来的部分有样式：
建议同学审查一下元素，看看同学的页面上，此处元素有没有成功设置上样式：
如果没有样式，再思考一下为什么样式没加上。
如果修改样式后，页面没有刷新，建议ctrl+F5强制刷新一下浏览器试试。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星