Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
终于走到了这一天吗
......
html部分：
前端59期html+css结业《潭州汪涵商城》
-
京东秒杀
FLASH DEALS
本场距离结束还剩
23:59:59
-
诺基亚7 PLUS（Nokia 7 Plus）
￥ 5499.00
￥ 5799.00
-
诺基亚7 PLUS（Nokia 7 Plus）
￥ 5499.00
￥ 5799.00
-
诺基亚7 PLUS（Nokia 7 Plus）
￥ 5499.00
￥ 5799.00
-
诺基亚7 PLUS（Nokia 7 Plus）
￥ 5499.00
￥ 5799.00
-
诺基亚7 PLUS（Nokia 7 Plus）
￥ 5499.00
￥ 5799.00
汪涵精选
css部分1，base.css：
@charset "utf-8";
/* 名称：base.css
功能：
1、重设浏览器默认样式
2、设置通用元素类
*/
/* 1、防止用户自定义背景颜色对网页的影响；2、让用户可以自定义字体颜色 */
html{
background:white;
color:black;
}
/* 去除标签的默认内外边距，让各个浏览器样式的表现位置统一 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
margin:0;
padding:0;
}
/* 对于表单元素不继承父级font的问题设置样式 */
body,button,input,select,textarea{
font:12px \5b8b\4f53,arial,sans-serif;
}
input,select,textarea{
font-size:100%;
}
/* 去掉 table cell 的边距并让其边重合 */
table{
border-collapse:collapse;
border-spacing:0;
}
/* ie浏览器bug：th不继承text-align问题设置样式 */
th{
text-align:inherit;
}
/* 去除默认边框 */
fieldset,img{
border:none;
}
/* 去除列表前的标识，li会继承样式 */
ul,ol{
list-style:none;
}
/* 默认不显示下划线，保持页面简洁 */
a,ins{
text-decoration:none;
}
/* 让链接在hover状态下显示下划线 */
a:hover{
text-decoration:none;
}
/*设置浮动，减少浮动带来的bug*/
.fl,.fr{
display:inline;
}
.fl{
float:left;
}
.fr{
float:right;
}
/* 清除浮动 */
.clearfix:after{
content:'';
display:block;
clear:both;
}
css部分2，header.css：
@charset "utf-8";
/* 名称：header.css
功能：商城页面头部布局样式（导航栏）
*/
body{
background-color:rgb(232,232,232);
}
/* 最外层样式布局 */
.wrapper{
width:100%;
}
/* 顶端临时广告位样式 */
.wrapper .linshi{
font-size:0px;
/* text-align:center; */
background-color:rgb(36,163,195);
}
.linshi .l1{
position:relative;
width:1190px;
margin:0px auto;
}
.linshi .l1 div{
position:absolute;
top:50%;
left:50%;
margin-top:-35px;
margin-left:571px;
width:20px;
height:20px;
border-radius:50%;
background-color:rgb(255,255,255);
}
/* 导航栏1样式 */
.nav .nav_top .t1{
position:relative;
background-color:rgb(226,227,228);
margin:0px auto;
padding:9px 0px;
width:1190px;
}
.nav_top .t1 .tlogo{
position:absolute;
top:50%;
left:50%;
margin-top:-18px;
margin-left:-595px;
width:190px;
font-size:0px;
box-shadow:0px 0px 20px 2px rgb(178,178,178);
z-index:9;
}
.t1a ul li{
position:relative;
display:inline-block;
padding:0px 10px;
/* border-right:1px solid rgb(152,152,152); */
}
.t1a ul li + li:before{
position:absolute;
top:2px;
left:0px;
width:1px;
height:12px;
content:'';
background-color:green;
}
.t1a ul li.ttext{
border:none;
}
.t1a ul li.tadd{
width:250px;
text-align:right;
border:none;
line-height:16px;
}
.t1a ul li.tadd div.ticon{
display:inline-block;
width:16px;
height:16px;
background:url('../icons/001.png') 0px -1px;
vertical-align: middle;
}
.t1a ul li a{
color:rgb(152,152,152);
line-height:16px;
vertical-align: middle;
}
.t1a ul li .taddb{
position:absolute;
top:50%;
left:50%;
margin-left:62px;
margin-top:-18px;
width:300px;
/* border:1px solid rgb(203,203,203); */
z-index:9;
display:none;
}
.taddb .b1{
position:relative;
width:66px;
height:35px;
background-color:rgb(255,255,255);
text-align:center;
border:1px solid rgb(203,203,203);
border-bottom:none;
border-top:none;
z-index:3;
}
.taddb .b1 .b1b{
padding-top:9px;
}
.taddb .b2{
position:relative;
top:-1px;
left:0px;
width:300px;
min-height:266px;
background-color:rgb(255,255,255);
border:1px solid rgb(203,203,203);
}
.taddb .b2 p{
text-align:left;
line-height:30px;
}
.taddb .b2 p a{
margin:0px 12px;
}
.tadd:hover .taddb{
display:block;
}
/* 导航栏2样式 */
.nav .nav_top .t2{
position:relative;
width:1190px;
margin:0px auto;
}
.nav_top .t2 .t2b{
position:relative;
width:778px;
margin-left:300px;
}
.t2b input.bp1{
width:500px;
height:31px;
text-indent:12px;
margin:26px 0px;
background:rgb(255,255,255) url('../icons/008.png') no-repeat 469px 7px/22px;
}
.t2b input.bp2{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:115px;
width:50px;
}
.t2b .b3{
position:relative;
top:-18px;
left:0px;
}
.t2b .b3 a{
margin-right:6px;
color:rgb(152,152,152);
}
.t2b .b4{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:187px;
width:200px;
height:33px;
background-color:rgb(255,255,255);
border:1px solid rgb(203,203,203);
vertical-align: middle;
}
.t2b .b4 .b4b{
width:90px;
margin:9.5px auto;
}
.t2b .b4 .bicon{
display:inline-block;
width:16px;
height:16px;
background:url('../icons/003.png') 0px -1px/16px;
vertical-align: middle;
}
.b4b a{
color:rgb(152,152,152);
}
/* 导航栏3样式 */
.nav .nav_top .t3{
position:relative;
width:1190px;
margin:0px auto;
text-align:right;
}
/* .t3 .t3b{
position:relative;
width:990px;
text-align:right;
} */
.t3b .b1{
display:inline-block;
line-height:36px;
vertical-align: middle;
}
.t3b .b1 a{
padding:0px 15px;
border-right:1px solid rgb(152,152,152);
color:rgb(50,50,50);
}
.t3b .b1 a.t3text{
border:none;
}
.t3b img{
display:inline-block;
vertical-align: middle;
margin-left:38px;
}
/* 导航栏4样式 */
.nav .nav_top .t4{
position:relative;
width:1190px;
margin:0px auto;
}
.linshi2{
position:absolute;
top:50%;
left:50%;
margin-top:-220px;
margin-left:-845px;
font-size:0px;
width:1040px;
height:470px;
}
.linshi2 .l21{
width:250px;
height:470px;
}
.linshi2 .l22{
position:absolute;
top:-5px;
left:250px;
display:none;
z-index:1;
}
.l21:hover .l22{
display:block;
}
.t4b .b1{
position:relative;
width:1190px;
}
.t4b .b1 ul{
width:190px;
padding:7px 0px;
background-color:rgb(255,255,255);
}
.t4b .b1 ul li{
line-height:28px;
padding:0px 12px;
}
.t4b .b1 ul li a{
color:rgb(152,152,152);
}
.t4b .b1 .bhb,.bhb2,.bhb3,.bhb4,.bhb5,.bhb6,.bhb7,.bhb8,.bhb9,.bhb10,.bhb11,.bhb12,.bhb13,.bhb14,.bhb15,.bhb16,.bhb17{
position:absolute;
top:50%;
left:50%;
margin-top:-245px;
margin-left:-405px;
width:976px;
height:476px;
padding:7px 12px;
box-shadow:0px 0px 20px 2px rgb(178,178,178);
z-index:9;
display:none;
}
.t4b .b1 ul li div div.a1 a{
height:28px;
line-height:28px;
padding:0px 12px;
margin-right:10px;
background-color:rgb(0,0,0);
color:rgb(255,255,255);
}
.t4b .b1 ul li div div.a2{
padding:25px 0px;
}
.t4b .b1 ul li div div.a2 div{
margin-bottom:18px;
}
.t4b .b1 ul li div div.a2 div a{
color:rgb(255,255,255);
}
.t4b .b1 ul li div div.a2 .aimg1{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:258px;
}
.t4b .b1 ul li div div.a2 .aimg2{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:296px;
}
.t4b .b1 ul li div div.a2 .aimg3{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:288px;
}
.t4b .b1 ul li div div.a2 .aimg4{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:270px;
}
.t4b .b1 ul li div div.a2 .aimg5{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:250px;
}
.t4b .b1 ul li div div.a2 .aimg6{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:344px;
}
.t4b .b1 ul li div div.a2 .aimg7{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:268px;
}
.t4b .b1 ul li div div.a2 .aimg8{
position:absolute;
top:50%;
left:50%;
margin-top:-206px;
margin-left:268px;
}
.t4b .b1 ul li div div.a2 .aimg9{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:254px;
}
.t4b .b1 ul li div div.a2 .aimg10{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:250px;
}
.t4b .b1 ul li div div.a2 .aimg11{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:278px;
}
.t4b .b1 ul li div div.a2 .aimg12{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:246px;
}
.t4b .b1 ul li div div.a2 .aimg13{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:250px;
}
.t4b .b1 ul li div div.a2 .aimg14{
position:absolute;
top:50%;
left:50%;
margin-top:-208px;
margin-left:250px;
}
.t4b .b1 ul li div div.a2 .aimg15{
position:absolute;
top:50%;
left:50%;
margin-top:-215px;
margin-left:288px;
}
.t4b .b1 ul li div div.a2 .aimg16{
position:absolute;
top:50%;
left:50%;
margin-top:-181px;
margin-left:288px;
}
.t4b .b1 ul li div div.a2 .aimg17{
position:absolute;
top:50%;
left:50%;
margin-top:-196px;
margin-left:308px;
}
.t4b .b1 ul .bh:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh2:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh3:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh4:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh5:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh6:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh7:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh8:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh9:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh10:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh11:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh12:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh13:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh14:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh15:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh16:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul .bh17:hover{
background-color:rgb(216,216,216);
}
.t4b .b1 ul li.bh:hover .bhb{
display:block;
background-color:rgba(255,128,128,1);
}
.t4b .b1 ul li.bh2:hover .bhb2{
display:block;
background-color:rgba(148,0,211,0.7);
}
.t4b .b1 ul li.bh3:hover .bhb3{
display:block;
background-color:rgba(123,104,238,0.7);
}
.t4b .b1 ul li.bh4:hover .bhb4{
display:block;
background-color:rgba(176,196,222,0.7);
}
.t4b .b1 ul li.bh5:hover .bhb5{
display:block;
background-color:rgba(30,144,255,0.7);
}
.t4b .b1 ul li.bh6:hover .bhb6{
display:block;
background-color:rgba(135,206,250,0.7);
}
.t4b .b1 ul li.bh7:hover .bhb7{
display:block;
background-color:rgba(0,191,255,0.7);
}
.t4b .b1 ul li.bh8:hover .bhb8{
display:block;
background-color:rgba(95,158,160,0.7);
}
.t4b .b1 ul li.bh9:hover .bhb9{
display:block;
background-color:rgba(0,206,209,0.7);
}
.t4b .b1 ul li.bh10:hover .bhb10{
display:block;
background-color:rgba(0,128,128,0.7);
}
.t4b .b1 ul li.bh11:hover .bhb11{
display:block;
background-color:rgba(60,179,113,0.7);
}
.t4b .b1 ul li.bh12:hover .bhb12{
display:block;
background-color:rgba(85,107,47,0.7);
}
.t4b .b1 ul li.bh13:hover .bhb13{
display:block;
background-color:rgba(154,205,50,0.7);
}
.t4b .b1 ul li.bh14:hover .bhb14{
display:block;
background-color:rgba(189,183,107,0.7);
}
.t4b .b1 ul li.bh15:hover .bhb15{
display:block;
background-color:rgba(240,230,140,0.7);
}
.t4b .b1 ul li.bh16:hover .bhb16{
display:block;
background-color:rgba(255,165,0,0.7);
}
.t4b .b1 ul li.bh17:hover .bhb17{
display:block;
background-color:rgba(169,169,169,0.7);
}
.t4b .b2{
position:absolute;
top:50%;
left:50%;
margin-top:-225px;
margin-left:-405px;
width:1000px;
height:470px;
}
.t4b .b2 .b2c{
width:190px;
margin-right:10px
}
.t4b .b2 .b2c img{
margin-bottom:7px;
}
.t4b .b2 .b2l{
position:relative;
margin:0px 10px;
}
.t4b .b2 .b2l .b2l_anniu{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
height:50px;
}
.t4b .b2 .b2l .b2l_anniu li{
position:absolute;
top:0px;
width:50px;
height:50px;
list-style:none;
background-color:rgba(0,0,0,0);
}
.t4b .b2 .b2l .b2l_anniu li.icon_left{
left:-270px;
background-color:rgba(0,0,0,0.3);
}
.t4b .b2 .b2l .b2l_anniu li.icon_right{
right:-320px;
background-color:rgba(0,0,0,0.3);
}
.t4b .b2 .b2l .b2l_anniu li.icon_left a div.icon1{
width:50px;
height:50px;
background:url('../icons/20180511_003.png') 0px -90px;
}
.t4b .b2 .b2l .b2l_anniu li.icon_right a div.icon2{
width:50px;
height:50px;
background:url('../icons/20180511_003.png') 0px -163px;
}
.t4b .b2 .b2l .b2l_anniu li:hover{
background-color:rgba(0,0,0,0.8);
}
.t4b .b2 .b2r{
width:190px;
background-color:rgb(255,255,255);
}
.t4b .b2 .b2r .rtop{
text-align:center;
line-height:20px;
}
.t4b .b2 .b2r .rtop .login{
width:55px;
height:55px;
margin:10px auto;
border-radius:50%;
background:url('../logos/no_login.jpg') 4px 4px/52px;
box-shadow:1px 1px 10px 1px rgb(178,178,178);
}
.t4b .b2 .b2r .rtop .rip{
margin-top:10px;
}
.t4b .b2 .b2r .rtop .rip1{
display:inline-block;
width:65px;
height:22px;
margin:0px 4px;
border-radius:22px;
background-color:rgb(255,255,255);
box-shadow:0px 2px 12px 0px rgb(178,178,178);
}
.t4b .b2 .b2r .rtop .rip1 a{
line-height:22px;
color:rgb(255,0,0);
}
.t4b .b2 .b2r .rtop .rip2{
display:inline-block;
width:65px;
height:22px;
margin:0px 4px;
border-radius:22px;
background-color:rgb(53,53,51);
box-shadow:0px 2px 12px 0px rgb(178,178,178);
}
.t4b .b2 .b2r .rtop .rip2 a{
line-height:22px;
color:rgb(212,199,137);
}
.t4b .b2 .b2r .rtop .rip1:hover{
background-color:rgb(255,0,0);
}
.t4b .b2 .b2r .rtop .rip1:hover a{
color:rgb(255,255,255);
}
.t4b .b2 .b2r .rtop .rip2:hover{
background-color:rgb(255,0,0);
}
.t4b .b2 .b2r .rtop .rip2:hover a{
color:rgb(255,255,255);
}
.t4b .b2 .b2r .rtext{
margin-top:12px;
padding:4px 12px;
}
.t4b .b2 .b2r .rtext ul li{
line-height:22px;
}
.t4b .b2 .b2r .rtext ul li h3{
margin-bottom:7px;
}
.t4b .b2 .b2r .rbom{
margin-top:10px;
padding:11px 12px;
border-top:1px solid rgb(152,152,152);
}
.t4b .b2 .b2r .rbom ul{
margin-bottom:12px;
}
.t4b .b2 .b2r .rbom ul li{
width:26px;
margin:0px 6px;
line-height:15px;
text-align:center;
}
.t4b .b2 .b2r .rbom ul li img{
width:20px;
height:20px;
}
css部分3，content.css：
@charset "utf-8";
/* 名称：content.css
功能：商城页面中部布局样式（内容）
*/
/* 主体内容外部布局样式 */
.main{
width:100%;
margin-top:30px;
}
/* 内容栏1样式 */
.main .main_top .t1{
position:relative;
width:1190px;
margin:0px auto 30px;
}
.main .main_top .t1 .b2l_anniu{
position:absolute;
top:50%;
left:50%;
margin-top:-13px;
margin-left:-25px;
/* height:50px; */
}
.main .main_top .t1 ul.b2l_anniu li{
position:absolute;
top:0px;
width:20px;
height:25px;
list-style:none;
background-color:rgba(0,0,0,0);
}
.main .main_top .t1 ul.b2l_anniu li.icon_left{
left:-380px;
background-color:rgba(0,0,0,0.3);
}
.main .main_top .t1 ul.b2l_anniu li.icon_right{
right:-620px;
background-color:rgba(0,0,0,0.3);
}
.main .main_top .t1 ul.b2l_anniu li.icon_left a div.icon1{
width:20px;
height:25px;
background:url('../icons/20180511_003.png') 0px -55px/69px;
}
.main .main_top .t1 ul.b2l_anniu li.icon_right a div.icon2{
width:20px;
height:25px;
background:url('../icons/20180511_003.png') 0px -140px/69px;
}
.main .main_top .t1 ul.b2l_anniu li:hover{
background-color:rgba(0,0,0,0.8);
}
.main_top .t1 .t1l{
height:278px;
background-color:rgb(255,255,255);
}
.main_top .t1 .t1l dt{
height:278px;
background-color:rgb(231,53,50);
}
.main_top .t1 .t1l dt,dd{
text-align:center;
width:190px;
}
.main_top .t1 .t1l dd{
padding:25px 0px;
margin:0px 5px;
}
.main_top .t1 .t1l dd p{
width:140px;
margin:20px auto;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.main_top .t1 .t1l dd .lms{
height:22px;
font-size:0px;
}
.main_top .t1 .t1l dd .lms1{
display:inline-block;
vertical-align:middle;
line-height:22px;
height:22px;
padding:0px 9px;
font-size:12px;
color:rgb(255,255,255);
background-color:rgb(231,53,50);
}
.main_top .t1 .t1l dd .lms2{
display:inline-block;
vertical-align:middle;
line-height:20px;
height:20px;
padding:0px 8px;
font-size:12px;
text-decoration:line-through;
border:1px solid rgb(231,53,50);
}
.main_top .t1 .t1l .jdms a div{
padding-top:50px;
text-align:center;
}
.main_top .t1 .t1l .jdms a div .p1{
font-size:38px;
text-align:center;
color:rgb(255,255,255);
}
.main_top .t1 .t1l .jdms a div .p2{
font-size:26px;
text-align:center;
color:rgb(255,255,255);
margin-bottom:15px;
}
.main_top .t1 .t1l .jdms a div .p3{
font-size:16px;
text-align:center;
color:rgb(255,255,255);
margin-top:15px;
}
.main_top .t1 .t1l .jdms a div .p4{
font-size:22px;
text-align:center;
color:rgb(255,255,255);
margin-top:15px;
}
.main_top .t1 .t1l .jdms a div img{
width:35px;
}
/* 内容栏2样式 */
.main .main_top .t2{
position:relative;
width:1200px;
margin:0px auto;
}
.wanghan{
width:1200px;
height:25px;
font-size:20px;
line-height:25px;
}
.main_top .t2 .t2i{
width:1200px;
height:560px;
margin:0px auto;
font-size:0px;
}
.main_top .t2 .t2i .ileft{
width:200px;
height:560px;
}
.main_top .t2 .t2i .ileft:hover{
color:#CCC;
opacity:0.9;
}
.main_top .t2 .t2i .imiddle{
width:500px;
height:560px;
}
.middle_img:hover{
color:#CCC;
opacity:0.9;
}
.main_top .t2 .t2i .iright{
width:500px;
height:560px;
}
.right_img:hover{
color:#CCC;
opacity:0.9;
}
/* 左侧锚点样式 */
.dianti{
width:22px;
height:300px;
position:fixed;
top:30%;
left:10px;
}
.dianti_li{
width:20px;
height:20px;
margin-top:10px;
border:1px solid #333;
border-radius:2px;
text-align:center;
background:#333;
}
.dianti_li a{
color:#FFF;
}
/* 内容栏3样式：内容公共样式 */
.main .main_center .t3{
width:1200px;
margin:20px auto 0px;
}
.canten_top{
width:1200px;
height:30px;
}
.canten_left{
width:209px;
height:30px;
font-family:"microsoft yahei";
font-size:20px;
}
.canten_right{
height:30px;
line-height:30px;
}
.canten_right ul{
list-style:none;
height:30px;
margin-top:0;
}
.canten_right ul li a{
text-decoration:none;
padding-left:15px;
padding-right:15px;
font-family:"microsoft yahei";
font-size:14px;
color:#000;
}
.canten_admin{
width:90px;
height:30px;
background:#999;
}
.canten_team{
width:1200px;
height:2px;
background:#000;
}
.canten_bottom{
width:209px;
height:480px;
}
.canten_img_a{
width:209px;
height:260px;
}
.canten_img_a:hover{
color:#CCC;
opacity:0.9;
width:209px;
height:260px;
}
.canten_img_b{
width:209px;
height:80px;
background:#DAE9F0;
}
.canten_img_b ul{
list-style:none;
}
.canten_img_b ul li{
line-height:25px;
margin-left:5px;
}
.canten_img_b ul li a{
text-decoration:none;
font-family:"microsoft yahei";
color:#000;
font-size:14px;
}
.canten_img_b ul li a:hover{
color:#F00;
}
.canten_img_c{
width:209px;
height:138px;
background:#ecf4f7;
}
.canten_img_c ul{
list-style:none;
}
.canten_img_c ul li{
margin-left:13px;
line-height:25px;
}
.canten_img_c ul li a{
text-decoration:none;
font-size:14px;
color:#CCC;
font-family:"microsoft yahei";
}
.canten_img_c ul li a:hover{
color:#F00;
}
.laoli_img{
width:991px;
height:259px;
}
.laoli_left{
height:259px;
border-right:1px solid #CCC;
}
.laoli_right{
height:259px;
border-right:1px solid #CCC;
}
.laoli_right:hover{
color:#CCC;
opacity:0.9;
}
.oppo_img{
width:991px;
height:218px;
}
.oppo{
height:218px;
border-right:1px solid #CCC;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
}
.oppo:hover{
color:#CCC;
opacity:0.9;
}
.oppos{
height:218px;
border-right:1px solid #CCC;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
}
.oppos:hover{
color:#CCC;
opacity:0.9;
}
.divkk{
width:1198px;
border:1px #CCCCCC solid;
margin-top:20px;
}
.div_left{
width:20px;
height:60px;
}
.div_middle{
width:1100px;
padding:0px 24px;
height:60px;
}
.div_middle ul{
list-style:none;
}
.div_middle ul li{
padding:15px 0px;
font-size:0px;
margin-left:10px;
}
.div_right{
width:20px;
height:60px;
}
css部分4，footer.css：
@charset "utf-8";
/* 名称：footer.css
功能：商城页面底部布局样式（底部导航与公司信息）
*/
/* 底部布局样式 */
.footer{
width:100%;
margin:30px 0px;
border-top:1px solid rgb(203,203,203);
}
/* 底部导航 */
.footer .help{
box-sizing:border-box;
width:1200px;
margin:20px auto;
padding:20px;
text-align:center;
line-height:22px;
}
.help dl dt{
position:relative;
line-height:40px;
font-size:20px;
font-weight:bold;
color:rgb(220,20,60);
}
.help dl dd a{
color:rgb(46,46,46);
}
.help dt:after{
position:absolute;
top:38px;
left:1px;
width:1px;
height:99px;
content:'';
background-color:rgb(186,186,186);
}
.footer .help .clearaf:after{
display:none;
}
.footer .Copyright{
width:1200px;
margin:0px auto;
text-align:center;
}
.Copyright ul li{
position:relative;
display:inline-block;
padding:6px 12px;
}
.Copyright ul li + li:after{
position:absolute;
top:8px;
left:-3px;
width:1px;
height:10px;
content:'';
background-color:rgb(111,111,111);
}
.Copyright ul li a{
color:rgb(46,46,46);
}