2019独角兽企业重金招聘Python工程师标准>>> 
下面是所有的京东css样式，图片我就不上传了，第一次尝试做京东页，难免会有一些错误和不足，可是 这也是起点。、。！下面是css代码：（有些代码没有备注，得结合上一篇博客结合着一起看。）
@charset "UTF-8";
.color_red {
color: #FF0000;
}
.Header_Zong{
width: 100%;
background-color: #b135f5;
}
.header {
height: 80px;
width:1190px;
overflow: -Scroll;
overflow-y: hidden;
position: relative;
}
.header_618 {
height: 80px;
}
.header_1 {
position: absolute;
z-index: 1;
}
.header_bg {
margin-left: 120px;
}
.logo {
width:190px;
height:170px;
float:left;
/* position: absolute;
top: 80px;
left: 120px;
z-index: 10; */
box-shadow: 1px -1px 6px #7e7e7e;
}
.Czx{
width: 100%;
height: 30px;
background-color: #e2e3e4;
}
Czx_1{
background-color: #e2e3e4;
}
/* LOGO右侧所有nav */
.Right_Zong{
width:1000px;
height:170px;
float:left;
}
.nav_zong {
width: 1190px;
height: 30px;
background-color: #e2e3e4;
}
.nav {
height: 30px;
width: 1190px;
margin-left: 0px;
}
.nav ul li {
float: right;
display: block;
height: 30px;
width: 80px;
line-height: 28px;
text-align: center;
}
.nav ul li a {
color: #b4b5b5;
font-size: x-small;
}
.nav ul li a:hover {
color: #c14231;
font-size: x-small;
}
/* 定位 */
.DingWei {
margin-right: 40px;
}
.Shu {
margin-left: 15px;
}
.Shu_1 {
margin-left: 20px;
color: #e2e3e4;
}
/* 右侧618 */
.Right_618 {
position: fixed;
top: 0px;
right: 0px;
z-index: 100;
}
/* 右侧固定定位 */
.Head_Shu{
width:6px;
height:100%;
background-color:#797a7b;
position:fixed;
right: 0px;
z-index: 1;
}
/* 右侧固定按钮上总 */
.Right_button_Zong{
width:34px;
height:216px;
position:fixed;
top:300px;
right: 1px;
z-index: 1;
}
.Right_button_Zong_1{
width:34px;
height:35px;
background-color:#797a7b;
border-radius: 3px;
margin-bottom:1px;
}
.Right_button_Zong_1:hover{
width:34px;
height:35px;
background-color:#ff0000;
}
.Right_button_Zong_1 img{
padding:6px;
width:20px;
height:20px;
}
/* 右侧固定按钮下总 */
.Right_button_Zong1{
width:34px;
height:70px;
top:711px;
position:fixed;
right: 0px;
z-index: 1;
}
.Right_button_Zong1_1{
width:34px;
height:35px;
background-color:#797a7b;
border-radius: 3px;
margin-bottom:1px;
}
.Right_button_Zong1_1:hover{
width:34px;
height:35px;
background-color:#ff0000;
}
.Right_button_Zong1_1 img{
padding:6px;
width:20px;
height:20px;
}
/* 搜索框 */
.search_Zong {
height: 100px;
width: 1190px;
overflow: -Scroll;
overflow-y: hidden;
}
.search {
width: 550px;
height: 35px;
margin-top: 25px;
background-color: #FFFFFF;
float: left;
}
.search_search {
height: 35px;
width: 50px;
float: right;
background-color: #de3029;
}
.search_search img {
width: 50%;
margin-top: 5px;
margin-left: 13px;
}
/* 相机 */
.search_camera {
margin-top: 7px;
margin-left: 460px;
width: 4%;
}
/* 间隔 */
.search_Kong_1 {
width: 30px;
height: 35px;
float: left;
}
.search_Kong {
width: 320px;
height: 35px;
float: left;
}
/* 购物车 */
.search_Shooping {
width: 180px;
height: 33px;
float: left;
margin-top: 25px;
background-color: #FFFFFF;
border: 1px solid #b4b5b5;
text-align: center;
color: #de3029;
line-height: 33px;
font-size: small;
}
.search_Shooping_icon {
width: 8%;
}
/* 二维码 */
.search_QRcode {
float: left;
}
.search_nav {
width: 550px;
}
.search_nav ul li {
float: left;
width: 60px;
line-height: 28px;
}
.search_nav ul li a {
color: #b4b5b5;
font-size: x-small;
}
.search_nav ul li a:hover {
color: #c14231;
font-size: x-small;
}
.Black_Zong{
width:100%;
}
.black_zong {
height: 40px;
width: 1190px;
overflow: -Scroll;
overflow-y: hidden;
}
.black_zong ul li {
float: left;
width: 70px;
line-height: 40px;
text-align: center;
}
.black_zong ul li a {
color: #000000;
font-size: small;
}
.black_zong ul li a:hover {
color: #ff0000;
font-size: small;
}
/* 中间部分 */
.middle_Zong {
width: 100%;
height: 490px;
background-image: url("../images/5b05a04cN69020713.png");
background-repeat: no-repeat;
background-position: -270px 0px;
overflow: -Scroll;
overflow-y: hidden;
}
.middle {
margin-left: 120px;
margin-top: 1px;
width: 1190px;
height: 490px;
overflow: -Scroll;
overflow-y: hidden;
}
.middle_left {
margin-top: 1px;
float: left;
width: 190px;
height: 490px;
background-color: #ffffff;
padding-top: 15px;
}
.middle_left ul li {
height: 26px;
font-size: small;
line-height: 26px;
color: #8b898a;
}
.middle_left ul li:hover {
background-color: #d9d9d9;
}
.middle_left ul li a {
color: #8b898a;
}
.middle_left ul li a:hover {
color: #ff0000;
}
.middle_middle {
float: left;
margin-left: 9px;
margin-top: 10px;
width: 591px;
height: 480px;
overflow: -Scroll;
overflow-y: hidden;
}
.middle_middle img {
width: 591px;
height: 480px;
}
/* 中间三个竖排的div广告 */
.middle_height {
overflow: -Scroll;
overflow-y: hidden;
float: left;
margin-left: 9px;
margin-top: 10px;
width: 190px;
height: 480px;
}
.middle_height_img {
width: 190px;
margin-bottom: 10px;
}
.middle_right {
float: right;
margin-left: 9px;
margin-top: -55px;
width: 190px;
height: 480px;
background-color: #FFFFFF;
box-shadow: 0px 6px 5px #8b898a;
}
.middle_right_top {
height: 160px;
}
/* 圆形头像 */
.TouXiang {
width: 65px;
height: 65px;
border-radius: 50%;
background-color: #e3e1df;
text-align: center;
position: relative;
left: 2px;
/* margin-top:-50px; */
/* 添加阴影 靠左0 靠上5 和6px阴影范围 阴影颜色为灰色 */
box-shadow: 1px 5px 7px #8b898a;
}
.TouXiang img {
margin-top: 5.5px;
width: 80%;
border-radius: 50%;
}
/* 头像下面文字 */
.hello {
margin-top: 66px;
text-align: center;
color: #8b898a;
font-size: small;
}
.hello a {
color: #8b898a;
}
.hello a:hover {
color: #ff0000;
}
.Xinrenfuli {
text-align: center;
float: right;
height: 25px;
width: 70px;
margin-top: 10px;
margin-right: 10px;
border-radius: 10px;
font-size: small;
line-height: 25px;
box-shadow: 1px 5px 5px #8b898a;
}
.Xinrenfuli:hover {
background-color: #ce312f;
}
.Xinrenfuli a {
color: #8b898a;
}
.Xinrenfuli a:hover {
color: #FFFFFF;
}
.Huiyuan {
text-align: center;
float: right;
margin-top: 10px;
margin-right: 25px;
height: 25px;
width: 70px;
border-radius: 10px;
background-color: #363634;
font-size: small;
line-height: 25px;
box-shadow: 1px 5px 5px #8b898a;
}
.Huiyuan:hover {
background-color: #ce312f;
}
.Huiyuan a {
color: #dab98b;
}
.Huiyuan a:hover {
color: #FFFFFF;
}
/* 最右侧中间部分 */
.middle_right_middle ul li {
width: 60px;
float: left;
font-size: small;
text-align: center;
}
.middle_right_middle a {
color: #8b898a;
}
/* 其中的一个下边框 */
.li_1 {
display: block;
border-bottom: 2px solid #ff0000;
}
.middle_right_middle_note {
margin-top: 10px;
margin-left: 10px;
}
.middle_right_middle_note li a {
color: #8b898a;
height: 24px;
font-size: small;
}
/* 下面的 话费机票样式 */
.middle_right_bottom ul li {
width: 45px;
float: left;
font-size: x-small;
height: 24px;
line-height: 24px;
text-align: center;
}
.middle_right_bottom a {
color: #8b898a;
}
.middle_right_bottom_1 ul li {
width: 60px;
float: left;
font-size: x-small;
height: 24px;
}
.middle_right_bottom_1 a {
color: #000000;
}
/* 杂碎的东西 */
.za {
margin-left: 10px;
font-size: x-small;
color: #8b898a;
}
/* 快速充值按钮 */
.Kuansucongzhi {
text-align: center;
margin: 10px 0px;
height: 25px;
width: 70px;
border-radius: 10px;
background-color: #FF0000;
font-size: small;
line-height: 25px;
}
.Kuansucongzhi a {
color: #FFFFFF;
}
/* 秒杀div */
MiaoSha_ZongDiv{
height: 275px;
width: 100%;
overflow: -Scroll;
overflow-y: hidden;
}
.MiaoSha_Zong {
margin-top: 30px;
height: 275px;
width: 1190px;
overflow: -Scroll;
overflow-y: hidden;
z-index: 0;
}
.MiaoSha_1 {
float: left;
width: 190px;
height: 275px;
background-color: #d6463c;
text-align: center;
color: #FFFFFF;
}
.MiaoSha_1 img {
width: 50px;
}
/* 小黑格子 */
.MiaoSha_block_Zong {
margin-top:0px;
width: 44px;
height: 40px;
float: left;
}
.MiaoSha_block {
margin-top: 1px;
margin-left: 5px;
width: 39px;
height: 19px;
background-color: #000000;
}
/* 数字 */
.Mb_1 {
width: 15px;
color: #FFFFFF;
font-size: 0.8cm;
position: absolute;
left: 10px;
}
.Mb_2 {
width: 15px;
color: #FFFFFF;
font-size: 0.8cm;
position: absolute;
left: 27px;
}
.Mb_3 {
width: 15px;
color: #FFFFFF;
font-size: 0.8cm;
position: absolute;
left: 53px;
}
.Mb_4 {
width: 15px;
color: #FFFFFF;
font-size: 0.8cm;
position: absolute;
left: 70px;
}
.Mb_5 {
width: 15px;
color: #FFFFFF;
font-size: 0.8cm;
position: absolute;
left: 96px;
}
.Mb_6 {
width: 15px;
color: #FFFFFF;
font-size: 0.8cm;
position: absolute;
left:113px;
}
/* ------------------ */
.MiaoSha_2 {
float: left;
margin-right: 1px;
width: 199px;
height: 275px;
text-align: center;
background-color: #FFFFFF;
overflow: -Scroll;
overflow-y: hidden;
}
.MiaoSha_2 span {
display: block;
margin-top: 5px;
font-size: small;
}
.MiaoSha_2 img {
width: 199px;
}
/* 秒杀价 */
.MiaoSha_2_red {
background-color: #FF0000;
float: left;
width: 80px;
height: 20px;
text-align: center;
color: #FFFFFF;
line-height: 20px;
}
/* 秒杀价原价 */
.MiaoSha_2_writ {
background-color: #FFFFFF;
float: left;
width: 80px;
height: 20px;
text-align: center;
color: #8a8a8a;
line-height: 20px;
text-decoration: line-through;
}
/* 浮动箭头 */
.left_Jt {
background-color: #d9d9d9;
position: relative;
top: 85px;
right: 90px;
width: 20px;
height: 40px;
}
.left_Jt img {
text-align: center;
width: 20px;
height: 40px;
width: 20px;
}
.right_Jt {
background-color: #d9d9d9;
position: relative;
top: 79px;
left: 89px;
width: 20px;
height: 40px;
}
.right_Jt img {
text-align: center;
width: 20px;
height: 40px;
}
/*主会场样式*/
.meeting-place {
float: left;
width: 1314px;
height: 571px;
margin-top: 30px;
background-image: url("../images/5b0405acN7d7b504a.png");
}
/* 带左浮动的内容 */
.meeting-place_note_Zong {
width: 100%;
}
.meeting-place_note_margin {
float: left;
margin: 10px 10px 10px 390px;
width: 174px;
height: 209px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_margin img {
width: 174px;
height: 209px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_margin img:hover {
width: 174px;
height: 209px;
opacity: 0.7;
filter: alpha(opacity = 70);
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note {
float: left;
margin: 10px 10px 10px 0px;
width: 174px;
height: 209px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note img {
width: 174px;
height: 209px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note img:hover {
width: 174px;
height: 209px;
opacity: 0.7;
filter: alpha(opacity = 70);
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_margin_1 {
float: left;
margin: 0px 10px 10px 390px;
width: 174px;
height: 209px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_margin_1 img {
width: 174px;
height: 209px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_margin_1 img:hover {
width: 174px;
height: 209px;
opacity: 0.7;
filter: alpha(opacity = 70);
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_1 {
float: left;
margin: 0px 10px 10px 0px;
width: 174px;
height: 209px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_1 img {
width: 174px;
height: 209px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_1 img:hover {
width: 174px;
height: 209px;
opacity: 0.7;
filter: alpha(opacity = 70);
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_margin_2 {
float: left;
margin: 0px 10px 10px 390px;
width: 174px;
height: 109px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_margin_2 img {
width: 174px;
height: 109px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_margin_2 img:hover {
width: 174px;
height: 109px;
opacity: 0.7;
filter: alpha(opacity = 70);
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_2 {
float: left;
margin: 0px 10px 10px 0px;
width: 174px;
height: 109px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_2 img {
width: 174px;
height: 109px;
overflow: -Scroll;
overflow-y: hidden;
}
.meeting-place_note_2 img:hover {
width: 174px;
height: 109px;
opacity: 0.7;
filter: alpha(opacity = 70);
overflow: -Scroll;
overflow-y: hidden;
}
/* 下一个分支 */
.grid_c1 {
height: 450px;
width: 1190px;
overflow: -Scroll;
overflow-y: hidden;
}
.box_top {
float: left;
width: 390px;
height: 430px;
background: #fff;
}
.box_top_hd {
height: 50px;
padding: 0 17px;
}
.box_top_hd img {
display:block;
float:left;
margin-top:13px;
width: 23px;
height: 23px;
}
.box_top_hd a {
color: #666;
text-decoration: none;
}
.box_tit {
float:left;
margin-right:5px;
font-size: 20px;
line-height: 50px;
}
.box_subtit {
font-size: 14px;
width: 135px;
height: 30px;
line-height: 50px;
margin: 7px 0 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.tab_item ul li {
float: left;
font-size: x-small;
text-align: center;
line-height: 30px;
width: 78px;
height: 30px;
background-color: #f7f7f7;
}
.tab_item ul li a {
color: #8e8e8e;
}
.tab_item ul li a:hover {
color: #ff0000;
}
.tab_body {
width: 100%;
height: 300px;
background-color: #FFFFFF;
}
.tab_body_1 {
width: 350px;
height: 100px;
margin: 0 20px;
}
.tab_body_1 img {
width: 88px;
height: 88px;
float: left;
}
.tab_Number {
float: left;
width: 30px;
height: 40px;
margin: 25px 0 0 10px;
color: #e74240;
line-height: 40px;
font-size: 34px;
text-align: center;
font-family: 'impact';
}
.top_item_name {
display: block;
padding-top: 30px;
height: 32px;
line-height: 16px;
font-size: 12px;
overflow: hidden;
color: #333;
}
/* hr分界线 */
.tab_hr {
width: 350px;
height: 2px;
margin: 0 20px;
background-color: #909090;
}
/* 小红点 */
.tab_circle {
margin: 0 auto;
line-height: 32px;
width: 370px;
height: 32px;
text-align: center;
poiotion: absolute;
}
/* 实心 */
.tab_circle_1 {
position: relative;
left: 165px;
margin-top: 9px;
margin-left: 10px;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FF0000;
}
/* 空心 */
.tab_circle_border {
position: relative;
left: 165px;
margin-left: 10px;
float: left;
margin-top: 8.5px;
width: 9px;
height: 9px;
border-radius: 50%;
border: 1px solid #7c7c7d;
}
/* 三个div的外边距 */
.m_1 {
float: left;
margin-left: 10px;
}
.middle_box {
width: 283px;
height: 130px;
}
.middle_box_img {
width: 283px;
height: 130px;
}
.middle_box_img_1 {
width: 261px;
height: 100px;
}
.middle_box_img_1 img {
float: left; width : 87px;
height: 87px;
width: 87px;
}
/* 中间图片下面的标题 */
.middle_box_sp {
margin-top: 10px;
margin-bottom: 10px;
width: 261px;
text-align: center;
}
.middle_box_sp a {
color: #000;
}
/* 中间图片下面的标题 */
.middle_box_note {
width: 261px;
text-align: center;
font-size: small;
margin-bottom: 3px;
}
.middle_box_note_1 {
width: 261px;
height:100px;
text-align: center;
font-size: small;
margin-bottom: 3px;
}
.middle_box_note a {
color: #7c7c7d;
}
/* 优惠券 */
.coupon_item {
width: 284px;
height: 110px;
background-color: #f6f6f6;
border-radius: 7px;
poiotion: absolute;
}
.coupon_img {
border-radius: 50%;
width: 80px;
height: 80px;
margin-top: 10px;
margin-left: 10px;
float: left;
}
/* 价钱 */
.coupon_price span {
width: 157px;
font-family: 'impact';
display: block;
height: 38px;
line-height: 38px;
color: #f00;
}
.coupon_limit {
margin-left: 5px;
color: #b1b3b0;
font-size: 14px;
}
.coupon_desc {
margin-left: 5px;
color: #767b77;
font-size: 14px;
}
/* 更多好券 */
.coupon_more {
float: right;
height: 100px;
line-height: 118px;
font-size: 12px;
width: 35px;
color: #333;
}
.coupon_more_inner {
display: inline-block;
width: 11px;
height: 110px;
line-height: 15px;
vertical-align: middle;
}
/* 相对定位的小圆 */
.tab_circle_2 {
position: relative;
top: 10px;
left: 80px;
margin-top: -20px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #FFF;
}
/* 夏天样式 */
.sunning{
width:350px;
height:195px;
}
.sunning_img{
width:350px;
height:195px;
}
/* 四个图片总 */
.ForImg_zong{
width:350px;
height:170px;
text-align:center;
}
.ForImg_zong_img{
float:left;
width:170px;
}
.ForImg_zong_img_a1 {
font-size:15px;
color:#ff0000;
}
.ForImg_zong_img_a2 {
font-size:15px;
color:#528a94;
}
.ForImg_zong_img img{
margin-left:12.5px;
width:140px;
height:140px;
}
/* 右侧一张大图片三张小图片 */
.box_right{
width:380px;
height:260px;
}
.box_right img{
width:380px;
height:260px;
}
/* 下面三个小图片 */
.box_right_img{
margin-top:10px;
margin-left:5px;
float:left;
width:123px;
height:100px;
}
.box_right_img img{
width:125px;
height:100px;
}
/* 极速先锋 */
.floorhd{
width:100%;
height:65px;
}
/* 中间的div */
.floorhd_looer{
widht:1190px;
height:45px;
}
/* 标题 */
.floorhd_looer_tit{
width:300px;
height:45px;
font-family: 'impact';
text-align:center;
}
/* 浮动箭头 */
.box_left_Jt {
margin-top:-40px;
background-color: #d9d9d9;
position: relative;
top: 245px;
right: 185px;
width: 20px;
height: 40px;
}
.box_left_Jt img {
text-align: center;
width: 20px;
height: 40px;
width: 20px;
}
.box_right_Jt {
background-color: #d9d9d9;
position: relative;
top: -219px;
left: 185px;
width: 20px;
height: 40px;
}
.box_right_Jt img {
text-align: center;
width: 20px;
height: 40px;
}
/* 一个大图两个小图模版div */
.sp_tit{
width:350px;
height:180px;
margin-bottom:10px;
}
.sp_tit img{
width:350px;
height:180px;
}
.sp_bottom{
float:left;
width:170px;
height:180px;
}
.sp_bottom img{
width:170px;
height:180px;
}
/* 右侧带5px边框的div */
.box_border{
margin-top:30px;
float:right;
border:5px solid #000;
width: 330px;
height: 390px;
}
.box_border_img{
background-color:#f1f3ef;
position: absolute;
woidth:300px;
height:400px;
}
/* 定位空背景 */
.box_bg{
width: 380px;
height: 430px;
}
/* 下一层*/
.Box_middle{
float: left;
width: 390px;
height: 430px;
}
.Box_border_img{
background-color:#f1f3ef;
position: absolute;
margin-left:30px;
woidth:300px;
height:400px;
}
.Box_border{
margin-top:30px;
float:left;
border:5px solid #000;
width: 330px;
height: 390px;
}
.Box_top_hd{
height: 100px;
padding: 0 17px;
}
.Box_top_hd img{
float:left;
width:128.5px;
height:60px;
border:1px solid #000;
margin-top:20px;
}
.Box_top_hd span{
float:left;
display:block;
height:100px;
line-height:100px;
margin-left:10px;
font-family: 'impact';
color:#000;
}
/* 中间四个div样式 */
.Four_St{
width:390px;
height:210px;
margin-bottom:10px;
}
.Four_St_bottom{
float:left;
width:190px;
height:210px;
text-align:center;
background-color:#FFF;
}
.Four_St_bottom img{
margin-top:15px;
width:100px;
height:100px;
}
Four_St_bottom_p1 a{
font-size:medium;
color:#626262;
}
.Four_St_bottom_p2 a{
font-size:larger;
color:#fd3727;
}
/* 三个图样式 */
.Sp_tit{
width:350px;
height:180px;
margin-bottom:10px;
}
.Sp_bottom{
float:left;
width:110px;
height:110px;
}
.Sp_bottom img{
width:110px;
height:110px;
}
/* 第三行 */
.HuanJi_img{
width:350px;
height:190px;
margin-bottom:20px;
}
.HuanJi_img img{
width:350px;
height:190px;
}
/* 单击变淡 */
.BianDan:hover{
opacity:0.6;
transition:opacity .2s linear;
}