category.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动web项目--京东分类</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/category.css">
</head>
<body>
<!--全屏容器-->
<div class="jd_layout">
<!--顶部通栏-->
<header class="jd_topBar">
<a href="#" class="icon_back"></a>
<form action="#"><input type="search" placeholder="顶部通栏"></form>
<a href="#" class="icon_menu"></a>
</header>
<!--分类主体-->
<div class="jd_main">
<div class="jd_cateLeft">
<ul class="">
<li class=""><a href="javascript:;">热门推荐</a></li>
<li class="now"><a href="javascript:;">潮流女装</a></li>
<li class=""><a href="javascript:;">品牌男装</a></li>
<li class=""><a href="javascript:;">内衣配饰</a></li>
<li class=""><a href="javascript:;">家用电器</a></li>
<li class=""><a href="javascript:;">电脑办公</a></li>
<li class=""><a href="javascript:;">手机数码</a></li>
<li class=""><a href="javascript:;">母婴频道</a></li>
<li class=""><a href="javascript:;">图书</a></li>
<li class=""><a href="javascript:;">家居家纺</a></li>
<li class=""><a href="javascript:;">居家生活</a></li>
<li class=""><a href="javascript:;">家具建材</a></li>
<li class=""><a href="javascript:;">热门推荐</a></li>
<li class=""><a href="javascript:;">潮流女装</a></li>
<li class=""><a href="javascript:;">品牌男装</a></li>
<li class=""><a href="javascript:;">内衣配饰</a></li>
<li class=""><a href="javascript:;">家用电器</a></li>
<li class=""><a href="javascript:;">电脑办公</a></li>
<li class=""><a href="javascript:;">手机数码</a></li>
<li class=""><a href="javascript:;">母婴频道</a></li>
<li class=""><a href="javascript:;">图书</a></li>
<li class=""><a href="javascript:;">家居家纺</a></li>
<li class=""><a href="javascript:;">居家生活</a></li>
<li class=""><a href="javascript:;">家具建材</a></li>
</ul>
</div>
<div class="jd_cateRight">
<div class="jd_cateRightBox">
<a href="#" class="banner"><img src="images/banner_1.jpg" alt=""></a>
<div class="hot">
<h3>热门分类</h3>
<ul class="clearFix">
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
</ul>
</div>
<div class="hot">
<h3>热门分类</h3>
<ul class="clearFix">
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
<li><a href="#"><img src="images/nv-fy.jpg" alt=""><p>毛呢大衣</p></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/common.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/category.js"></script>
</body>
</html>
category.css
.jd_layout {
width: 100%;
height: 100%;
}
html,body {
height: 100%;
}
/*顶部通栏*/
.jd_topBar {
height: 45px;
width: 100%;
border-bottom: 1px solid #ccc;
background: url("../images/header-bg.png") 0 0/1px 44px;
position: absolute;
top: 0;
left: 0;
/*background-color: pink;*/
z-index: 1111;
}
.jd_topBar a {
height: 44px;
width: 40px;
padding: 12px 10px;
position: absolute;
top: 0;
/*//让背景从内容部分开始平铺*/
/*没有被裁剪,只是不显示*/
background-origin: content-box;
/*让边框以外的背景不显示 默认的就是border-box*/
/*让padding以外的背景不显示 padding-box*/
/*让内容以外的背景不显示 content-box*/
/*都被裁剪掉了*/
background-clip: content-box;
}
.jd_topBar .icon_back {
left: 0;
background-position: -20px 0;
}
.jd_topBar .icon_menu {
right: 0;
background-position: -60px 0;
}
.jd_topBar form {
width: 100%;
padding: 0 40px;
}
.jd_topBar input {
height: 30px;
width: 100%;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-top: 7px;
padding: 0 10px;
}
.jd_main {
height: 100%;
width: 100%;
padding-top: 45px;
}
.jd_main .jd_cateLeft {
background: pink;
width: 90px;
height: 100%;
float: left;
overflow: hidden;
}
.jd_cateLeft ul {
width: 90px;
}
.jd_cateLeft ul li {
height: 50px;
width: 90px;
line-height:50px;
background: #f3f4f5;
text-align: center;
font-size: 12px;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.jd_cateLeft ul li.now {
border-right: none;
background-color: #fff;
}
.jd_cateLeft ul li.now a {
color: #d8505c;
}
.jd_cateLeft ul li a{}
.jd_main .jd_cateRight {
overflow: hidden;
/*background: hotpink;*/
height: 100%;
}
.jd_cateRightBox {
padding: 0 10px;
}
.jd_cateRightBox .banner {
width: 100%;
display: block;
}
.jd_cateRightBox .banner img {
width: 100%;
display: block;
margin-top: 10px ;
}
.jd_cateRightBox .hot {
margin-top: 10px;
}
.jd_cateRightBox .hot h3{
font-size: 12px;
}
.jd_cateRightBox .hot ul{
width: 100%;
}
.jd_cateRightBox .hot ul li{
width: 33.33%;
float: left;
padding-top: 5px;
}
.jd_cateRightBox .hot ul li a {
display: block;
width: 100%;
text-align: center;
}
.jd_cateRightBox .hot ul li a img {
width: 62px;
height: 62px;
display: block;
margin: 0 auto;
}
.jd_cateRightBox .hot ul li a p {
font-size: 12px;
text-align: center;
padding: 5px 0;
}
base.css
/*reset css*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
/*移动端宽度不固定,盒子的总宽度要包括边框*/
box-sizing: border-box;
-webkit-border-sizing: border-box;
/*去掉点击时高亮效果*/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: "Microsoft YaHei",sans-serif;
font-size: 14px;
color: #333;
}
ul,ol {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
input,textarea {
/*点击时去掉边框显蓝色*/
outline: none;
/*去掉边框,自己定义边框*/
border: none;
/*防止拉大*/
resize: none;
/*元素的外观,none没有任何样式*/
-webkit-appearance: none;
}
/*common css*/
.f_left {
float: left;
}
.f_right {
float: right;
}
/*清除浮动*/
.clearFix::after,
.clearFix::before {
content: "";
display: block;
visibility: hidden;
line-height: 0;
height: 0;
clear: both;
}
.ml10 {
margin-left: 10px;
}
.mr10 {
margin-right: 10px;
}
.mt10 {
margin-top: 10px;
}
.mc10 {
margin-bottom: 10px;
}
/*使用精灵图的公用样式*/
[class^="icon_"],[class*="icon_"] {
background-repeat: no-repeat;
background-image: url("../images/sprites.png");
-webkit-background-size: 200px 200px;
background-size: 200px 200px;
}
category.js
window.onload=function(){
//区域滚动效果
//条件:
//一个容器装着一个容器的HTML结构
//找到大容器
//子容器比父容器大
new IScroll(document.querySelector(".jd_cateLeft"),{
scrollX:false,
scrollY:true
});
new IScroll(document.querySelector(".jd_cateRight"),{
scrollX:false,
scrollY:true
});
};