html
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="./01.css">
</head>
<body>
<div class="nav"> <!-- 导航栏 -->
<span>送货至：洛阳</span>
<ul>
<li>你好，请登录 <a href="">免费注册</a></li>
<li> | 我的订单</li>
<li> | 收藏夹 <img src="./img/turnb.png" alt=""></li>
<li>客户服务 <img src="./img/turnb.png" alt=""></li>
<li>网站导航 <img src="./img/turnb.png" alt=""></li>
<li> | 关注我们：
<img src="./img/sh1.png" alt="">
<img src="./img/sh2.png" alt="">
</li>
<li> 手机版 <img src="./img/s_tel.png" alt=""></li>
</ul>
</div>
<div class="search"> <!-- 搜索区 -->
<span><img src="./img/logo.png" alt=""></span>
<span>
<input type="text" placeholder="请输入关键字"><input type="submit" value="搜 索">
<div>
<a href="">咖啡</a>
<a href="">Iphone14 ProMax</a>
<a href="">美食</a>
<a href="">蛋糕</a>
<a href="">日用品</a>
<a href="">连衣裙</a>
</div>
</span>
<span> <input type="button" value="购物车"> </span>
</div>
<div class="contents">
<span>
<ul>
<li>全部商品分类</li>
<li><img src="./img/nav1.png" alt=""><p>进口食品、生鲜</p></li>
<li><img src="./img/nav2.png" alt=""><p>食品、饮料、酒</p></li>
<li><img src="./img/nav3.png" alt=""><p>母婴、玩具、童装</p></li>
<li><img src="./img/nav4.png" alt=""><p>家具、家居清洁</p></li>
<li><img src="./img/nav5.png" alt=""><p>美妆、个人护理、洗护</p></li>
<li><img src="./img/nav6.png" alt=""><p>女装、内衣、中老年</p></li>
<li><img src="./img/nav7.png" alt=""><p>鞋靴、箱包、腕表装饰</p></li>
<li><img src="./img/nav8.png" alt=""><p>男装、运动</p></li>
<li><img src="./img/nav9.png" alt=""><p>手机、小家具、电脑</p></li>
<li><img src="./img/nav10.png" alt=""><p>礼品、充值</p></li>
</ul>
</span>
<span>
<ul>
<li>首页</li>
<li>自营超市</li>
<li>1号团</li>
<li>1号超市</li>
<li>女装</li>
<li>美妆</li>
<li>1号淘宝</li>
<li>团购</li>
<li> <img src="./img/nav9.png" alt="">手机下单惊喜多!</li>
</ul>
</span>
<span>
<img src="./img/ban1.jpg" alt="">
</span>
<span>
<h1>快讯</h1>
<ul>
<li>【特惠】 掏一轮明月 表无尽惦念 </li>
<li>【公告】好奇金装成长裤新品上市</li>
<li>【特惠】大牌闪购 抢！</li>
<li>【公告】发福利 买车就抢千元油卡</li>
<li>【公告】加点低至五折</li>
<li>1号钱包</li>
<li>收益日结，收益赚high!</li>
<li><img src="./img/oneAD.jpg" alt=""></li>
</ul>
</span>
</div>
<div class="num">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="goods">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="fire">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="num2">
<ul>
<li><span>￥53.00</span> <span>16R</span> </li>
<li>￥189 <span>26R</span></li>
<li>￥5288 <span>25R</span></li>
<li>￥368 <span>18R</span></li>
<li>￥280 <span>30R</span></li>
</ul>
</div>
<div class="_img">
<img src="./img/mban_2.jpg" alt="">
</div>
<div class="food">
<div>
<span>1F</span>
<img src="./img/01-body-img/floor.png" alt=""><span>进口+生鲜</span>
<ul>
<li></li>
<li>进口咖啡</li>
<li>进口酒</li>
<li>进口母婴</li>
<li>新鲜蔬菜</li>
<li>新鲜水果</li>
</ul>
</div>
<div></div>
<div>
<img src="./img/02-food-img/fre_r.jpg" alt="">
<ul>
<li>进口水果</li>
<li>奇异果</li>
<li>西柚</li>
</ul>
<ul>
<li>海鲜水产</li>
<li>品质牛肉</li>
</ul>
<ul>
<li>奶粉</li>
<li>鲜活禽蛋</li>
<li>进口酒</li>
</ul>
<ul>
<li>进口奶粉</li>
<li>鲜活禽蛋</li>
</ul>
</div>
<div>
<div><img src="./img/02-food-img/fre_b1.jpg" alt=""> </div>
<div><img src="./img/02-food-img/fre_b2.jpg" alt=""> </div>
</div>
<div>
<ul>
<li>
<p>贝思客 草莓先生&蓝莓小姐</p>
<p>￥98.00</p>
<img src="./img/02-food-img/fre_1.jpg" alt="">
</li>
<li>
<p>微笑果园SMILE 智利进口绿奇异果</p>
<p>￥84.00</p>
<img src="./img/02-food-img/fre_2.jpg" alt="">
</li>
<li>
<p>新鲜美味 进口美食</p>
<p>￥98.00</p>
<img src="./img/02-food-img/fre_3.jpg" alt="">
</li>
<li>
<p>新鲜美味 进口美食</p>
<p>￥24.00</p>
<img src="./img/02-food-img/fre_4.jpg" alt="">
</li>
<li>
<p>新鲜美味 纯牛奶</p>
<p>￥142.00</p>
<img src="./img/02-food-img/fre_5.jpg" alt="">
</li>
<li>
<p>莫斯利安</p>
<p>￥62.00</p>
<img src="./img/02-food-img/fre_6.jpg" alt="">
</li>
</ul>
</div>
</div>
<div class="beauty">
<div>
<span>2F</span>
<img src="./img/01-body-img/floor.png" alt=""><span>母婴玩具</span>
<ul>
<li></li>
<li>洗发护发</li>
<li>面膜</li>
<li>洗面奶</li>
<li>香水</li>
<li>沐浴露</li>
</ul>
</div>
<div></div>
<div>
<img src="./img/03-beauty-img/make_r.jpg" alt="">
<ul>
<li>洗发护发</li>
<li>牙刷牙膏</li>
</ul>
<ul>
<li>面膜</li>
<li>补水面膜</li>
<li>香水</li>
</ul>
<ul>
<li>面膜</li>
<li>洗面奶</li>
<li>脱毛膏</li>
</ul>
<ul>
<li>沐浴露</li>
</ul>
</div>
<div>
<div><img src="./img/03-beauty-img/make_b1.jpg" alt=""> </div>
<div><img src="./img/03-beauty-img/make_b2.jpg" alt=""> </div>
</div>
<div>
<ul>
<li>
<p>美宝莲粉饼</p>
<p>￥260.00</p>
<img src="./img/03-beauty-img/make_1.jpg" alt="">
</li>
<li>
<p>洗衣液</p>
<p>￥60.00</p>
<img src="./img/03-beauty-img/make_2.jpg"" alt="">
</li>
<li>
<p>洗发水</p>
<p>￥160.00</p>
<img src="./img/03-beauty-img/make_3.jpg" alt="">
</li>
<li>
<p>男士洗发水</p>
<p>￥120.00</p>
<img src="./img/03-beauty-img/make_4.jpg" alt="">
</li>
<li>
<p>美宝莲粉饼</p>
<p>￥260.00</p>
<img src="./img/03-beauty-img/make_5.jpg" alt="">
</li>
<li>
<p>男士设计 洗面奶</p>
<p>￥90.00</p>
<img src="./img/03-beauty-img/make_6.jpg" alt="">
</li>
</ul>
</div>
</div>
<div class="_img">
<img src="./img/mban_2.jpg" alt="">
</div>
<div class="body">
<div>
<span>3F</span>
<img src="./img/01-body-img/floor.png" alt=""><span>母婴玩具</span>
<ul>
<li></li>
<li>营养品</li>
<li>孕妈背带裤</li>
<li>儿童玩具</li>
<li>婴儿床</li>
<li>喂奶器</li>
</ul>
</div>
<div></div>
<div>
<img src="./img/01-body-img/baby_r.jpg" alt="">
<ul>
<li>孕妈必备</li>
<li>儿童玩具</li>
</ul>
<ul>
<li>童装童鞋</li>
<li>辅助食品</li>
</ul>
<ul>
<li>奶粉</li>
<li>鲜活禽蛋</li>
<li>维生素</li>
</ul>
<ul>
<li>童装童鞋</li>
<li>辅助食品</li>
</ul>
</div>
<div>
<div><img src="./img/01-body-img/baby_b1.jpg" alt=""> </div>
<div><img src="./img/01-body-img/baby_b2.jpg" alt=""> </div>
</div>
<div>
<ul>
<li>
<p>儿童推车</p>
<p>￥560.00</p>
<img src="./img/01-body-img/baby_1.jpg" alt="">
</li>
<li>
<p>妈咪纸尿裤</p>
<p>￥260.00</p>
<img src="./img/01-body-img/baby_2.jpg" alt="">
</li>
<li>
<p>儿痛玩具 挖掘机</p>
<p>￥1160.00</p>
<img src="./img/01-body-img/baby_3.jpg" alt="">
</li>
<li>
<p>纸尿裤</p>
<p>￥260.00</p>
<img src="./img/01-body-img/baby_4.jpg" alt="">
</li>
<li>
<p>儿童推车</p>
<p>￥86.00</p>
<img src="./img/01-body-img/baby_5.jpg" alt="">
</li>
<li>
<p>奶粉</p>
<p>￥660.00</p>
<img src="./img/01-body-img/baby_6.jpg" alt="">
</li>
</ul>
</div>
<div class="circle">
<div>
<img src="img/04-img-circle/b1.png" alt=""> <br>
<p>正品保障</p>
<p>正品行货 放心购买</p>
</div>
<div>
<img src="img/04-img-circle/b2.png" alt=""> <br>
<p>满38包邮</p>
<p>满38包邮，免邮费</p>
</div>
</div>
<div class="circle2">
<div>
<img src="img/04-img-circle/b3.png" alt=""> <br>
<p>天天低价</p>
<p>天天低价 畅选无忧</p>
</div>
<div>
<img src="img/04-img-circle/b4.png" alt=""> <br>
<p>准时送达</p>
<p>收货时间由你租住</p>
</div>
</div>
</div>
<div class="foot">
<ul class="">
<li>新手上路</li>
<li>售后流程</li>
<li>购买流程</li>
<li>订购方式</li>
<li>隐私声明</li>
<li>推荐分享说明</li>
</ul>
<ul>
<li>货到付款区</li>
<li>配送支付区</li>
<li>购买流程</li>
<li>支付方式说明</li>
</ul>
<ul>
<li>会员中心</li>
<li>资金管理</li>
<li>我的收藏</li>
<li>我的订单</li>
</ul>
<ul>
<li>服务保障</li>
<li>退换货原则</li>
<li>售后俯卧保证</li>
<li>产品质量保证</li>
</ul>
<ul>
<li>联系我们</li>
<li>网站故障报告</li>
<li>购物资讯</li>
<li>投诉与建议</li>
</ul>
<div>
<table>
<tr>
<td rowspan="4"><img src="./img/05-img-foot/er.gif" alt=""></td>
<td><img src="./img/05-img-foot/b_sh_1.png" alt=""> 新浪微博</td>
</tr>
<tr>
<td><img src="./img/05-img-foot/b_sh_2.png" alt=""> 腾讯微博</td>
</tr>
<tr>
<td>服务热线</td>
</tr>
<tr>
<td>400-123-4567</td>
</tr>
<tr>
<td>扫一扫联系我们</td>
</tr>
</table>
</div>
</div>
<div class="foot2">
<p>备案/许可证编号；蜀icp备12009302号-1-www.dingguagua.com版权1号店网上超市207-2016，病夜预订。复荆必究，技术支持</p>
<div><img src="img/06-foot2-img/b_1.gif" alt=""></div>
<div><img src="img/06-foot2-img/b_2.gif" alt=""></div>
<div><img src="img/06-foot2-img/b_3.gif" alt=""></div>
<div><img src="img/06-foot2-img/b_4.gif" alt=""></div>
<div><img src="img/06-foot2-img/b_5.gif" alt=""></div>
<div><img src="img/06-foot2-img/b_6.gif" alt=""></div>
</div>
</body>
</html>
css
点击查看代码
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
color: #ff4000;
}
/* 导航栏 */
.nav{
height:40px;
line-height: 40px;
background:linear-gradient(#ccc,#fff,#eee);
font-size: 14px ;
color:#666;
padding:0 50px 0 80px;
}
.nav ul{
float:right;
}
.nav ul li{
list-style: none;
float:left;
margin:0 10px;
}
/* 中间 搜索区 */
.search{
width:88%;
height:100px;
line-height:100px;
margin:20px auto;
position: relative;
}
.search>span:nth-of-type(1){
display: inline-block;
width:30%;
height:100px;
line-height:100px;
}
.search>span:nth-of-type(2){
display: inline-block;
width:45%;
}
.search>span:nth-of-type(2) input:first-of-type{
width:500px;
height:40px;
text-indent: 2em;
border:none; /* 边框 */
outline:2px red solid; /* 轮廓 */
}
.search>span:nth-of-type(2) input:nth-of-type(2){
width:80px;
height:43.5px;
border:none; /* 边框 */
background-color: red;
color:white;
}
.search>span:nth-of-type(2) input{
vertical-align: middle;
}
.search>span:nth-of-type(2) div{
position: relative;
margin-top: -50px;
}
.search>span:nth-of-type(2) div a{
margin-left: 20px;
color: #8c8c8c;
}
.search>span:nth-of-type(3) input{
width: 150px;
height: 50px;
border: none;
margin-left: 10%;
background: url("./img/car.png") #f7f7f7 no-repeat left center;
background-size: 20%;
}
.contents{
position: relative;
margin: 50px auto;
height: 650px;
width: 90%;
}
.contents>span:nth-of-type(1){
width: 250px;
height: 650px;
display:inline-block;
margin: 0 0 0 200px;
color: white;
background-color: #b11d1d;
}
.contents>span:first-of-type p{
margin:-27px 0 5px 25px;
font-size: 18px;
}
.contents span:first-of-type ul li:first-of-type{
height: 70px;
width: 250px;
text-align: center;
line-height: 70px;
font-size: 20px;
background-color: #ff3c3c;
margin: 0;
padding: 0;
background-image: none;
}
.contents>span:first-of-type ul li img{
width: 15px;
margin-top: 22px;
}
.contents>span:first-of-type ul li{
background: url("./img/mores.png") no-repeat right center;
list-style: none;
font-size: 40px;
}
.contents>span:nth-of-type(2){
display: inline-block;
position: absolute;
margin-top: -15px;
}
.contents>span:nth-of-type(2) li{
display: inline-block;
padding: 25px;
font-size: 20px;
}
.contents span:nth-of-type(2) li:first-of-type{
color: orangered;
}
.contents span:nth-of-type(2) li:nth-of-type(2){
color: orangered;
}
.contents span:nth-of-type(2) li:last-of-type{
float: right;
position: absolute;
right: -88%;
color: #8c8c8c;
}
.contents span:nth-of-type(3) img {
width: 54%;
position: absolute;
top: 58px;
margin-left: 20px;
}
.contents span:nth-of-type(4){
position: absolute;
right: 5%;
top:10%;
}
.contents span:nth-of-type(4) ul li{
list-style: none;
margin: 20px 0 0 0;
font-size: 20px;
color: #8c8c8c;
}
.contents span:nth-of-type(4) ul li:first-of-type{
border-top:1px #8c8c8c solid;
}
.contents span:nth-of-type(4) ul li:nth-of-type(6){
border: 1px #8c8c8c solid;
font-size: 30px;
font-weight: bolder;
color: black;
}
.num{
position: absolute;
left: 47%;
top: 74%;
}
.num>span{
display: inline-block;
height: 50px;
width: 50px;
font-size: 30px;
text-align: center;
line-height: 50px;
margin-left: 10px;
border-radius: 100%;
background-color: #4c4b4b;
}
.num span:hover{
background-color: white;
cursor: pointer;
}
.goods ul{
margin: 0 0 0 14%;
}
.goods ul li {
display: inline-block;
list-style: none;
height: 350px;
width: 350px;
}
.goods ul li:nth-of-type(1){
background: url("./img/l_img.jpg") no-repeat left center;
background-size: 100%;
}
.goods ul li:nth-of-type(2){
background: url("./img/hot1.jpg") no-repeat left center;
background-size: 100%;
}
.goods ul li:nth-of-type(3){
background: url("./img/hot2.jpg") no-repeat left center;
background-size: 100%;
}
.goods ul li:nth-of-type(4){
background: url("./img/hot3.jpg") no-repeat left center;
background-size: 100%;
}
.goods ul li:nth-of-type(5){
background: url("./img/hot4.jpg") no-repeat left center;
background-size: 100%;
}
.fire ul li{
list-style: none;
display: inline-block;
height: 70px;
width: 70px;
background: url("./img/hot.png") no-repeat left center;
background-size: 100%;
}
.fire ul{
border: 1px red solid
width: 40%;
}
.fire ul li:nth-of-type(1){
position: absolute;
bottom: 8%;
left: 30%;
}
.fire ul li:nth-of-type(2){
position: absolute;
bottom: 8%;
left: 46%;
}
.fire ul li:nth-of-type(3){
position: absolute;
bottom: 8%;
left: 62%;
}
.fire ul li:nth-of-type(4){
position: absolute;
bottom: 8%;
left: 77%;
}
.num2{
position: relative;
bottom: 45px;
}
.num2 ul li{
display: inline-block;
font-size: 28px;
position: relative;
left: 17%;
color: orangered;
font-weight: bold;
}
.num2 ul li:first-of-type span:first-of-type{
background-color: orangered;
display: inline-block;
color: white;
font-size: 28px;
width: 120px;
}
.num2 ul li:first-of-type span:nth-of-type(2){
color: orangered;
background-color: none;
}
.num2 ul li:nth-of-type(2){
position: relative;
left: 25%;
}
.num2 ul span{
font-size: 19px;
color: #8c8c8c;
}
.num2 ul li:nth-of-type(3){
position: relative;
left: 34%;
}
.num2 ul li:nth-of-type(4){
position: relative;
left: 42%;
}
.num2 ul li:nth-of-type(5){
position: relative;
left: 52%;
}
._img{
width: 79%;
position: relative;
left: 14%;
}
._img img{
position: relative;
width: 100%;
}
.food{ /*1f*/
position: relative;
margin: 50px auto;
height: 655px;
width: 79.5%;
left: 3.5%;
}
.food span:nth-of-type(1){
font-size: 19px;
color: white;
position: absolute;
top:12px;
left: 5px;
z-index: 1;
}
.food img{
float: left;
width: 40px;
margin: 0;
padding: 0;
}
.food span:nth-of-type(2){
color: orangered;
font-size: 25px;
position: relative;
top: 5px;
left: 15px;
}
.food>div:nth-of-type(1)>ul:nth-of-type(1){
float: right;
}
.food div:nth-of-type(1)>ul:first-of-type li{
display: inline-block;
list-style-type: none;
margin-top: 15px;
font-size: 16px;
padding-left: 20px;
}
.food>div:nth-of-type(2){
border: 2px orangered solid;
width: 100%;
position:relative;
top: 8px;
background-color: orangered;
}
.food>div:nth-of-type(1)>ul:nth-of-type(1){
float: right;
}
.food div:nth-of-type(1)>ul:first-of-type li{
display: inline-block;
list-style-type: none;
margin-top: 15px;
font-size: 16px;
padding-left: 20px;
}
.food>div:nth-of-type(2){
border: 2px orangered solid;
width: 100%;
position:relative;
top: 8px;
background-color: orangered;
}
.food div:nth-of-type(3){
position: relative;
float: left;
left:-2.2%;
height: 600px;
top:1.2%;
width: 20%;
}
.food div:nth-of-type(3) img{
width: 100%;
height: 70%;
}
.food div:nth-of-type(3)>ul{
border-bottom: 2px #8c8c8c dashed;
background-color: #e4f7ec;
}
.food div:nth-of-type(3)>ul li{
list-style: none;
display: inline-block;
line-height: 45px;
padding: 0 5% 0 10%;
}
.food div:nth-of-type(4){
width: 20%;
height: 610px;
float: right;
position: relative;
top: 1.2%;
}
.food div:nth-of-type(4) div{
position: relative;
width: 100%;
height: 50%;
}
.food div:nth-of-type(4) img{
width: 100%;
}
.food div:nth-of-type(5){
height: 590px;
position: relative;
top: 6%;
}
.food div:nth-of-type(5) ul li{
display: inline-block;
width: 18%;
height: 290px;
}
.food div:nth-of-type(5) ul p{
text-align: center;
font-size: 20px;
line-height: 40px;
}
.food div:nth-of-type(5) ul p:nth-of-type(2){
font-size: 28px;
color: orangered;
}
.food div:nth-of-type(5) ul li img{
width: 65%;
left: 20%;
position: relative;
}
.beauty{ /*2f*/
position: relative;
margin: 50px auto;
height: 655px;
width: 79.5%;
left: 3.5%;
}
.beauty span:nth-of-type(1){
font-size: 19px;
color: white;
position: absolute;
top:12px;
left: 5px;
z-index: 1;
}
.beauty img{
float: left;
width: 40px;
margin: 0;
padding: 0;
}
.beauty span:nth-of-type(2){
color: orangered;
font-size: 25px;
position: relative;
top: 5px;
left: 15px;
}
.beauty>div:nth-of-type(1)>ul:nth-of-type(1){
float: right;
}
.beauty div:nth-of-type(1)>ul:first-of-type li{
display: inline-block;
list-style-type: none;
margin-top: 15px;
font-size: 16px;
padding-left: 20px;
}
.beauty>div:nth-of-type(2){
border: 2px orangered solid;
width: 100%;
position:relative;
top: 8px;
background-color: orangered;
}
.beauty div:nth-of-type(3){
position: relative;
float: left;
left:-2.2%;
height: 600px;
top:1.2%;
width: 20%;
}
.beauty div:nth-of-type(3) img{
width: 100%;
height: 70%;
}
.beauty div:nth-of-type(3)>ul{
border-bottom: 2px #8c8c8c dashed;
background-color: #fcebf3;
}
.beauty div:nth-of-type(3)>ul li{
list-style: none;
display: inline-block;
line-height: 45px;
padding: 0 5% 0 10%;
}
.beauty div:nth-of-type(4){
width: 20%;
height: 610px;
float: right;
position: relative;
top: 1.2%;
}
.beauty div:nth-of-type(4) div{
position: relative;
width: 100%;
height: 50%;
}
.beauty div:nth-of-type(4) img{
width: 100%;
}
.beauty div:nth-of-type(5){
height: 590px;
position: relative;
top: 6%;
}
.beauty div:nth-of-type(5) ul li{
display: inline-block;
width: 18%;
height: 290px;
}
.beauty div:nth-of-type(5) ul p{
text-align: center;
font-size: 20px;
line-height: 40px;
}
.beauty div:nth-of-type(5) ul p:nth-of-type(2){
font-size: 28px;
color: orangered;
}
.beauty div:nth-of-type(5) ul li img{
width: 75%;
position: relative;
}
._img{
width: 79%;
position: relative;
left: 14%;
}
._img img{
position: relative;
width: 100%;
}
.body{ /*3f*/
position: relative;
margin: 50px auto;
height: 655px;
width: 79.5%;
left: 3.5%;
}
.body span:nth-of-type(1){
font-size: 19px;
color: white;
position: absolute;
top:12px;
left: 5px;
z-index: 1;
}
.body img{
float: left;
width: 40px;
margin: 0;
padding: 0;
}
.body span:nth-of-type(2){
color: orangered;
font-size: 25px;
position: relative;
top: 5px;
left: 15px;
}
.body>div:nth-of-type(1)>ul:nth-of-type(1){
float: right;
}
.body div:nth-of-type(1)>ul:first-of-type li{
display: inline-block;
list-style-type: none;
margin-top: 15px;
font-size: 16px;
padding-left: 20px;
}
.body>div:nth-of-type(2){
border: 2px orangered solid;
width: 100%;
position:relative;
top: 8px;
background-color: orangered;
}
.body div:nth-of-type(3){
position: relative;
float: left;
left:-2.2%;
height: 600px;
top:1.2%;
width: 20%;
}
.body div:nth-of-type(3) img{
width: 100%;
height: 70%;
}
.body div:nth-of-type(3)>ul{
border-bottom: 2px #8c8c8c dashed;
background-color: #fcebf3;
}
.body div:nth-of-type(3)>ul li{
list-style: none;
display: inline-block;
line-height: 45px;
padding: 0 5% 0 10%;
}
.body div:nth-of-type(4){
width: 20%;
height: 610px;
float: right;
position: relative;
top: 1.2%;
}
.body div:nth-of-type(4) div{
position: relative;
width: 100%;
height: 50%;
}
.body div:nth-of-type(4) img{
width: 100%;
}
.body div:nth-of-type(5){
height: 590px;
position: relative;
top: 6%;
}
.body div:nth-of-type(5) ul li{
display: inline-block;
width: 18%;
height: 290px;
}
.body div:nth-of-type(5) ul p{
text-align: center;
font-size: 20px;
line-height: 40px;
}
.body div:nth-of-type(5) ul p:nth-of-type(2){
font-size: 28px;
color: orangered;
}
.body div:nth-of-type(5) ul li img{
width: 75%;
position: relative;
}
.circle{
height: 200px;
width: 49%;
display: inline-block;
position: relative;
top: 10%;
left: -22%;
}
.circle div{
height:200px;
width: 49%;
display: inline-block;
position: relative;
}
.circle div img{
width: 20%;
position: relative;
left: 50%;
transition: all 1s ease 0s;
}
.circle div p{
text-align: center;
position: relative;
top: 35%;
}
.circle2{
height: 200px;
width: 50%;
display: inline-block;
position: relative;
top: -21%;
float: right;
}
.circle2 div{
height:200px;
width: 49%;
display: inline-block;
position: relative;
}
.circle2 div img{
width: 20%;
position: relative;
left: 50%;
transition: all 1s ease 0s;
}
.circle2 div p{
text-align: center;
position: relative;
top: 35%;
}
.circle img:hover{
transform: rotate(360deg) scale(1.1);
}
.circle2 img:hover{
transform: rotate(360deg) scale(1.1);
}
.foot{
height: 480px;
width: 79%;
bottom: 10%;
left: 14%;
position: relative;
z-index: -1;
}
.foot ul{
position: relative;
list-style: none;
font-size: 18px;
top: 20%;
display: inline-block;
margin-right: 110px;
float: left;
}
.foot ul li:first-of-type{
font-size: 25px;
color: black;
}
.foot ul:first-of-type{
position: relative;
float: left;
}
.foot ul li{
line-height: 40px;
color: #4c4b4b;
}
.foot div{
height: 300px;
width: 500px;
position: relative;
top: 35%;
right: -72%;
}
.foot div table{
position: relative;
top: -110%;
width: 400px;
}
.foot div table tr:nth-of-type(4) {
font-size: 25px;
color: orangered;
}
.foot2{
height: 200px;
width: 79%;
position: relative;
left: 14%;
}
.foot2 p{
color: #4c4b4b;
font-size: 23px;
text-align: center;
}
.foot2 div{
display: inline-block;
}
.foot2 div img{
width: 150px;
position: relative;
margin:50px 20px 0 0;
left: 380px;
}
效果图
