content-item好像整体偏左
来源：2-6 首页-类目（2）
hyperse
2019-10-25 02:55:22
代码如下，请老师帮忙看下是哪里出了问题
没有写出来的代码就是直接引用的源码中的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>首页</title>
<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"/>
<link rel="stylesheet" type="text/css" href="category/category.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>
<div class="search-btn">
<p class="place-holder">鸡翅</p>
</div>
<img class="header-img" src="http://img.mukewang.com/climg/5d590b3f0001863804300245.jpg" />
</div>
<!-- 头部结束 -->
<!-- 类目开始 -->
<div class="category-content clearfix"></div>
<!-- 类目结束 -->
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="category/category.js"></script>
</body>
</html>category.css
.category-content{
padding-bottom: 0.266666rem;
}
.category-content .category-item{
float: left;
width: 25%;
padding-top: 0.373333rem;
font-size:0.346666rem;
direction: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.category-content .item-icon{
width: 1.253333rem;
}
.category-content .item-name{
margin-top: 0.373333rem;
}category.js
(function(){
//类目的模板字符串
var itemTmpl = '<div class="category-item">' +
'<img class="item-icon" src=$url />' +
'<p class="item-name">$name</p>' +
'</div>';
/* 渲染category元素
param */
function initCategory(){
//获取category的数据
$.get('../json/head.json',function(data){
console.log(data); //打印假数据
//json数据中的primary_filter的前面八个
var list = data.data.primary_filter.splice(0,8);
list.forEach(function(item,index){
var str = itemTmpl
.replace('$url',item.url)
.replace('$name',item.name);
$('.category-content').append($(str));
});
});
}
/* 绑定item的click事件
param */
function addClick(){
$('.category-content').on('click','.category-item',function(){
alert(1);
})
}
function init(){
initCategory();
addClick();
}
init();
})();searchBar.css
.search-bar{
width: 100%;
height: 1.066666rem;
position: absolute;
display: flex;
padding-top: 0.213333rem;
align-items: center;
justify-content: center;
}
.search-bar .bar-location{
margin-right: 0.533333rem;
border-radius: 0.346666rem;
background: 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-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;
}
.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;
}
.search-bar .search-btn{
position: relative;
width: 4.533333rem;
height: 0.8rem;
background-color: #FFFFFF;
border-radius: 0.533333rem;
}
.search-bar .search-btn::before{
content: ' ';
display: block;
position: absolute;
width: 0.373333rem;
height: 0.373333rem;
background-image: url(../../img/searchIcon.png);
background-size: cover;
top: 0.186666rem;
left: 0.266666rem;
}
.search-bar .place-holder{
color: #a9a9a9;
font-size: 0.373333rem;
height: 100%;
line-height: 0.8rem;
margin-left: 28px;
}header.css
.header{
position: relative;
}
.header .header-img{
width: 100%;
height: 4.746666rem;
}写回答
1回答
-
同学你好， category-item下设置弹性布局的display单词拼写错误，建议修改:
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题