京东颜色html,京东m.jd站点静态页实现(首页)H5
jdM文件结构图
1:创建两个css样式文件。base.css/index.css
base.css
/*重置样式css*/
*,
::before,
::after{
/* 选择所有的标签 padding:内边距*/
margin: 0;
padding: 0;
/*清楚移动端默认的点击高亮效果*/
-webkit-tap-highlight-color: transparent;
/* 设置所有的都是以边框开始计算宽度 百分比*/
-webkit-box-sizing: border-box;/*兼容*/
box-sizing: border-box;
}
body
{
font-size: 14px;
font-family: "Microsoft YaHei",sans-serif;/*微软雅黑,设备默认字体*/
color: #333;
}
a
{
color: #333;
text-decoration: none;/*不要下划线*/
}
a:hover
{
text-decoration: none;/*不要下划线*/
}
ul,ol
{
list-style: none;
}
input
{
border: none;
outline: none;
/*清除移动端默认的表单样式*/
-webkit-appearance: none;
}
.f_left
{
float: left;
}
.f_right
{
float: right;
}
.clearfix:before,
.clearfix:after
{
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
[class^="jd_"]
{
}
.m_l10
{
margin-left: 10px;
}
.m_r10
{
margin-right: 10px;
}
.m_t10
{
margin-top: 10px;
}
.m_b10
{
margin-bottom: 10px;
}
index.css
body
{
background: #f5f5f5;
}
/*主体盒子*/
.jd_layout{
width: 100%;
max-width: 640px;/*设计图的原因, 不让他放大*/
min-width: 300px;/*为了更好的布局显示*/
margin: 0 auto;/*居中*/
position: relative;
}
/*头部*/
.jd_header
{
/*position: fixed;浮动定位 以 window 最外层容器计算的*/
left: 0;
top: 0;
height: 40px;
width: 100%;
}
.jd_header > .jd_header_box
{
width: 100%;
max-width: 640px;/*设计图的原因, 不让他放大*/
min-width: 300px;/*为了更好的布局显示*/
margin: 0 auto;/*居中*/
height: 40px;
background: rgba(201,21,35,0.85);
position: relative;
}
.jd_header > .jd_header_box > .icon_logo
{
width: 60px;
height: 36px;
position: absolute;
background: url("../images/jd_logo.png") no-repeat;
background-size: 50px 20px;
background-position: 0px 0px;
top: 10px;
left: 10px;
}
.jd_header > .jd_header_box > .login
{
width: 50px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
position: absolute;
right: 0px;
top: 0px;
font-size: 15px;
}
.jd_header > .jd_header_box > form
{
width: 100%;
padding-left: 75px;
padding-right: 50px;
height: 40px;
position: relative;
}
.jd_header > .jd_header_box > form > input
{
width: 100%;
height: 30px;
border-radius: 15px;
margin-top: 3px;
padding-left: 30px;
}
.jd_header > .jd_header_box > form > .icon_search
{
background: url("../images/jd_search.png") no-repeat;
background-size: 19px 19px;
width: 19px;
height: 19px;
position: absolute;
background-position: 0px 0px;
top: 10px;
left: 85px;
}
/*轮播图*/
.jd_banner
{
width: 100%;
position: relative;
overflow: hidden;
}
.jd_banner > ul:first-child
{
width: 1000%;
/*尽可能做webkit内核的兼容*/
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.jd_banner > ul:first-child > li
{
width: 10%;
float: left;
}
.jd_banner > ul:first-child > li > a
{
width: 100%;
display: block;
font-size: 0;
}
.jd_banner > ul:first-child > li > a > img
{
width: 100%;
/*
font-size 0
display: block;
vertical-align: middle;
*/
display: block;/*清除图片下面的间隙*/
}
.jd_banner > ul:last-child
{
width: 118px;
height: 6px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -59px;
}
.jd_banner > ul:last-child > li
{
width: 6px;
height: 6px;
float: left;
border-radius: 3px;
border: 1px solid #ffffff;
margin-left: 10px;
}
.jd_banner > ul:last-child > li.now
{
background: #ffffff;
}
.jd_banner > ul:last-child > li:nth-child(1)
{
margin-left: 0px;
}
/*导航栏模块*/
.jd_nav
{
width: 100%;
background: #ffffff;
border-bottom: 1px solid #e0e0e0;/*底部边框1px,颜色灰色*/
}
.jd_nav > ul
{
width: 100%;
padding: 10px 0;/*上下10px。左右0px*/
}
.jd_nav > ul > li
{
width: 25%;
float: left;
}
.jd_nav > ul > li > a
{
display: block;/*块级元素*/
}
.jd_nav > ul > li > a > img
{
width: 35px;
height: 35px;
display: block;/*没有间隙*/
margin: 0 auto;/*左右居中*/
}
.jd_nav > ul > li > a > p
{
text-align: center;
color: #666;
font-size: 12px;
padding: 6px 0;/*上下间隔6px。左右0px*/
}
/*商品主盒子*/
.jd_product
{
padding: 0 5px;
}
.jd_product > .product_box
{
width: 100%;
background: #ffffff;
margin-top: 10px;/*向上间距*/
box-shadow: 0 0 1px #e0e0e0;/*阴影*/
}
.jd_product > .product_box > .product_box_tit
{
height: 32px;
line-height: 32px;
border-bottom: 1px solid #e0e0e0;
}
.jd_product > .product_box > .product_box_tit.no_border
{
border-bottom: none;
}
.jd_product > .product_box > .product_box_tit > h3
{
font-weight: normal;
font-size: 15px;
padding-left: 15px;
position: relative;
color: #666666;
}
.jd_product > .product_box > .product_box_tit > h3:before
{
/*伪类转块
display block
position absoult
float left
*/
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 3px;
height: 12px;
background: #d8505c;
}
/*掌上秒杀 second kill*/
.jd_sk
{
}
.jd_sk .sk_icon
{
background: url("../images/sk_icon.png") no-repeat;
background-size: 16px 20px;
width: 16px;
height: 20px;
float: left;
margin-top: 4px;
}
.jd_sk .sk_name
{
color: #d8505c;
font-size: 15px;
float: left;
margin-left: 10px;
}
.jd_sk .sk_time
{
float: left;
margin-top: 8px;
}
.jd_sk .sk_time > span
{
float: left;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
background: #333333;
color: #ffffff;
margin-left: 3px;
}
.jd_sk .sk_time > span:nth-child(3n)
{
background: #ffffff;
color: #333333;
width: 5px;
}
.jd_sk > .product_box_con > ul
{
width: 100%;
font-size: 12px;
padding: 10px 0;
}
.jd_sk > .product_box_con > ul > li
{
width: 33.3333%;
float: left;
text-align: center;
}
.jd_sk > .product_box_con > ul > li > a
{
display: block;
width: 100%;
border-right: 1px solid #e0e0e0;
}
.jd_sk > .product_box_con > ul > li:last-child > a
{
border-right: 0;
}
.jd_sk > .product_box_con > ul > li > a > img
{
width: 64%;
display: block;
margin: 0 auto;
}
/*
选择器
E:first-of-type:选择E同类型的同级 第一个元素
E:last-of-type:选择E同类型的同级 最后一个元素
E:nth-of-type(n):选择E同类型的同级 第n个元素
*/
.jd_sk > .product_box_con > ul > li > p:first-of-type
{
color: #d8505c;
padding-top: 5px;
}
.jd_sk > .product_box_con > ul > li > p:last-of-type
{
text-decoration: line-through;/*删除线*/
color: #666666;
padding-top: 5px;
}
/*组合样式*/
.w_50
{
width: 50%;
display: block;
}
.w_50 > img
{
display: block;
width: 100%;
}
.b_left
{
border-left: 1px solid #e0e0e0;
}
.b_right
{
border-right: 1px solid #e0e0e0;
}
.b_bottom
{
border-bottom: 1px solid #e0e0e0;
}
2:创建index.html文件
content="width=device-width,user-scalable=no,initial-scale=1.0"
/>
首页
登录
-
京东超市
-
全球购
-
充值中心
-
服装城
-
京东金融
-
领券
-
分类查询
-
物流查询
掌上秒杀
0
0
:
0
0
:
0
0
更多>
-
¥10.00
¥100.00
-
¥10.00
¥100.00
-
¥10.00
¥100.00
京东超市
京东超市
京东超市
3:图片资源在images文件夹下 图片资源点击打开链接
工程文件点击下载https://pan.baidu.com/s/1i5bfVvB
京东颜色html,京东m.jd站点静态页实现(首页)H5相关推荐
- 揭秘京东区块链开源项目——JD Chain
导言 近日,京东区块链底层引擎JD Chain正式对外开源并同步上线开源社区,旨在为企业级用户和开发者提供开源服务,帮助他们提高研发效率,加速技术创新.3月30日,国家互联网信息办公室公布了第一批区块 ...
- 京东区块链开源项目——JD Chain介绍及区块链白皮书发布
导言 近日,京东区块链底层引擎JD Chain正式对外开源并同步上线开源社区,旨在为企业级用户和开发者提供开源服务,帮助他们提高研发效率,加速技术创新.3月30日,国家互联网信息办公室公布了第一批区块 ...
- 京东价格api,京东商品详情接口,京东api,京东优惠券接口,京东到手价api接口,京东app详情接口,接口代码对接实现价格监控接口,品牌维权接口,行业分析api接口代码分享
一.京东价格api,京东商品详情接口,京东api,京东优惠券接口,京东到手价api接口,接口代码对接实现价格监控,行业分析接口代码如下: 点击获取测试key和secret 1.接口请求参数如下: 请求 ...
- 京东/京粉/京东联盟商品查返利转返利链接接口API
{code: 0, data: {formatContext: "[京东]寒婵沙发现代简约科技布沙发客厅布艺沙发户型轻奢天然乳胶沙发 单人位(带扶手) 乳胶版(颜色备注) --------- ...
- python修改允许京东下单_京东Python开发(二)
今天终于搞通了京东的API开发,记录一下备忘. 一.注册成为开发者 链接:https://dev.jd.com/ 然后在应用中心新建一个应用. 然后京东审核通过就可以了.审核通过之后,在应用信息里有一 ...
- 正则:高亮多个相似关键词,如京东、京东物流、京东商城…
最近项目遇到一个小需求,就是在一段文字中,高亮几个关键词,例如以下文字: 京东(JD.com)是中国一家自营式B2C购物网站,创始人刘强东担任京东集团CEO.旗下设有京东商城.京东金融.拍拍网.京东智 ...
- 京东数科与京东云联袂发布智臻链“云”
点击「京东数科技术说」可快速关注 7月17日,"区块链+京东云 大有可为"战略合作媒体沟通会在北京国家会议中心召开. 会上,京东数科与京东云宣布在区块链技术服务领域深度合作,重磅发 ...
- 京东按图搜索京东商品(拍立淘) API,缅狒侧视
万邦京东按图搜索京东商品(拍立淘) API 返回值说明 item_search_img-按图搜索京东商品(拍立淘) onebound.jd.item_search_img 公共参数 请求地址: 跨境电 ...
- 淘宝商品详情采集上架京东店铺(京东商品详情接口,淘宝商品详情接口,无货源商品数据采集接口)接口代码对接教程
淘宝商品详情采集上架京东店铺(京东商品详情接口,淘宝商品详情接口,无货源商品数据采集接口)接口代码对接教程如下: 1.公共参数 名称 类型 必须 描述(接口代码教程wx19970108018) key ...
- 京东自媒体平台京东号正式上线!
前段时间就有传言说京东将上线自媒体平台,现在京东号如期到来,又多了一个可获取收益的平台,自媒体平台层出不穷,真是一波接一波,大家快去尝尝鲜吧. 目前京东号有俩个注册入口: 京东达人平台:http:// ...
最新文章
- OpenCV官方文档
- c 服务器二次验证码,V5验证官网 - 基础套餐免费 -滑块验证,行为验证,防刷验证 - 文档...
- flask—wtforms
- 计算机4级学那些课程,计算机四级考试科目是什么
- 各省互联网普及率数据集(1997-2018年)
- DNA测序发展史(3):三代测序
- ad网络标号怎么用_altium designer网络标号的作用范围
- 产业分析:智能巡检机器人行业
- 对于Android虚拟机启动失败“The emulator process for AVD Nexus_5X_API_30 was killed”的解决方案
- 物联网嵌入式面试题集锦
- 小程序云开发中的一些注意点与Error: errCode: -404011 cloud function execution error | errMsg: clou----错误
- 滴水逆向——指针07课堂随笔
- ios13查找iphone_如何使用iOS 13更快地制作iPhone
- Windows重启显卡驱动热键说明
- 运用RapidMiner进行聚类分析
- java: 程序包javax.servlet不存在
- 亿康先达2018年取得两位数全球增长
- wps云同步无法连接服务器_WPS云文档链接分享后对方没有访问权限?解决办法在此...
- 【CAN】CANopen简介
- java计算机毕业设计的课程交流系统源程序+mysql+系统+lw文档+远程调试
热门文章
- 微信H5 用户调整微信字体 导致使用rem的页面错乱
- 【鸡啄米】VC++串口通信编程详解
- UE4.24版本VR项目打包后,未出现手柄控制器
- Kata Container 2.x 和 3.0 安装,内核编译,镜像制作
- 互联网+制造业,让你的生产管理更容易
- IPV6在容器云中的部署(一)
- 360P 480P 720P 1080P 1080i 说明
- CuInS2/ZnS-PEG量子点|1I-V族三元化合物铜钢硫(CuInS2简称CIS),CuInS2/ZnS核壳量子点
- C:\Users\用户名\Documents不可用
- 关于《损失模型》的一点笔记——第一部分引言