1、index.html---主要搭建页面的结构
酷冷至尊(CoolerMaster)剑客K282C侧透版中塔机箱(支持ATX主板/USB3.0/背走线/电源下置/支持SSD) 黑色
¥
209.00
酷冷至尊(CoolerMaster)剑客K282C侧透版中塔机箱(支持ATX主板/USB3.0/背走线/电源下置/支持SSD) 黑色
¥
209.00
酷冷至尊(CoolerMaster)剑客K282C侧透版中塔机箱(支持ATX主板/USB3.0/背走线/电源下置/支持SSD) 黑色
¥
209.00
酷冷至尊(CoolerMaster)剑客K282C侧透版中塔机箱(支持ATX主板/USB3.0/背走线/电源下置/支持SSD) 黑色
¥
209.00
酷冷至尊(CoolerMaster)剑客K282C侧透版中塔机箱(支持ATX主板/USB3.0/背走线/电源下置/支持SSD) 黑色
¥
209.00
品类齐全，轻松购物
品类齐全，轻松购物
品类齐全，轻松购物
品类齐全，轻松购物
关于我们
|
关于我们
|
关于我们
|
关于我们
|
关于我们
|
关于我们
|
关于我们
|
关于我们
|
关于我们
|
关于我们
|
关于我们
|
关于我们
|
关于我们
京公网安备11000002000088号
|
京ICP证070359号
|
互联网药品信息服务资格证编号（京）-经营性-2014-0008
|
新出发京零 字第大120007号
互联网出版许可证编号新出网证（京）字150号
|
出版物经营许可证
|
网络文化经营许可证京网文[2014]2148-343号
|
违法和不良信息举报电话：12345678
Copyright @ 2014-2017
京东JD.com版权所有
|
消费者维权热线：4006067733
经营证照
2、base.css---主要写一些样式重置的代码
/*样式重置*/
body,p,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,input,textarea{
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #999;
}
li {
list-style: none;
}
img,input {
outline: none;
vertical-align: middle;
border: 0;
}
body {
font-size: 12px;
font-family: "微软雅黑";
color: #999;
background-color: #f6f6f6;
}
table {
border-collapse: collapse;
}
/*放置一些公共的样式*/
.clear:after {
display: block;
content: "";
clear: both;
}
/*IE兼容*/
.clear {
zoom: 1;
}
.fl {
float: left;
}
.fr {
float: right;
}
.w {
width: 1190px;
margin: 0 auto;
}
3、head.css---主要写页面顶部的样式
/*顶部广告样式开始*/
.head_banner {
height: 80px;
background-color: #d32338;
}
.head_banner .w {
position: relative;
}
.head_banner .w .close {
display: block;
width: 20px;
height: 20px;
font-size: 13px;
color: rgba(255,255,255,0.3);
line-height: 20px;
text-align: center;
background-color: rgba(0,0,0,0.3);
position: absolute;
top: 5px;
right: 5px;
}
.head_banner .w .close:hover {
color: rgba(255,255,255,0.8);
background-color: rgba(0,0,0,0.8);
}
/*顶部广告样式结束*/
/*头部导航部分开始*/
.head_nav {
height: 30px;
background-color: #e3e4e5;
border-bottom: 1px #ddd solid;
}
.head_nav .w ul.fl li {
margin-left: 200px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px #e3e4e5 solid;
border-bottom: none;
}
.head_nav .w ul.fl li:hover{
background-color: #fff;
border: 1px #e3e4e5 solid;
border-bottom: none;
}
.head_nav .w ul.fl li .iconfont {
/*margin-left: 10px;*/
color: #f10215;
}
/*.head_nav .w .fl .iconfont:hover {
background-color: #fff;
border: 1px #eee solid;
border-bottom: none;
}*/
.head_nav .w ul.fr li {
/*height: 10px;*/
padding: 0 6px;
line-height: 30px;
float: left;
}
.head_nav .w ul.fr li a.red {
color: red;
}
.head_nav .w ul.fr li a:hover{
color: #f10215;
}
.head_nav .w ul.fr li .iconfont {
font-size: 9px;
}
.head_nav .w ul.fr li.line {
width: 1px;
height: 10px;
padding: 0; /*li设置了padding撑开，line不用撑开，把padding设为0*/
background-color: #cccccc;
margin: 11px 6px 0 6px;
}
/*.head_nav .w .fr li a {
font-size: 12px;
color: #999;
}
.head_nav .w .fr a:hover {
font-size: 12px;
color: #f10215;
}*/
.head_nav .w .fr li .public {
/*font-size: 9px;*/
border: 1px #e3e4e5 solid;
border-bottom: none;
height: 29px;
}
.head_nav .w .fr li .public:hover {
background-color: #fff;
border: 1px #ccc solid;
border-bottom: none;
}
/*小三角样式*/
.head_nav .w .fr li.mobile {
position: relative;
}
.head_nav .w .fr li.mobile:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 8px transparent solid;
border-right: 8px transparent solid;
border-bottom: 8px #fff solid;
border-left: 8px transparent solid;
position: absolute;
top: 18px;
left: 20px;
}
/*二维码样式*/
.head_nav .w .fr li.mobile i {
width: 58px;
height: 58px;
border: 1px #ccc solid;
display: block;
background: url(../img/mobile_qrcode.png) no-repeat center;
position: absolute;
left: 0px;
top: 31px;
}
/*头部导航部分结束*/
/*头部搜索区域开始*/
.head_search {
height: 140px;
}
.head_search .w {
position: relative;
}
.head_search .w .logo {
float: left;
position: absolute;
top: -30px;
/*margin-top: -30px;*/
box-shadow: 0px 0px 10px #ccc;
}
.head_search .w .search {
width: 548px;
height: 33px;
float: left;
margin-top: 25px;
margin-left: 320px;
border: 1px #f10215 solid;
position: relative;
}
.head_search .w .search .text {
width: 498px;
height: 33px;
float: left;
text-indent: 4px; /*input框里的字体缩进*/
}
.head_search .w .search .btn {
width: 50px;
height: 33px;
background-color: #f10215;
float: left;
}
.head_search .w .search .iconfont {
position: absolute;
top: 7px;
right: 13px;
color: #fff;
font-size: 20px;
}
.head_search .w .shopcart {
float: left;
width: 188px;
height: 33px;
line-height: 33px;
text-align: center;
font-size: 12px;
color: #f10215;
background-color: #fff;
border: 1px #e3e4e5 solid;
margin-top: 25px;
margin-left: 35px;
position: relative;
}
.head_search .w .shopcart em {
display: block;
font-style: normal;
width: 14px;
height: 14px;
color: #fff;
line-height: 14px;
text-align: center;
border-radius: 50%;
background-color: #f10215;
position: absolute;
top: 5px;
right: 34px;
}
/*热词搜索样式*/
.head_search .w .hotwords {
float: left;
margin-left: 320px;
margin-top: 10px;
}
.head_search .w .hotwords ul li {
float: left;
font: 12px/12px "微软雅黑";
margin-right: 10px;
}
.head_search .w .hotwords a.red {
color: red;
}
.head_search .w .hotwords a:hover {
color: red;
}
/*主导航栏样式*/
.head_search .w .main_nav {
float: left;
margin-left: 230px;
margin-top: 31px;
}
.head_search .w .main_nav ul li {
float: left;
font: 700 16px/16px "微软雅黑";
margin-right: 30px;
}
.head_search .w .main_nav ul li.line {
width: 1px;
height: 10px;
background-color: #ccc;
margin: 3px 20px 0 -10px;
}
.head_search .w .main_nav ul li a {
color: #555;
}
.head_search .w .main_nav ul li a:hover {
color: red;
}
/*小广告*/
.head_search .w .small_banner {
margin-top: 12px;
display: block;
float: right;
}
/*头部搜索区域结束*/
4、index.css---主要写轮播图部分和秒杀部分的样式
/*轮播区域样式*/
.con_lunbo {
height: 480px;
background: url(../img/a-bg.png) no-repeat center;
z-index: -1;
} /*背景图被压在版心下面，但是重新敲一遍，保存一遍就可以了，为什么？？*/
/*左侧导航列表样式*/
.con_lunbo .w .side_nav {
width: 190px;
height: 480px;
background-color: #6e6568;
}
.con_lunbo .w .side_nav ul {
margin-top: 16px;
}
.con_lunbo .w .side_nav ul li {
height: 30px;
font: 12px/30px "微软雅黑";
color: #fff;
padding-left: 12px;
}
.con_lunbo .w .side_nav ul li:hover {
background-color: rgba(255,255,255,0.3);
}
.con_lunbo .w .side_nav ul li a {
color: #fff;
}
.con_lunbo .w .side_nav ul li a:hover {
color: red;
}
/*中间轮播区域样式*/
.con_lunbo .w .lunbo {
width: 790px;
height: 480px;
margin: 0 10px;
}
.con_lunbo .w .lunbo .lb {
height: 340px;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.con_lunbo .w .lunbo .lb ul {
width: 8000px;
}
.con_lunbo .w .lunbo .lb ul li {
/*width: 790px;
height: 340px;*/
float: left;
}
.con_lunbo .w .lunbo .box_img {
height: 130px;
}
.con_lunbo .w .lunbo .lb ol.lb_nav {
width: 182px;
height: 12px;
padding: 4px 9px;
border-radius: 9px;
background-color: rgba(255,255,255,0.5);
position: absolute;
left: 50%;
bottom: 20px;
margin-left: -91px;
}
.con_lunbo .w .lunbo .lb ol.lb_nav li {
float: left;
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 50%;
margin-right: 10px;
}
.con_lunbo .w .lunbo .lb ol.lb_nav li:nth-last-child(1) {
margin: 0;
}
.con_lunbo .w .lunbo .lb ol.lb_nav li.active {
background-color: red;
}
/*右侧生活列表样式*/
.con_lunbo .w .life_list {
width: 190px;
height: 480px;
background-color: #fff;
}
/*上边登录部分样式*/
.con_lunbo .w .life_list .life_top {
width: 190px;
height: 115px;
border-bottom: 1px #e6e6e6 solid;
}
.con_lunbo .w .life_list .life_top img {
width: 45px;
height: 45px;
border-radius: 50%;
margin: 15px 10px 10px;
float: left;
}
.con_lunbo .w .life_list .life_top p {
float: left;
font: 11px/11px "微软雅黑";
color: #666;
/*margin-top: 21px;
margin-left: 15px;
margin-bottom: 9px;*/
margin: 21px 0 15px;
}
.con_lunbo .w .life_list .life_top a {
float: left;
font: 11px/11px "微软雅黑";
color: #000;
font-weight: bold;
margin-right: 9px;
}
.con_lunbo .w .life_list .life_top a:nth-child(1) { /*不起作用*/
margin-top: 15px; /*a是行内元素，没有margin，设置浮动以后就有margin了*/
}
.con_lunbo .w .life_list .life_top a:hover {
color: red;
}
.con_lunbo .w .life_list .life_top .fuli {
width: 168px;
height: 24px;
float: left;
margin-top: 15px;
}
.con_lunbo .w .life_list .life_top .fuli a {
float: left;
display: block;
width: 70px;
height: 20px;
border: 2px #e01222 solid;
font: 11px/20px "微软雅黑";
text-align: center;
color: #e01222;
background-color: #fff;
margin: 0 10px;
}
.con_lunbo .w .life_list .life_top .fuli a:nth-child(2) {
margin: 0;
}
.con_lunbo .w .life_list .life_top .fuli a:hover {
color: #fff;
background-color: #e01222;
}
/*中间促销部分样式*/
.con_lunbo .w .life_list .life_middle {
width: 160px;
height: 147px; /*154px-7px*/
margin: 0 auto;
}
.con_lunbo .w .life_list .life_middle .life_title {
width: 147px; /*160px-13px*/
height: 15px; /*17px-2*/
margin-top: 7px;
border-bottom: 1px #e6e6e6 solid;
padding-bottom: 2px;
}
.con_lunbo .w .life_list .life_middle .life_title a {
float: left;
font: 11px "微软雅黑";
color: #333;
font-weight: bold;
}
.con_lunbo .w .life_list .life_middle .life_title a.sale {
border-right: 1px #e6e6e6 solid;
padding-right: 13px;
}
.con_lunbo .w .life_list .life_middle .life_title a.gonggao {
margin-left: 15px;
}
.con_lunbo .w .life_list .life_middle .life_title a.more {
float: right;
}
.con_lunbo .w .life_list .life_middle .life_con {
height: 127px;
}
.con_lunbo .w .life_list .life_middle .life_con a {
font: 11px/23px "微软雅黑";
color: #666;
float: left;
}
.con_lunbo .w .life_list .life_middle .life_con a:nth-child(1) { /*不生效，问题同上*/
margin-top: 19px;
}
.con_lunbo .w .life_list .life_middle .life_con a:hover {
color: red;
}
/*下边生活服务部分样式*/
.con_lunbo .w .life_list .life_bottom {
width: 190px;
height: 210px;
}
.con_lunbo .w .life_list .life_bottom {
overflow: hidden;
}
.con_lunbo .w .life_list .life_bottom ul {
width: 192px;
overflow: hidden; /*为什么不起作用?????? 应该给ul的父元素设置overflow: hidden;*/
}
.con_lunbo .w .life_list .life_bottom ul li {
float: left;
width: 47px;
height: 69px;
border-top: 1px #e6e6e6 solid;
border-right: 1px #e6e6e6 solid;
position: relative;
}
.con_lunbo .w .life_list .life_bottom ul li a i {
display: block;
width: 15px;
height: 18px;
background: url(../img/[email protected]) no-repeat -4px -88px;
text-align: center;
margin: 15px 16px 10px 15px;
}
.con_lunbo .w .life_list .life_bottom ul li:nth-child(2) a i { /*不生效 */
width: 20px; /*li包含a，应该是第二个li里的a，而不是第二个a*/
height: 20px;
background-position: -2px -45px;
margin-top: 17px;
margin-left: 13px;
}
.con_lunbo .w .life_list .life_bottom ul li a p { /*不生效*/
font-size: 11px "微软雅黑"; /*刚开始设置的是span，span是行内元素，text-align: center;不起作用*/
color: #666;
text-align: center;
}
.con_lunbo .w .life_list .life_bottom ul li a b {
display: block;
width: 13px;
height: 16px;
background: url(../img/jian.png) no-repeat;
position: absolute;
top: 0;
right: 0;
}
/*秒杀部分样式*/
.con_ms {
height: 305px;
margin-top: 10px;
}
/*标题左侧样式*/
.con_ms .w .title {
height: 55px;
background: url(../img/seckill_hd.png) no-repeat;
}
.con_ms .w .title .left_title .corner {
display: block;
width: 25px;
height: 25px;
background: url(../img/[email protected]) no-repeat -190px -48px;
float: left;
margin-top: -2px;
margin-left: -1px;
}
.con_ms .w .title .left_title .clock {
display: block;
width: 34px;
height: 40px;
background: url(../img/[email protected]) no-repeat 0px -39px;
float: left;
margin-top: 8px;
margin-left: 31px;
}
.con_ms .w .title .left_title h4 {
float: left;
font: 24px/24px "微软雅黑";
color: #fff;
margin-left: 10px;
margin-top: 16px;
}
.con_ms .w .title .left_title a {
float: left;
font-size: 13px;
color: #fff;
margin-left: 15px;
margin-top: 25px;
}
.con_ms .w .title .left_title a i.right_arrow {
display: inline-block;
background: url(../img/[email protected]) no-repeat -153px -39px;
width: 16px;
height: 17px;
vertical-align: top;
}
/*标题右侧时间样式*/
.con_ms .w .title .right_time .left_text {
width: 55px;
height: 28px;
margin-top: 27px;
margin-right: 7px;
font: 12px/12px "微软雅黑";
color: #fff;
}
.con_ms .w .title .right_time span {
float: left;
}
.con_ms .w .title .right_time span.hours,span.min,span.sec {
width: 35px;
height: 37px;
background-color: #440106;
border-radius: 3px;
font: 12px/37px "微软雅黑";
color: #f90013;
text-align: center;
margin-top: 10px;
}
.con_ms .w .title .right_time span.dot {
width: 4px;
height: 12px;
/*margin-top: 22px;*/
margin: 22px 4px 0;
}
.con_ms .w .title .right_time span.dot i {
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #440106;
}
.con_ms .w .title .right_time span.dot i:nth-child(1) {
margin-bottom: 4px;
}
.con_ms .w .title .right_time .right_text {
width: 70px;
height: 28px;
/*margin-top: 27px;
margin-left: 7px;
margin-right: 22px;*/
margin: 27px 22px 0 7px;
font: 12px/12px "微软雅黑";
color: #fff;
}
/*下侧商品区域样式*/
.con_ms .w .content .shopping {
height: 250px;
background-color: #fff;
float: left;
}
.con_ms .w .content .shopping ul li {
float: left;
width: 199px;
height: 225px;
border-right: 1px #e7e7e7 solid;
}
.con_ms .w .content .shopping ul li a {
display: block;
width: 184px;
height: 195px;
margin-left: 15px;
text-align: center;
margin-bottom: 11px;
position: relative;
}
.con_ms .w .content .shopping ul li a b.shop_icon {
width: 30px;
height: 40px;
display: block;
position: absolute;
z-index: 2;
color: #fff;
text-align: center;
line-height: 40px;
font-weight: normal;
background: url(../img/[email protected]) no-repeat -53px -39px;
}
.con_ms .w .content .shopping ul li a img {
position: relative;
top: 13px;
}
.con_ms .w .content .shopping ul li a p {
text-align: left;
margin-top: 15px;
height: 28px;
line-height: 14px;
overflow: hidden; /*溢出内容隐藏*/
}
.con_ms .w .content .shopping ul li p.price span.newPrice {
color: red;
margin-left: 15px;
float: left;
}
.con_ms .w .content .shopping ul li p.price span.newPrice i {
font-size: 9px;
font-size: normal;
}
.con_ms .w .content .shopping ul li p.price span.newPrice span {
font-size: 14px;
font-weight: bold;
}
.con_ms .w .content .shopping ul li .oldPrice {
font-size: 9px;
float: left;
margin-left: 10px;
margin-top: 2px;
}
.con_ms .w .content .shopping ul li span.shadow {
width: 170px;
height: 22px;
display: block;
background: url(../img/[email protected]) no-repeat;
}
/*下侧右边广告区域样式*/
.con_ms .w .content .big_Img {
width: 190px;
float: left;
}
.con_ms .w .content .big_Img img {
float: left;
}
5、foot.css---主要写页面底部的样式
.foot {
height: 567px;
background-color: #eaeaea;
}
/*上面 多快好省部分样式*/
.foot .foot_top {
height: 102px;
border-bottom: 1px #dedede solid;
}
/*.foot .foot_top .w {
height: 102px;
border-bottom: 1px #dedede solid;
}*/
.foot .foot_top .w ul li {
float: left;
width: 297px;
height: 102px;
line-height: 102px;
/*text-align: center;*/
font-weight: bold;
}
.foot .foot_top .w ul li h5 {
float: left;
width: 36px;
height: 42px;
margin-top: 30px;
margin-left: 36px;
line-height: 42px;
text-align: center;
font-size: 20px;
color: #e01121;
text-indent: -999999px; /*1、优化 2、客户体验*/
background: url(../img/ico_service.png) no-repeat;
}
.foot .foot_top .w ul li:nth-child(2) h5 {
/*background: url(../img/ico_service.png) no-repeat 0 -43px;*/
background-position: 0 -43px;
}
.foot .foot_top .w ul li:nth-child(3) h5 {
/*background: url(../img/ico_service.png) no-repeat 0 -85px;*/
background-position: 0 -85px;
}
.foot .foot_top .w ul li:nth-child(4) h5 {
/*background: url(../img/ico_service.png) no-repeat 0 -127px;*/
background-position: 0 -127px;
}
.foot .foot_top .w ul li p {
float: left;
margin-left: 10px;
font-size: 18px;
color: #444444;
}
/*中间服务部分*/
/*.foot .service {
height: 200px;
}*/
.foot .service .w {
/*height: 200px;*/
border-bottom: 1px #ddd solid;
}
/*.foot .service .w .service_list {
}*/
.foot .service .service_list dl {
float: left;
width: 198px;
}
.foot .service .service_list dl dt {
margin-top: 26px;
margin-bottom: 15px;
font: 13px/13px "微软雅黑";
color: #666666;
font-weight: bold;
}
.foot .service .service_list dl dd {
margin-bottom: 11px;
font: 11px/11px "微软雅黑";
}
.foot .service .map {
width: 200px;
background: url(../img/ico_footer.png) no-repeat;
height: 172px; /*不知道172怎么来的？？？？？？*/
background-position: 0 22px;
}
.foot .service .map h5 {
margin-top: 25px;
font: 13px/13px "微软雅黑";
font-weight: bold;
color: #666666;
text-align: center;
}
.foot .service .w .map p {
margin: 23px 20px 0 10px;
font: 11px "微软雅黑";
line-height: 18px;
}
.foot .service .map a {
float: right;
}
.foot .service .map a:hover {
color: red;
}
/*尾部版权部分*/
.foot .copyright p {
margin-bottom: 9px;
text-align: center;
}
.foot .copyright p:nth-child(1) {
margin-top: 19px;
margin-bottom: 17px;
font: 12px/12px "微软雅黑";
font-weight: bold;
}
.foot .copyright p a {
margin: 0 9px;
}
.foot .copyright p a {
font: 13px/13px "微软雅黑";
color: #666;
text-align: center;
}
.foot .copyright p.pic_href {
width: 678px; /*不知道678怎么来的？？测的是640*/
margin: 0 auto;
}
.foot .copyright p.pic_href a {
float: left;
display: block;
width: 103px;
height: 32px;
background: url(../img/ico_footer.png) no-repeat;
background-position: 0 -150px;
margin: 0;
margin-right: 10px;
}
.foot .copyright p.pic_href a:nth-child(2) {
background-position: -104px -150px;
}
.foot .copyright p.pic_href a:nth-child(3) {
background-position: 0px -183px;
}
.foot .copyright p.pic_href a:nth-child(4) {
background-position: -104px -183px;
}
.foot .copyright p.pic_href a:nth-child(5) {
background-position: 0px -216px;
}
.foot .copyright p.pic_href a:nth-child(6) {
background-position: -104px -216px;
}
/*固定底部年货样式*/
.box_fix {
width: 1334px;
height: 95px;
background: url(../img/footer-fix.png) no-repeat;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -667px;
}
.box_fix>img:nth-child(1) {
margin-left: 104px;
}
.box_fix img {
margin-top: 15px;
}
.box_fix a:nth-child(2) {
margin-left: 76px;
}
这是我写的京东首页的代码，主要用的是html和css，有很多不足之处，希望各位大神多多指教。
