Skip to content

Commit

Permalink
上传
Browse files Browse the repository at this point in the history
  • Loading branch information
@95sunny
95sunny committed Dec 1, 2017
0 parents commit 3b4f86b
Show file tree
Hide file tree
Showing 68 changed files with 2,687 additions and 0 deletions.
Empty file added README
Empty file.
411 changes: 411 additions & 0 deletions cart.html

Large diffs are not rendered by default.

170 changes: 170 additions & 0 deletions category.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>
京东商品分类 -
京东商城
</title>

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/category.css">
</head>
<body>

<!--顶部-->
<div class="jd_base_header">
<!--顶部显示的topbar-->
<div class="jd_topbar">
<a href="index.html" class="icon_back"></a>
<form action="">
<span class="icon_search"></span>
<!--search主要是在弹出键盘右下角的键变成"搜索"-->
<input type="search" placeholder="搜索占位文字">
</form>
<div class="icon_shortcut"></div>
</div>
<!--快捷菜单-->
<ul class="jd_shortcut" style="display: none">
<li>
<a href="index.html">
<span class="icon_home"></span>
<p>首页</p>
</a>
</li>
<li class="current">
<a href="#">
<span class="icon_category"></span>
<p>分类搜索</p>
</a>
</li>
<li>
<a href="cart.html">
<span class="icon_cart"></span>
<p>购物车</p>
</a>
</li>
<li>
<a href="me.html">
<span class="icon_me"></span>
<p>我的京东</p>
</a>
</li>
</ul>
</div>
<!--主要内容-->
<div class="jd_main">
<!--左边列表-->
<div class="jd_main_left">
<ul>
<li class="current"><a href="javascript:;">家用电器</a></li>
<li><a href="javascript:;">电脑办公</a></li>
<li><a href="javascript:;">手机数码</a></li>
<li><a href="javascript:;">母婴童装</a></li>
<li><a href="javascript:;">图书</a></li>
<li><a href="javascript:;">家居家纺</a></li>
<li><a href="javascript:;">厨房用品</a></li>
<li><a href="javascript:;">家居建材</a></li>
<li><a href="javascript:;">食品生鲜</a></li>
<li><a href="javascript:;">酒水饮料</a></li>
<li><a href="javascript:;">运动户外</a></li>
<li><a href="javascript:;">鞋靴箱包</a></li>
<li><a href="javascript:;">奢品礼品</a></li>
<li><a href="javascript:;">钟表珠宝</a></li>
<li><a href="javascript:;">玩具乐器</a></li>
<li><a href="javascript:;">内衣配饰</a></li>
<li><a href="javascript:;">汽车用品</a></li>
<li><a href="javascript:;">音像制品</a></li>
<li><a href="javascript:;">医药保健</a></li>
<li><a href="javascript:;">计生情趣</a></li>
<li><a href="javascript:;">全球购</a></li>
<li><a href="javascript:;">京东金融</a></li>
<li><a href="javascript:;">生活旅行</a></li>
<li><a href="javascript:;">宠物农资</a></li>
</ul>
</div>
<!--右边主要内容-->
<div class="jd_main_right">
<!--顶部广告图-->
<a class="jd_category_banner" href="javascript:;"><img src="images/banner_1.jpg" alt=""></a>
<!--各种类型的产品-->
<div class="jd_category_seciton">
<h4>各种手机</h4>
<ul class="clearfix">
<li>
<a href="">
<img src="images/buy-pro1.jpg" alt="">
<p>手机</p>
</a>
</li>
<li>
<a href="">
<img src="images/buy-pro1.jpg" alt="">
<p>手机</p>
</a>
</li>
<li>
<a href="">
<img src="images/buy-pro1.jpg" alt="">
<p>手机</p>
</a>
</li>
<li>
<a href="">
<img src="images/buy-pro1.jpg" alt="">
<p>手机</p>
</a>
</li>
<li>
<a href="">
<img src="images/buy-pro1.jpg" alt="">
<p>手机</p>
</a>
</li>
</ul>
</div>

<div class="jd_category_seciton">
<h4>各种衣服</h4>
<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>
</ul>
</div>
</div>
</div>

<script src="js/base.js"></script>
<script src="js/category.js"></script>
</body>
</html>
182 changes: 182 additions & 0 deletions css/base.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
*,
::before,
::after{
margin: 0;
padding: 0;

-webkit-box-sizing: border-box;
box-sizing: border-box;

-webkit-tap-highlight-color: transparent;
}

body{
font-family: "Microsoft YaHei", sans-serif;
font-size: 12px;
color: #000;
}

a{
text-decoration: none;
color: #666;
}

ul,ol{
list-style: none;
}

input, textarea{
outline: none;
border: none;
/*取出iPhone手机非扁平化效果*/
-webkit-appearance: none;
}

.clearfix::before,
.clearfix::after{
content: ".";
/* 注意点 */
display: block;
height: 0;
line-height: 0;
clear: both;
/* 保持内容的占位,但是隐藏显示 */
visibility: hidden;
}

/*正则匹配知识*/
[class ^= "icon_"]{
background: url("../images/sprites.png") no-repeat;
-webkit-background-size: 200px 200px;
background-size: 200px 200px;
}

/* 顶部header */
.jd_base_header{
width: 100%;
}

/* header的顶部 */
.jd_base_header .jd_topbar{
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;

background: url("../images/header-bg.png") repeat-x;
-webkit-background-size: 1px 44px;
background-size: 1px 44px;

position: relative;
}
.jd_topbar .icon_back{
position: absolute;
left: 0;
top: 0;
width: 38px;
height: 44px;

background-position: -20px 0;
/*由于图片大小是20 20*/
padding: 12px 9px;

/* 背景图相对于内容框来定位 */
-webkit-background-clip: content-box;
background-clip: content-box;
/* 背景图定位从内容开始计算 */
-webkit-background-origin: content-box;
background-origin: content-box;
}
.jd_topbar .icon_shortcut{
position: absolute;
right: 10px;
top: 0;
width: 40px;
height: 44px;

background-position: -60px 0;
/*由于图片大小是20 20*/
padding: 12px 10px;

/* 背景图相对于内容框来定位 */
-webkit-background-clip: content-box;
background-clip: content-box;
/* 背景图定位从内容开始计算 */
-webkit-background-origin: content-box;
background-origin: content-box;
}

.jd_topbar span.jd_topbar_title{
font-size: 16px;
}

.jd_topbar form{
width: 100%;
height: 44px;
padding-left: 40px;
padding-right: 50px;
}

.jd_topbar .icon_search{
position: absolute;
left: 50px;
top: 12px;

background-position: -60px -109px;
width: 20px;
height: 20px;
}
.jd_topbar form input{
margin-top: 5px;
height: 34px;
width: 100%;
padding-left: 30px;

border: 1px solid #e0e0e0;
border-radius: 17px;
}
/* header底部的shortcut */
.jd_base_header .jd_shortcut{
display: table;
width: 100%;
height: 57px;
background: #404042;
}

.jd_shortcut li{
display: table-cell;
width: 25%;
height: 100%;
text-align: center;
}
.jd_shortcut li.current{
background: #2d2d2d;
}
.jd_shortcut li a{
display: block;
width: 100%;
height: 100%;
}

.jd_shortcut li a span{
display: block;
width: 30px;
height: 30px;
margin: 0 auto;
margin-top: 5px;
}
.jd_shortcut li a span.icon_home{
background-position: -30px -27px;
}
.jd_shortcut li a span.icon_category{
background-position: -60px -27px;
}
.jd_shortcut li a span.icon_cart{
background-position: -90px -27px;
}
.jd_shortcut li a span.icon_me{
background-position: -120px -27px;
}
.jd_shortcut li a p{
color: #fff;
}
Loading

0 comments on commit 3b4f86b

Please sign in to comment.