为什么图片吃上css样式
来源：3-2 项目作业
小杨同学呀
2020-07-02 20:15:25
.r-item-content{
display: flex;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
margin-left: 0.266667rem;
margin-right: 0.266667rem;
color: #656565;
position: relative;
}
.r-item-content .item-img{
width: 10px;
height: 10px;
border: 0.026667rem solid #e4e4e4;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<script>
(function(){
var docEl = document.documentElement;
function setRemUnit(){
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
window.addEventListener('resize',setRemUnit);
window.addEventListener('pageshow',function(e){
if(e.persisted){
setRemUnit()
}
})
})();
</script>
</head>
<link rel="stylesheet" href="./header.css">
<link rel="stylesheet" href="../lib/reset.css">
<link rel="stylesheet" href="../nine/nine.css">
<link rel="stylesheet" href="../list/list.css">
<link rel="stylesheet" href="../merchants/merchants.css">
<body>
<!--banner图区域-->
<div class="header">
<div class="header-content">
<div class="header-city">
<div class="header-icon"></div>
<div class="header-text">郑州市</div>
</div>
<div class="header-search">
<p class="header-search-text">鸡翅</p>
</div>
</div>
<img src="https://app.nihaoshijie.com.cn/upload/bannertemp.e8a6fa63.jpg" alt="">
</div>
<!--九宫格区域-->
<div class="nine 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="merchants"></div>
</div>
<!--底部导航区域-->
<div class="switch"></div>
<script src="../lib/jquery.min.js"></script>
<script src="../nine/nine.js"></script>
<script src="../merchants/merchants.js"></script>
</body>
</html>
(function () {
/*插入的html */
var itemTmple = '<div class="r-item-conent">'+
'<img class="item-img" src=$pic_url />'+
'$brand'+
'<div class="item-info">'+
'<p class="item-title">$name</p>'+
'<div class="item-desc">'+
'<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">$min_price_tip</div>'+
'<div class="item-others">'+
'$others'+
'</div>'+
'</div>'+
'</div>'
/*获取数据*/
function getList(){
$.get('../json/homelist.json',function(data){
var list = data.data.poilist || [];
/*获取到的数据传入其他函数*/
initContentList(list);
})
}
function initContentList(list){
list.forEach(function(item){
var str = itemTmple
.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)
$('.merchants').append($(str));
})
}
function init(){
getList();
}
init();
})();
2回答
-
好帮手慕星星
2020-07-03
同学你好，标签中的class类名与使用的不一致
所以样式不生效。修改成一致的就好了，js中
自己再测试下，祝学习愉快！
0 -
小杨同学呀
提问者
2020-07-02
我想缩小这个img图片 但是就是缩小不了 css样式不显示
0
相似问题