HTML+CSS 京东商城静态页面
仅供学习，禁止商用！概不负责
body {
background-color: #F6F6F6;
margin: 0;
}
/* 公共格式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
input,button {
border: 0;
padding: 0;
outline: none; /* 取消轮廓边框 */
}
.f10 {
color:#F10215 !important;
}
a:hover { /* 触屏红色 */
color: #E33333 !important;
}
/* start */
.intermediate_public {
width: 1191px;
margin: 0 auto;
}
header {
height: 5rem;
background-color:rgb(251,204,165);
}
.shortcut {
height: 1.8rem;
background-color: #E3E4E5;
border-bottom: 1px solid #DDD;
font-size: .8rem;
line-height: 1.8rem;
}
#close {
height: 1.3rem;
width: 1.3rem;
position: relative;
top: -4.93rem;
font-size: 2rem;
background-color:rgb(251,204,165);
border: 1px solid #888;
}
.shortcut li {
float:left;
}
.nav_left {
color: #888;
margin-left: .7rem;
}
.nav_left i {
font-size: 1rem;
color:#F10215;
margin-right: .4rem;
}
.nav_right {
margin-left: 28rem;
}
.nav_right a {
text-decoration: none; /*取消下划线*/
color: #777;
font-size: .8rem;
}
.space { /* 竖线 */
width: 1px;
height: .6rem;
background-color: #CCC;
margin: .6rem 1rem 0;
}
/* 京东二维码 */
.mobile {
position: relative;
}
.mobile img {
position: absolute;
left: -0.5rem;
top: 2rem;
border:1px solid #CCC;
padding: 2px;
}
.middle {
height: 9rem;
background-color: #FFF;
}
/* logo图 */
.logo {
position:relative;
margin-left: 2rem;
padding-top: 1rem;
}
/* 输入框 */
.form {
position: relative;
width: 35rem;
height: 2rem;
top: -6.3rem;
left: 17.3rem;
}
.form input {
width: 30rem;
height: 2rem;
border: 2px solid #E2231A;
font-size: .5rem;
padding-left: 1rem;
float: left;
}
/* 相机 */
.fa-camera {
font-size: 1rem;
position: relative;
right: 3rem;
top: 0.5rem;
color: #888;
}
.form button {
background-color: #E2231A;
color: #FFF;
width: 3.5rem;
height: 2.25rem;
font-size: 1.1rem;
float:left;
position: relative;
top: -1.3rem;
}
/* 购物车 */
.shopcar {
width: 8.2rem;
height: 2.2rem;
line-height: 2.2rem;
position: relative;
top: -8.3rem;
margin-left:52rem;
font-size: .8rem;
border: 1px solid #e3e4e5;
text-align: center;
}
.shopcar a {
text-decoration: none;
}
.shopcar i {
font-size: 1rem;
margin-right: .8rem;
margin-left: -.5rem;
}
.shopcar span {
width: 1rem;
height: 1rem;
background-color: #F10215;
border-radius: 80%; /* 块变圆 */
position: absolute;
top: 2px;
left: 1.7rem;
font-size: .8rem;
color: #FFF;
line-height: 1rem;
}
/* 词 */
.hotwords {
position: relative;
top: -8rem;
left: 17rem;
font-size: 0.8rem;
color: #999;
}
.hotwords a{
text-decoration: none;
color: #999;
}
/* 小导航栏*/
.nav_bar {
position: relative;
font-size: .95rem;
left: 12rem;
top: -7rem;
}
.nav_bar a {
text-decoration: none;
color: #333;
margin: 0 .8rem;
}
/******************************** banner ********************************/
/* banner左边广告 */
/* banner左边 */
.grid {
height: 32rem;
float: left;
position: relative;
top: -3rem;
}
.grid_col1 {
width: 11.93rem;
height: 29.5rem;
background-color: #FEFEFE;
float: left;
margin-top: .8rem;
font-size: 1rem; /* 给/的大小 */
color: #666; /* 给/的颜色 */
}
.grid_col1 ul {
padding: .7rem 0;
}
.grid_col1 ul li {
padding-left: 1rem;
padding-top: .08rem; /* 每条li的间距 */
height: 1.5rem;
line-height: 1rem;
}
.grid_col1 a {
text-decoration: none;
font-size: .8rem; /* 给链接字大小 */
color:#333333;
margin: 0 0.2rem;
}
.grid_col1 ul li:hover {
background-color: #DDD;
}
/* 二级菜单 */
.gridli_box1 {
width: 100%;
height: 29.5rem;
display: none;
position: absolute;
left: 12rem;
top: .8rem;
z-index: 999;
display: none;
background-color: green;
}
.gridli_box2 {
width: 100%;
height: 29.25rem;
overflow: hidden;
display: none;
background-color: green;
}
.gridli_box3 {
width: 100%;
height: 29.25rem;
display: none;
background-color: green;
}
.gridli_box4 {
width: 100%;
height: 29.25rem;
display: none;
background-color: green;
}
/** banner中间 **/
.grid_col2 {
width: 36.857rem;
height: 29.5rem;
background-color: #FFF;
float: left;
margin-left: .8rem;
margin-top: .8rem;
float: left;
}
/* jquery扩展 */
/* 轮播图 */
.uli{
width: 36.857rem;
height: 29.5rem;
display: flex;
overflow: hidden;
}
.uli li>img{
position: relative;
left: 0px;
top: 0px;
height: 29.5rem;
}
/* 箭头 */
.grid_col2_t {
position: relative;
}
.arrow_left {
position: absolute;
top: 50%;
width: 1.562rem;
height: 2.187rem;
background-color: rgb(0,0,0,.3);
transform: translateY(-50%);
left: 0rem;
text-decoration: none;
text-align: center;
line-height: 2.1rem;
font-size: 1rem;
color: #FFF;
border-radius: 0 50% 50% 0;
}
.arrow_right {
position: absolute;
top: 50%;
width: 1.562rem;
height: 2.187rem;
background-color: rgb(0,0,0,.3);
transform: translateY(-50%);
text-decoration: none;
text-align: center;
line-height: 2.1rem;
font-size: 1rem;
color: #FFF;
border-radius: 50% 0 0 50%;
}
.arrow_right{
right: 0;
}
/* 触屏颜色变深 */
.arrow_left:hover {
background-color: rgb(0,0,0,.5);
color: #000!important;
}
.arrow_right:hover {
background-color: rgb(0,0,0,.5);
color: #000!important;
}
/* 轮播图的点 */
.cricle {
width: 10.93rem;
height: 1.25rem;
position: absolute;
left: 1.93rem;
bottom: 1.25rem;
}
.cricle li {
width: 0.6875rem;
height: 0.6875rem;
background-color: rgb(255, 255, 255,.4);
border-radius: 50%;
float: left;
margin: .2rem;
}
.cricle li:hover {
background-color: #FFF;
}
/* dinner右边广告 */
.grid_col3 {
width: 5rem;
float: left;
margin-top: .8rem;
margin-left: .5rem;
line-height: 2rem;
}
/* dinner最右边 */
.grid_col4 {
width: 11.87rem;
height: 29.5rem;
float: right;
position: relative;
left: 6.5rem;
margin-left: .8rem;
margin-top: .8rem;
}
/*登陆模块*/
.grid_login {
height: 4.375rem;
border-bottom: 1px solid #CCC;
background-color: #FFF;
font-size: .6rem;
padding: 1rem;
}
.login_words {
width: 6rem;
padding-left: 3.6rem;
margin-top: -3rem;
}
.grid_login a {
text-decoration: none;
color: #333333;
}
/* 新人福利 */
.login_extend1{
width: 4.375rem;
height: 1.25rem;
margin-top:1.2rem;
float: left;
background-color:#E1251B ;
text-align: center;
}
.login_extend1 a{
text-decoration: none;
color: #FFF;
}
.login_extend1 a:hover{
color: #FFF!important;
}
/* PLUS会员 */
.login_extend2{
width: 4.375rem;
height: 1.25rem;
margin-top:1.2rem;
margin-left: 1rem;
float: left;
background-color:#363634;
text-align: center;
}
.login_extend2 a {
text-decoration: none;
color: #E5D790;
}
.grid_news {
height: 8.1875rem ;
border-bottom: 1px solid #CCC;
background-color: #FFF;
}
/* 京东快报字 */
.news_words1 {
font-size: .8rem;
width: 8rem;
float: left;
font-weight: 700;
margin-left: .5rem;
margin-top: .5rem;
}
.news_words2 {
font-size: .8rem;
padding-top: .5rem;
}
/* 快报图 */
.news_hot {
margin-left: .5rem;
line-height: 1.5rem;
float: left;
}
/* 快报 */
.grid_news a {
text-decoration: none;
font-size: .7rem;
color: #666;
}
.news_words3 {
width: 7rem;
font-size: .8rem;
margin-left: 3.5rem;
position: absolute;
line-height: 1.5rem;
}
.grid_expand {
height: 14.9rem;
background-color: #FFF;
}
/********************* 内容 *********************/
.seckill {
height: 16.375rem;
width:100%;
background-color: #FFF;
float: left;
position: relative;
top: -3rem;
}
.seckill_countdown {
height: 16.375rem;
width:12rem;
text-decoration: none;
color: #FFF;
font-weight: 900;
font-size: 2rem;
float: left;
}
.seckill_countdown:hover {
color: #FFF!important;
}
.seckill_left {
width: 12rem;
text-align: center;
position:relative;
bottom: 14.4rem;
}
.seckill_bottom {
font-size: .8rem;
height: 1rem;
width: 7rem;
position: relative;
bottom: 7rem;
left: 5rem;
float: left;
}
.seckill_active {
width: 61.7rem;
height: 16.375rem;
background-color: #FFF;
overflow:hidden;
float: right;
}
.seckill_active a {
font-size: .7rem;
width: 100%;
height: 2rem ;
text-align: center;
color: black;
}
.seckill_money1 {
width:11rem;
text-align: center;
color: #E1251B;
font-size: .8rem;
font-weight: 800;
}
.seckill_active1 {
width: 12.2rem;
float: left;
border-right: 1px solid #DDD;
}
.seckill_active2 {
width: 12.2rem;
float: left;
border-right: 1px solid #DDD;
}
.seckill_active3 {
width: 12.2rem;
float: left;
border-right: 1px solid #DDD;
}
.seckill_active4 {
width: 12.2rem;
float: left;
border-right: 1px solid #DDD;
}
.seckill_active5 a{
width: 12.2rem;
height: 15.125rem;
margin-left: 0.5rem;
}
/* 侧边栏 */
.elevator {
position: fixed;
width: 4rem;
height: 24rem;
right: 16rem;
top: 30%;
background-color: #FFF;
}
.elevator_lk_text {
position: fixed;
width: 2rem;
height: 3.5rem;
position: relative;
text-align: center;
left: 1rem;
top: 1rem;
z-index: 3;
border-bottom: 1px solid #DDD;
}
.elevator_lk_box {
position: relative;
width: 5rem;
height: 5rem;
z-index: 5;
background-color: ;
font-size: .9rem;
}
.elevator_lk_text:hover .elevator{
background-color: #C81623;
}
/******************** 底部 ********************/
footer {
height: 32rem;
}
.service {
border-bottom: 1px solid #DEDEDE;
height:8rem;
padding-top: 5rem; /* 控制最下面与中间的距离 */
}
.service ul li {
width: 18rem;
height: 7.2rem;
position: relative;
line-height: 2.7rem;
float: left;
}
.service li h5 {
position: absolute;
top: .5rem;
height: 3.25rem;
}
.service li p {
margin: 0;
margin-left: 4rem;
padding-top: 2.15rem;
font-weight: 700;
font-size:1.12rem ;
color: #444;
width: 12rem;
}
/* 底部功能 */
.footer_fun {
height: 12.5rem;
border-bottom: 1px solid #DEDEDE;
box-sizing: border-box; /* 消除增出来的高度 */
}
/* 底部功能左边 */
.footer_left dl {
width:12.2rem;
float: left;
position: relative;
margin-top: 1rem;
}
.footer_left dt {
height: 1.875rem;
font-size: .875rem;
color: #666;
font-weight: 700;
}
.footer_left dd {
height: 1.38rem;
font-size: .75rem;
position: relative;
left: -2.45rem;
}
.footer_left a {
text-decoration: none;
color: #666;
}
/* 底部功能右边 */
.footer_right {
width: 12.5rem;
height: 12.2rem;
float: right;
margin-top: 1rem;
}
.footer_right h5 {
font-size: .875rem;
color: #666;
font-weight: 700;
position: relative;
bottom: 1.5rem;
left: 1.5rem;
}
.footer_right p {
height: 1.38rem;
font-size: .75rem;
color: #666;
position: relative;
bottom: 1.5rem;
}
.footer_right a {
text-decoration: none;
font-size: .75rem;
color: #666;
float: right;
}
/* 底部版权 */
.footer_copyright {
position: relative;
top: 10rem;
float: left;
left: 5rem;
text-align: center;
}
.footer_copyright a {
text-decoration: none;
font-size: .75rem;
color: #666;
}
.footer_copyright span {
font-weight: 100;
margin:0 .43rem;
font-size: .5rem;
}
.footer_copyright div {
margin-top:.5rem ;
}
.footer_copyright div p {
line-height:1.375rem;
font-size: .75rem;
color: #666;
}
/* 底部图 */
.footer_copyright img {
position:relative;
padding-right: 1rem;
top: .3rem;
}
