简化版华为商城html单页分享
简介
此单页是帮朋友写的，可作为html初学者练手用。用了两晚上写的，仿照华为商城，但是简化了，应付作业用的。这里分享出来给大家，代码有点长，直接全部复制到html里面就行。
预览页
商城预览页https://www.buleng.xyz/in/project.html
预览图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为官网</title>
</head>
<body>
<div class="music">
<!-- 来首音乐放松一下 -->
<audio controlslist="nodownload" controls="controls" autoplay="true" id="myVideo" name="media">
<source src="https://buleng.xyz/in/You_are_Beautiful.mp3" type="audio/mpeg">
</audio>
</div>
<div class="main">
<div class="wrap">
<ul id="top">
<li id="logo">
<img src="https://res.vmallres.com/portal/1.10.10.300/h5/images/logo_app.png" alt="">
</li>
<li>华为专区</li>
<li>鸿蒙智联</li>
<li>莫塞尔</li>
<li>华为智选</li>
<li>鸿蒙OS</li>
<li>教育优惠</li>
</ul>
</div>
<div class="loop">
<img src="https://res.vmallres.com/uomcdn/CN/cms/202204/89B481D58974E16516F409035C7CD9B5.jpg" alt="">
</div>
<div class="center">
<div class="wrap">
<div class="dabox">
<div class="box">
<img class="box_image"
src="https://res.vmallres.com/uomcdn/CN/cms/202204/9D721D90A7910B499D9FAE0A5CF0EB9C.jpg.webp"
alt="">
</div>
<div class="box">
<img class="box_image"
src="https://res.vmallres.com/uomcdn/CN/cms/202203/0239435F592BA045DFEBE7BFA10E180D.png.webp"
alt="">
</div>
<div class="box">
<img class="box_image"
src="https://res.vmallres.com/uomcdn/CN/cms/202202/EAE5ACFC7E7976856E59B54FD9DD2F85.jpg.webp"
alt="">
</div>
<div class="box">
<img class="box_image"
src="https://res.vmallres.com/uomcdn/CN/cms/202203/9ED7134AB8D4B1B846EE238520BACC7E.png.webp"
alt="">
</div>
</div>
<div class="first">
<h4>秒杀</h4>
<div class="dabox2">
<div class="box2">
<div class="food">
<img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202109/gbom/6971300260644//428_428_A53F406487393D27639AC5C7F096E13Bmp.jpg"
alt="">
</div>
<div class="show">
<p class="span1">YESOUL野小兽筋膜枪</p>
<p class="span2">专业肌肉按摩，轻巧便携，30天超...</p>
<span class="red_price">￥279</span>
<span class="gray_price">￥499</span>
</div>
</div>
<div class="box2">
<div class="food">
<img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202112/gbom/6973211002252//428_428_0F5B90C68EA70DE27F736557EFED0D3E.png"
alt="">
</div>
<div class="show">
<p class="span1">及越空气炸锅AF600</p>
<p class="span2">专业肌肉按摩，轻巧便携，30天超...</p>
<span class="red_price">￥399</span>
<span class="gray_price">￥699</span>
</div>
</div>
<div class="box2">
<div class="food">
<img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202111/gbom/6973805660189//428_428_86E58CA8E35F41365E561FE6C0423560.png"
alt="">
</div>
<div class="show">
<p class="span1">YESOUL野小兽筋膜枪</p>
<p class="span2">专业肌肉按摩，轻巧便携，30天超...</p>
<span class="red_price">￥649</span>
<span class="gray_price">￥1009</span>
</div>
</div>
<div class="box2">
<div class="food">
<img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202111/gbom/6972895050214//428_428_C34D6D9147A2F35054C3702C0CE879DEmp.png"
alt="">
</div>
<div class="show">
<p class="span1">YESOUL野小兽筋膜枪</p>
<p class="span2">专业肌肉按摩，轻巧便携，30天超...</p>
<span class="red_price">￥1499</span>
<span class="gray_price">￥2499</span>
</div>
</div>
<div class="box2">
<div class="food">
<img src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202112/gbom/6941487239511/428_428_F5608DB88FB841A47DFCE5A1E057CF0Amp.png"
alt="">
</div>
<div class="show">
<p class="span1">YESOUL野小兽筋膜枪</p>
<p class="span2">专业肌肉按摩，轻巧便携，30天超...</p>
<span class="red_price">￥279</span>
<span class="gray_price">￥499</span>
</div>
</div>
</div>
</div>
<div class="second">
<h4>爆款推荐</h4>
<div class="hot">
<div class="box3">
<img src="https://res.vmallres.com/uomcdn/CN/cms/202203/589322FAE36C7E62A6FE3E3B6556B76A.jpg"
alt="">
</div>
<div class="box4">
<div class="food2">
<img src="https://res1.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487250950/428_428_72D63243ACB341C9BE9BFB628681F7D6mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
HUAWEI nove 9
</div>
<p class="span2">限时直降50元</p>
<span class="red_price">￥2349</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res8.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487253296/428_428_EBF5C14985404E87D8D2191853806B6Emp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
HUAWEI P50E
</div>
<p class="span2">限时12期免息</p>
<span class="red_price">￥4488</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res5.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487250608/428_428_2406A21ABDF8E318A3BBAAF8C2ADF050mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
MatePad 10.4
</div>
<p class="span2">新品上市</p>
<span class="red_price">￥1899</span>
</div>
</div>
</div>
<div class="hot">
<div class="box4_21">
<div class="food2">
<img src="https://res4.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487247301/428_428_EA55647077150063E6F9D31D618B3355mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新色上市</span>
HUAWEI P50 Pro
</div>
<p class="span2">限时12期免息</p>
<span class="red_price">￥5488</span>
</div>
</div>
<div class="box4_21">
<div class="food2">
<img src="https://res7.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487235780/428_428_19CD7CA6B1B14C407DD460DCC5091458mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">直屏旗舰</span>
HUAWEI nove 9
</div>
<p class="span2">限时直降150元</p>
<span class="red_price">￥4838</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res1.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487245598/428_428_0ABBFBB98E1EFAE7C169337A48FA1E28mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
HUAWEI FreeBuds 4E
</div>
<p class="span2">新品上市</p>
<span class="red_price">￥699</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res.vmallres.com/uomcdn/CN/cms/202203/B756593ABAF02D489166B46635BCE984.png.webp"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
HUAWEI Sound Joy
</div>
<p class="span2">预订优惠100</p>
<span class="red_price">￥999</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res3.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487258307/428_428_97AADD233BE7F3B5832705E670E82E9Cmp.jpg"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
华为智能门锁系列
</div>
<p class="span2">0元预约抽奖有礼</p>
<span class="red_price">暂无报价</span>
</div>
</div>
</div>
</div>
<div class="third">
<!-- <h4>爆款推荐</h4> -->
<div class="hot">
<div class="box4_21">
<div class="food2">
<img src="https://res4.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487247301/428_428_EA55647077150063E6F9D31D618B3355mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新色上市</span>
HUAWEI P50 Pro
</div>
<p class="span2">限时12期免息</p>
<span class="red_price">￥5488</span>
</div>
</div>
<div class="box4_21">
<div class="food2">
<img src="https://res7.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487235780/428_428_19CD7CA6B1B14C407DD460DCC5091458mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">直屏旗舰</span>
HUAWEI nove 9
</div>
<p class="span2">限时直降150元</p>
<span class="red_price">￥4838</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res1.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487250950/428_428_72D63243ACB341C9BE9BFB628681F7D6mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
HUAWEI nove 9
</div>
<p class="span2">限时直降50元</p>
<span class="red_price">￥2349</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res8.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487253296/428_428_EBF5C14985404E87D8D2191853806B6Emp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
HUAWEI P50E
</div>
<p class="span2">限时12期免息</p>
<span class="red_price">￥4488</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res5.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487250608/428_428_2406A21ABDF8E318A3BBAAF8C2ADF050mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
MatePad 10.4
</div>
<p class="span2">新品上市</p>
<span class="red_price">￥1899</span>
</div>
</div>
</div>
<div class="hot">
<div class="box4_21">
<div class="food2">
<img src="https://res4.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487247301/428_428_EA55647077150063E6F9D31D618B3355mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新色上市</span>
HUAWEI P50 Pro
</div>
<p class="span2">限时12期免息</p>
<span class="red_price">￥5488</span>
</div>
</div>
<div class="box4_21">
<div class="food2">
<img src="https://res7.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487235780/428_428_19CD7CA6B1B14C407DD460DCC5091458mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">直屏旗舰</span>
HUAWEI nove 9
</div>
<p class="span2">限时直降150元</p>
<span class="red_price">￥4838</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res1.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487245598/428_428_0ABBFBB98E1EFAE7C169337A48FA1E28mp.png"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
HUAWEI FreeBuds 4E
</div>
<p class="span2">新品上市</p>
<span class="red_price">￥699</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res.vmallres.com/uomcdn/CN/cms/202203/B756593ABAF02D489166B46635BCE984.png.webp"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
HUAWEI Sound Joy
</div>
<p class="span2">预订优惠100</p>
<span class="red_price">￥999</span>
</div>
</div>
<div class="box4">
<div class="food2">
<img src="https://res3.vmallres.com/pimages/uomcdn/CN/pms/202203/gbom/6941487258307/428_428_97AADD233BE7F3B5832705E670E82E9Cmp.jpg"
alt="">
</div>
<div class="show2">
<div class="show2_name">
<span class="new_food">新品上市</span>
华为智能门锁系列
</div>
<p class="span2">0元预约抽奖有礼</p>
<span class="red_price">暂无报价</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="btm_one">
<div class="btm_one_box">
<div class="div">
<div class="div1">
<img src="https://res.vmallres.com/uomcdn/CN/cms/202203/35029C2650265248A5C45BC46E0D7578.png"
alt="">
</div>
<div class="div2">百强企业 品质保障</div>
</div>
</div>
<div class="btm_one_box">
<div class="div">
<div class="div1">
<img src="https://res.vmallres.com/uomcdn/CN/cms/202203/848285C26D6B91405D84D71CC8D738F2.png"
alt="">
</div>
<div class="div2">7天退货 15天换货</div>
</div>
</div>
<div class="btm_one_box">
<div class="div">
<div class="div1">
<img src="https://res.vmallres.com/uomcdn/CN/cms/202203/09CE412E94E10830D00A2487756EBEE4.png"
alt="">
</div>
<div class="div2">48天起免运费</div>
</div>
</div>
<div class="btm_one_box">
<div class="div">
<div class="div1">
<img src="https://res.vmallres.com/uomcdn/CN/cms/202203/EABCAA990C477793FB6F09658BF80B82.png"
alt="">
</div>
<div class="div2">2000家服务店 全国联保</div>
</div>
</div>
</div>
<div class="wrap footer_b">
<div class="footer_b1">
<ul>
<li><span>新手入门</span></li>
<li><a href="">购物流程</a></li>
<li><a href="">会员制度</a></li>
<li><a href="">订单查询</a></li>
<li><a href="">服务协议及隐私说明</a></li>
<li><a href="">网站地图</a></li>
</ul>
<ul>
<li><span>支付方式</span></li>
<li><a href="">货到付款</a></li>
<li><a href="">网上支付</a></li>
<li><a href="">礼品卡支付</a></li>
<li><a href="">其他支付</a></li>
</ul>
<ul>
<li><span>配送服务</span></li>
<li><a href="">配送进度查询</a></li>
<li><a href="">商品验货与签收</a></li>
</ul>
<ul>
<li><span>相关规则</span></li>
<li><a href="">平台规则</a></li>
<li><a href="">退换货政策</a></li>
<li><a href="">发票制度</a></li>
<li><a href="">帮助中心</a></li>
</ul>
</div>
<div class="footer_b2">
<div class="ewm_a">
<span>APP更优惠</span>
<a href="#">
<img src="https://res.vmallres.com/pimages//pages/cdnImages/91300474913617400319.png"
alt="">
</a>
</div>
<div class="ewm_b">
<span>加微信查订单</span>
<a href="#">
<img src="https://res.vmallres.com/pimages//pages/cdnImages/66357398344619375366.jpg"
alt="">
</a>
</div>
</div>
</div>
<div class="footer_c">
<p>
<a target="_blank">沪ICP备11111118号</a>
|
<a href="#" target="_blank">经营证照</a>
|
<a href="#" target="_blank">互联网药品信息服务资格证(沪)-经营性-2022-2222</a>
|
<a target="_blank">违法和不良信息举报电话：0527-4444444444</a>
|
<a href="#" target="_blank">沪B2-20220000000</a>
|
<a href="#" target="_blank">沪公网安备 1111111111号</a>
|
<a href="#" target="_blank">友情链接</a>
|
<a href="#" target="_blank">出版物经营许可证</a>
|
<a href="#" target="_blank">增值电信业务经营许可证</a>
</p>
<p>Copyright© 华为商城 2022，All Rights Reserved</p>
<small class="btm_img">
<a href="#" target="_blank">
<img alt=""
src="https://img12.360buyimg.com/imagetools/jfs/t1/137354/40/20334/8004/5fdb0dc8Ede5d5a61/2b1115492dd000af.png">
</a>
<a href="#" target="_blank">
<img alt=""
src="https://img14.360buyimg.com/imagetools/jfs/t1/150053/35/18767/7651/5fdb0d35E9957245c/1de66cd6b17463a4.png">
</a>
<a href="#" target="_blank">
<img alt=""
src="https://img12.360buyimg.com/imagetools/jfs/t1/155718/8/780/7554/5fdb0e2dE8307c655/9d5f4c77700cf5fc.png">
</a>
<a href="#" target="_blank">
<img alt=""
src="https://img13.360buyimg.com/imagetools/jfs/t1/141210/1/18632/6718/5fdb0ea6Efae61b31/9553519db03cde8a.png">
</a>
<a href="#" target="_blank">
<img alt=""
src="https://img13.360buyimg.com/imagetools/jfs/t1/151838/6/6149/5706/5fb34370E1e368dd4/8c95102a02a19931.jpg">
</a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010502002939"
target="_blank">
<img alt=""
src="https://img14.360buyimg.com/imagetools/jfs/t1/134812/19/20245/5466/5fdb0d7aE4a0ca6a6/0c15597415912785.png">
</a>
</small>
</div>
</div>
</div>
</body>
</html>CSS部分(使用style标签就可)
* {
list-style: none;
text-align: center;
margin: auto;
/* background-color: #faa6a6; */
padding: 0;
border: 0;
}
.main {
height: 100%;
background-color: #ffffff;
}
.wrap {
width: 1080px;
margin: 0 auto;
}
#logo {
width: 100px !important;
}
#logo img {
width: 100px;
height: 70px;
}
#top {
display: block;
width: 100%;
height: 70px;
}
#top li:not(:first-child) {
display: block;
float: left;
width: 100px;
height: 50px;
/* background-color: rgb(47, 140, 221); */
margin: 10px;
font-size: 15px;
line-height: 50px;
color: #000000;
}
#top li:first-child {
display: block;
float: left;
width: 100px;
height: 70px;
margin-left: 20px;
line-height: 70px;
}
#top li:hover {
color: red;
}
.loop {
width: 100%;
height: 420px;
}
.loop img {
width: 100%;
height: 420px;
}
.center {
height: 2000px;
background-color: #f1f3f5;
}
.dabox {
width: 1100px;
height: 230px;
padding-top: 30px;
/* float: left; */
}
.box {
float: left;
width: 255px;
height: 167px;
/* background-color: #5396E7; */
margin: 10px;
}
.box_image {
width: 255px;
height: 167px;
}
h4 {
text-align: left;
margin-left: 8px;
margin-bottom: 8px;
}
.dabox2 {
width: 1100px;
height: 340px;
}
.box2 {
float: left;
width: 210px;
height: 320px;
background-color: #ffffff;
margin: 5px;
}
.box2:hover,
.box4:hover,
.box4_21:hover {
box-shadow: 0 0 2px #fc0303 inset;
}
.food {
width: 210px;
height: 210px;
}
.food img {
width: 100px;
height: 100px;
margin-top: 50px;
}
.show .span1 {
font-size: 15px;
font-weight: bold;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.show .span2 {
font-size: 13px;
font-weight: 200;
width: 180px;
margin: 5px auto;
height: 20px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.red_price {
font-size: 16px;
color: #ee4646;
font-weight: bold;
}
.gray_price {
font-size: 14px;
color: gray;
font-weight: 300;
text-decoration: line-through;
}
.hot {
height: 300px;
width: 1100px;
margin-top: 10PX;
float: left;
}
.box3 {
float: left;
width: 500px;
height: 300px;
margin-left: 5px;
}
.box3 img {
width: 500px;
height: 300px;
}
.box4 {
float: left;
width: 180px;
height: 300px;
background-color: #fff;
margin-left: 15px;
}
.box4_21 {
float: left;
width: 240px;
height: 300px;
margin-left: 12px;
background-color: #fff;
}
.box4_21 .food2 {
width: 240px;
height: 180px;
}
.food2 {
width: 180px;
height: 180px;
}
.food2 img {
width: 100px;
height: 100px;
margin: 40px auto;
}
.show2_name {
height: 25px;
/* width: 180px; */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: bold;
}
.new_food {
font-size: 12px;
padding: 1px 5px;
margin: 3px;
border-radius: 5px;
text-align: center;
background-color: #db4141;
color: #fff;
}
.show2 .span2 {
font-size: 13px;
font-weight: 200;
width: 150px;
margin: 2px auto;
margin-bottom: 10px;
color: #959a9f;
height: 20px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* hot第二布局调整细节 */
.hot .box4_21:first-child {
margin-left: 5px;
margin-right: 8px;
}
/* 底部框架 */
.bottom {
width: 100%;
height: 500px;
background-color: #ffffff;
}
.btm_one {
width: 1000px;
height: 90px;
border-bottom: 1px solid #ebebeb;
margin: 0 auto;
}
.btm_one_box {
width: 250px;
height: 90px;
background-color: #ffffff;
float: left;
}
.btm_one_box div {
width: 200px;
height: 25px;
margin-top: 15px;
}
.btm_one_box .div1 {
width: 30px;
height: 30px;
float: left;
}
.btm_one_box .div1 img {
width: 25px;
height: 25px;
}
.btm_one_box .div2 {
font-size: 15px;
text-align: left;
padding-left: 10px;
width: 160px;
height: 25px;
float: left;
line-height: 25px;
}
.footer_b {
height: 192px;
padding: 20px 0 20px;
overflow: hidden;
position: relative;
}
.footer_b .footer_b1 {
float: left;
padding-left: 15px;
width: 795px;
height: 152px;
text-align: left;
}
.footer_b .footer_b1 ul {
float: left;
display: block;
width: 195px;
}
.footer_b .footer_b1 ul li span {
height: 32px;
padding: 0 8px;
font-size: 14px;
color: #666;
line-height: 32px;
overflow: hidden;
font-family: "Microsoft YaHei";
color: #666;
font-weight: bold;
}
.footer_b .footer_b1 ul li a {
height: 24px;
padding: 0 8px;
line-height: 24px;
overflow: hidden;
white-space: normal;
font-size: 12px;
color: #666;
}
.footer_b .footer_b1 ul li a:hover {
color: #ff4040;
}
.footer_b2 {
width: 280px;
overflow: hidden;
float: left;
margin-right: -50px;
}
.ewm_a {
float: left;
width: 90px;
height: 122px;
margin-right: 50px;
line-height: 32px;
font-size: 14px;
font-weight: bold;
color: #666
}
.ewm_b {
float: left;
width: 90px;
height: 122px;
line-height: 32px;
font-size: 14px;
font-weight: bold;
color: #666
}
.ewm_a span {
float: left;
width: 90px;
height: 32px;
font-size: 14px;
font-weight: bold;
color: #666;
}
.ewm_a img,
.ewm_b img {
width: 90px;
height: 90px;
}
.footer_c {
height: 127px;
font-size: 12px;
position: relative;
}
.footer_c p {
color: #666;
text-align: center;
text-indent: 0;
line-height: 100%;
margin: 15px 0;
padding: 0;
}
.footer_c p a {
color: #333;
text-align: center;
text-indent: 0;
line-height: 100%;
margin: 15px 0;
padding: 0;
}
.footer_c p a:hover {
color: #ff4040;
}
.footer_c p {
font-family: "Microsoft YaHei";
color: #666;
}
.footer_c small a {
display: inline-block;
margin: 0 4px;
}
.btm_img img {
width: 79px;
height: 27px;
}
.music {
width: 300px;
z-index: 222;
height: 53px;
border-radius: 50px;
border: 5px solid #5ba1e8;
position: fixed;
right: 10px;
bottom: 50px;
}