html+css静态页面Demo(参考淘宝官网)
如需要源码请在最下方下载(请使用谷歌,火狐,IE等浏览器浏览)
ps:纯属学习交流,若有侵权或者其他不妥,尽请联系删除
链接: https://pan.baidu.com/s/1DU5QE2EKkNXSfOi8k530NQ
提取码: mu4i 复制这段内容后打开百度网盘手机App，操作更方便哦
html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝,淘,我喜欢!</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<div class="head_warp">
<div class="head_warp_outer">
<ul class="head_l">
<a href="#"><li class="head_li frist">中国大陆</li></a>
<a href="#"><li class="head_li active">亲，请登录</li></a>
<a href="#"><li class="head_li">免费注册</li></a>
<a href="#"><li class="head_li">手机逛淘宝</li></a>
</ul>
<ul class="head_r">
<a href="#"><li class="head_li">我的淘宝</li></a>
<a href="#"><li class="head_li">购物车</li></a>
<a href="#"><li class="head_li">收藏夹</li></a>
<a href="#"><li class="head_li">商品分类</li></a>
<li class="head_li">|</li>
<a href="#"><li class="head_li">千牛卖家中心</li></a>
<a href="#"><li class="head_li">联系客服</li></a>
<a href="#"><li class="head_li">网站导航</li></a>
</ul>
</div>
</div>
<!--搜索区-->
<div class="search_warp">
<div class="search_outer">
<div class="search_l">
<a href="#"><img src="img/logo.jpg"></a>
</div>
<div class="search_m">
<div class = search_m_t>
<ul class="search_top_ul">
<a href="#"><li class="search_top" class="active">宝贝</li></a>
<a href="#"><li class="search_top">天猫</li></a>
<a href="#"><li class="search_top">店铺</li></a>
</ul>
<form action="get" class="search_box">
<span class="fdj"> <img src="img/fdj.jpg" ></span>
<span class="xj"><img src="img/xj.jpg"></span>
<input type="text" placeholder="笔记本电脑散热">
<input type="submit" value="搜索">
</form>
</div>
<div class = search_m_b>
<ul class="search_bot_ul">
<a href="#"><li class="search_bot"> 苹果数据线 </li></a>
<a href="#"><li class="search_bot"> 贴纸定制 </li></a>
<a href="#"><li class="search_bot"> 充电宝 </li></a>
<a href="#"><li class="search_bot"> 数据线 </li></a>
<a href="#"><li class="search_bot"> 笔记本 </li></a>
<a href="#"><li class="search_bot"> 时尚连衣裙 </li></a>
<a href="#"><li class="search_bot"> 衬衫 </li></a>
<a href="#"><li class="search_bot"> 新款男鞋 </li></a>
<a href="#"><li class="search_bot"> 男士T恤 </li></a>
<a href="#"><li class="search_bot"> 时尚休闲裤 </li></a>
<a href="#"><li class="search_bot"> 沙发 </li></a>
<a href="#"><li class="search_bot"> 定制窗帘</li></a>
</ul>
</div>
</div>
<div class="search_r">
<span class="close">X</span>
<div class="con">
<span class="text">手机淘宝</span>
<a href="#"><img src="img/ewm.jpg" /></a>
</div>
</div>
</div>
</div>
<!--导航栏-->
<div class="nav_warp">
<div class="nav_warp_outer">
<h3>主题市场</h3>
<ul>
<a href="#"><li class="nav_li">天猫</li></a>
<a href="#"><li class="nav_li">聚划算</li></a>
<a href="#"><li class="nav_li">天猫超市</li></a>
<li class="nav_li">|</li>
<a href="#"><li class="nav_li">淘抢购</li></a>
<a href="#"><li class="nav_li">电器城</li></a>
<a href="#"><li class="nav_li">司法拍卖</li></a>
<a href="#"><li class="nav_li">淘宝心选</li></a>
<a href="#"><li class="nav_li">兴农扶贫</li></a>
<li class="nav_li">|</li>
<a href="#"><li class="nav_li">飞猪旅行</li></a>
<a href="#"><li class="nav_li">智能生活</li></a>
<a href="#"><li class="nav_li">苏宁易购</li></a>
</ul>
</div>
</div>
<!--主体区-->
<div class="main_warp">
<div class="main_warp_outer">
<div class="main_l">
<div class="main_top">
<div class="main_l_l">
<ul class="mian_l_ul">
<a href="#"><li class="main_li">女装 /</li></a>
<a href="#"><li class="main_li">男装 /</li></a>
<a href="#"><li class="main_li">内衣</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">鞋靴 /</li></a>
<a href="#"><li class="main_li">箱包 /</li></a>
<a href="#"><li class="main_li">配件</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">童装玩具 /</li></a>
<a href="#"><li class="main_li">孕产 /</li></a>
<a href="#"><li class="main_li">用品</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">家电 /</li></a>
<a href="#"><li class="main_li">男装 /</li></a>
<a href="#"><li class="main_li">手机</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">美妆 /</li></a>
<a href="#"><li class="main_li">洗护 /</li></a>
<a href="#"><li class="main_li">保健品</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">女装 /</li></a>
<a href="#"><li class="main_li">男装 /</li></a>
<a href="#"><li class="main_li">内衣</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">鞋靴 /</li></a>
<a href="#"><li class="main_li">箱包 /</li></a>
<a href="#"><li class="main_li">配件</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">童装玩具 /</li></a>
<a href="#"><li class="main_li">孕产 /</li></a>
<a href="#"><li class="main_li">用品</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">家电 /</li></a>
<a href="#"><li class="main_li">男装 /</li></a>
<a href="#"><li class="main_li">手机</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">美妆 /</li></a>
<a href="#"><li class="main_li">洗护 /</li></a>
<a href="#"><li class="main_li">保健品</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">女装 /</li></a>
<a href="#"><li class="main_li">男装 /</li></a>
<a href="#"><li class="main_li">内衣</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">鞋靴 /</li></a>
<a href="#"><li class="main_li">箱包 /</li></a>
<a href="#"><li class="main_li">配件</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">童装玩具 /</li></a>
<a href="#"><li class="main_li">孕产 /</li></a>
<a href="#"><li class="main_li">用品</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">家电 /</li></a>
<a href="#"><li class="main_li">男装 /</li></a>
<a href="#"><li class="main_li">手机</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">美妆 /</li></a>
<a href="#"><li class="main_li">洗护 /</li></a>
<a href="#"><li class="main_li">保健品</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">女装 /</li></a>
<a href="#"><li class="main_li">男装 /</li></a>
<a href="#"><li class="main_li">内衣</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">鞋靴 /</li></a>
<a href="#"><li class="main_li">箱包 /</li></a>
<a href="#"><li class="main_li">配件</li></a>
<span class="main_l_sp">></span>
</ul>
<ul class="mian_l_ul">
<a href="#"><li class="main_li">童装玩具 /</li></a>
<a href="#"><li class="main_li">孕产 /</li></a>
<a href="#"><li class="main_li">用品</li></a>
<span class="main_l_sp">></span>
</ul>
</div>
<div class="main_l_m">
<div class="mian_l_m_top">
<a href="#"><img src="img/bigAd.jpg"></a>
</div>
<div class="mian_l_m_bot">
<a href="#"><img src="img/tm.jpg" class="tm"></a>
<a href="#"> <img src="img/ad.jpg" class="ad"></a>
<span class="sp1">理想生活上天猫</span>
<span class="sp2">4</span>
<span class="sp3">/6</span>
</div>
</div>
<div class="main_l_r">
<div class="main_l_r_t">
<a href="#"><img src="img/xyyp.jpg" alt=""></a>
</div>
<div class="main_l_r_b">
<span>今日热卖</span>
<a href="#"><img src="img/rm.jpg" alt=""></a>
</div>
</div>
</div>
<div class="main_bot">
<div class="mian_bot_l">
<a href="#"><img src="img/toutiao.jpg"></a>
<span>让你的生活更有趣</span>
</div>
<div class="mian_bot_r">
<a href="#"><img src="img/tt.jpg"></a>
<span class="sp1">更多></span>
<span class="sp2">微漫酱访谈第三期：超萌舞见弥音音！</span>
<span class="sp3">哈喽，大家好，我是你们可爱的微漫酱，
今天我们请到了一位舞见小姐姐来做客我
们的访谈事，她就是弥音音！
</span>
</div>
</div>
</div>
<div class="main_r">
<div class="main_r_1">
<a href="#"><img src="img/tx.jpg" alt=""></a>
<a href="#"><span class="sp sp1">Hi! 你好</span></a>
<a href="#"><span class="sp sp2 tao">领淘金币抵钱 </span></a>
<a href="#"><span class="sp sp3 tao">会员俱乐部</span></a>
<a href="#"><span class="sp sp4 btn">登录</span></a>
<a href="#"><span class="sp sp5 btn">注册</span></a>
<a href="#"><span class="sp sp6 btn">开店</span></a>
</div>
<div class="main_r_2">
<a href="#">网上有害信息举报专区</a>
<ul class="top">
<a href="#"><li class="li">公告</li></a>
<a href="#"><li class="li">规则</li></a>
<a href="#"><li class="li">论坛</li></a>
<a href="#"><li class="li">安全</li></a>
<a href="#"><li class="li">公益</li></a>
</ul>
<ul class="bot">
<li>淘宝公益平台正式更名</li>
<li>益起来商家招募即将截止</li>
<li>卖家如何设置公益宝贝</li>
<li>公益机构开店全攻略</li>
</ul>
</div>
<div class="main_r_3">
<ul>
<a href="#"><li><img src="img/icon1.gif" ><span class="sp">充话费</span></li></a>
<a href="#"><li><img src="img/icon2.gif" ><span class="sp">旅行</span></li></a>
<a href="#"><li><img src="img/icon3.gif" ><span class="sp">车险</span></li></a>
<a href="#"><li class="right"><img src="img/icon4.gif" ><span class="sp">游戏</span></li></a>
<a href="#"><li><img src="img/icon5.gif" ><span class="sp">**</span></li></a>
<a href="#"><li><img src="img/icon6.gif" ><span class="sp">电影</span></li></a>
<a href="#"><li><img src="img/icon7.gif" ><span class="sp">酒店</span></li></a>
<a href="#"><li class="right"><img src="img/icon8.gif" ><span class="sp">理财</span></li></a>
<a href="#"><li class="bot"><img src="img/icon9.gif" ><span class="sp">找服务</span></li></a>
<a href="#"><li class="bot"><img src="img/icon10.gif" ><span class="sp">演出</span></li></a>
<a href="#"><li class="bot"><img src="img/icon11.gif" ><span class="sp">水电费</span></li></a>
<a href="#"><li class="bot right"><img src="img/icon12.gif" ><span class="sp">火车票</span></li></a>
</ul>
</div>
<div class="main_r_4">
<a href="#"><span class="spl">阿里APP</span></a>
<a href="#"><span class="spr">更多></span></a>
<ul>
<li class="app"><a href="#"><img src="img/app1.png" ></a></li>
<li class="app"><a href="#"><img src="img/app2.png" ></a></li>
<li class="app"><a href="#"><img src="img/app3.png" ></a></li>
<li class="app"><a href="#"><img src="img/app4.png" ></a></li>
<li class="app"><a href="#"><img src="img/app5.png" ></a></li>
<li class="app"><a href="#"><img src="img/app6.png" ></a></li>
<li class="app"><a href="#"><img src="img/app7.png" ></a></li>
<li class="app"><a href="#"><img src="img/app8.png" ></a></li>
<li class="app"><a href="#"><img src="img/app9.png" ></a></li>
<li class="app"><a href="#"><img src="img/app10.png"></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
css源码
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html,body {
width: 100%;
height: 100%;
background-color: rgb(244, 244, 244);
}
/*头部--------------------------------------------------------------------------------*/
.head_warp{
width: 100%;
height: 30px;
}
.head_warp .head_warp_outer{
width: 1190px;
height: 30px;
margin: 0 auto;
}
.head_warp .head_l,
.head_warp .head_r{
line-height: 30px;
}
.head_warp .head_l{
float: left;
}
.head_warp .head_r{
float: right;
}
.head_warp li.head_li{
color: rgb(108,108,108);
float: left;
font-size: 13px;
margin-right: 20px;
}
.head_warp li.frist{
font-size: 14px;
color: #525252;
}
.head_warp li.head_li:hover{
color: #f40;
}
.head_warp::after {
content: "";
display: block;
clear: both;
}
/*搜索区---------------------------------------------------------------------------------------------------*/
.search_warp{
width: 100%;
height: 135px;
background-color: #fff;
}
.search_warp .search_outer {
width: 1190px;
height: 100%;
margin: 0 auto;
}
/*搜索区左边*/
.search_warp .search_outer .search_l {
width: 235px;
height: 100%;
float: left;
position: relative;
}
.search_warp .search_outer .search_l img{
position: absolute;
top: 32px;
left: 8px;
}
/*搜索区中*/
.search_warp .search_outer .search_m{
width: 800px;
height: 100%;
float: left;
}
.search_warp .search_outer .search_m .search_top {
float: left;
font-size: 14px;
color: #ff4400;
margin-right: 10px;
padding: 2px 4px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.search_warp .search_outer .search_m .search_top:hover{
background-color: #ff4400;
color: #ffffff;
}
.search_warp .search_outer .search_m .search_top_ul{
margin: 30px 0 0 70px;
}
.search_warp .search_outer .search_m .search_top_ul::after {
content: "";
display: block;
clear: both;
}
.search_warp .search_outer .search_m .search_box{
border:2px solid #ff4400;
width:700px ;
height: 38px;
border-radius: 22px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.search_warp .search_outer .search_m .search_box img{
width: 24px;
}
.search_warp .search_outer .search_m .search_box .fdj{
position: absolute;
top: 8px;
left: 14px;
}
.search_warp .search_outer .search_m .search_box .xj{
position: absolute;
top: 8px;
right: 77px;
}
.search_warp .search_outer .search_m .search_box input[type="text"]{
outline: none;
height: 26px;
width: 570px;
border: none;
margin: 7px 35px 10px;
background-color: #ffffff;
padding-left: 10px;
}
.search_warp .search_outer .search_m .search_box input[type="submit"]{
border-style: none;
background-color: #ff4400;
color: #fff;
padding:15px 24px 17px 20px;
position: absolute;
right: 0px;
line-height: 10px;
text-align: center;
font-size: 16px;
}
.search_warp .search_outer .search_m .search_m_b{
width: 800px;
margin: 0 auto;
}
.search_warp .search_outer .search_m .search_m_b .search_bot_ul{
margin-left: 66px;
}
.search_warp .search_outer .search_m .search_m_b .search_bot{
font-size: 12px;
color: #777;
float: left;
margin: 10px 5px;
}
.search_warp .search_outer .search_m .search_m_b .search_bot:hover{
color: #ff4400;
}
/*搜索区右边*/
.search_warp .search_outer .search_r{
width: 140px;
height: 100%;
float: left;
position: relative;
bottom: -10px;
}
.search_warp .search_outer .search_r .con{
position: relative;
border: 1px solid #ccc;
width: 78px;
height: 96px;
margin: 15px 20px;
}
.search_warp .search_outer .search_r img {
position: absolute;
display: inline-block;
width: 66px;
top: 22px;
left: 6px;
}
.search_warp .search_outer .search_r .text{
position: absolute;
display: inline-block;
top: -1px;
left: 12px;
color: #ff4400;
font-size: 13px;
}
.search_warp .search_outer .search_r .close {
position: absolute;
top: 15px;
left: 4px;
border: 1px solid #ccc;
width: 13px;
height: 13px;
text-align: center;
line-height: 13px;
font-size: 13px;
color: #cccccc;
}
.search_warp::after {
content: "";
display: block;
clear: both;
}
/*导航栏---------------------------------------------------------------------------------------*/
.nav_warp{
width: 100%;
height: 32px;
}
.nav_warp .nav_warp_outer {
width: 1190px;
height: 32px;
margin: 0 auto;
background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
}.nav_warp .nav_warp_outer h3{
width: 200px;
}
.nav_warp .nav_warp_outer h3{
float:left;
line-height: 32px;
text-align: center;
color: #fff;
background-color: #ff4400;
}
.nav_warp .nav_warp_outer .nav_li{
float:left;
line-height: 32px;
text-align: center;
color: #fff;
}
.nav_warp .nav_warp_outer .nav_li{
margin-right: 20px;
font-size: 13px;
padding: 0 6px;
}
.nav_warp .nav_warp_outer a li:hover{
color: #f40;
background-color: #fff;
}
/*主体区--------------------------------------------------------*/
.main_warp{
width: 100%;
height: 800px;
}
.main_warp .main_warp_outer{
width: 1190px;
height: 100%;
margin: 0 auto;
}
/*01左边*/
.main_warp .main_warp_outer .main_l{
width: 900px;
height: 800px;
float: left;
}
/*02 _01里边的上边*/
.main_warp .main_warp_outer .main_l .main_top{
width: 100%;
height: 620px;
}
/*03 _02里边的上边 的 左边*/
.main_warp .main_warp_outer .main_l .main_top .main_l_l{
box-sizing: border-box;
border: 1px solid #ff4400;
float: left;
width: 200px;
height: 620px;
background-color: white;
opacity: 0.5;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_l > .mian_l_ul {
width: 198px;
height: 30px;
display: inline-block;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_l > .mian_l_ul:hover {
background-color:#ffe4dc ;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_l .main_li {
float: left;
padding: 5px 0px 0 10px;
color: rgb(102,102,102);
font-size: 14px;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_l .main_l_sp {
float: right;
padding-top: 4px;
margin-right: 10px;
color: #bbb;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_l .main_li:hover{
color: #ff4400;
}
/*03 _02里边的上边 的 中间*/
.main_warp .main_warp_outer .main_l .main_top .main_l_m{
float: left;
width: 500px;
height: 620px;
}
/*03 _02里边的上边 的 右边*/
.main_warp .main_warp_outer .main_l .main_top .main_l_r {
float: left;
width: 200px;
margin-top: 10px;
height: 610px;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_r .main_l_r_t{
width: 200px;
height: 330px;
background-color: red;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_r .main_l_r_t img{
width: 200px;
height: 330px;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_r .main_l_r_b{
width: 200px;
margin-top: 30px;
height: 250px;
position: relative;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_r .main_l_r_b img{
width: 200px;
height: 250px;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_r .main_l_r_b span {
position: absolute;
font-size: 14px;
color: #aaa;
top: -20px;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_m .mian_l_m_top{
width: 480px;
height: 330px;
margin: 10px 10px 30px;
position: relative;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_m .mian_l_m_top img{
width: 480px;
height: 330px;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_m .mian_l_m_bot{
width: 480px;
height: 250px;
margin: 0 10px;
position: relative;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_m .mian_l_m_bot .tm{
width: 480px;
position: absolute;
top: -18px;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_m .mian_l_m_bot .sp1 {
position: absolute;
font-size: 13px;
color: #999;
top: -18px;
left: 128px;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_m .mian_l_m_bot .sp2 {
top: -18px;
right: 15px;
font-size: 13px;
color: #f40;
position: absolute;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_m .mian_l_m_bot .sp3 {
top: -18px;
right: 0px;
font-size: 13px;
color: #999;
position: absolute;
}
.main_warp .main_warp_outer .main_l .main_top .main_l_m .mian_l_m_bot .ad{
width: 480px;
height: 250px;
}
/*02 _01里边的下边*/
.main_warp .main_warp_outer .main_l .main_bot{
width: 100%;
height: 150px;
}
.main_warp .main_warp_outer .main_l .main_bot .mian_bot_l {
width: 200px;
height: 120px;
margin-top: 10px;
float: left;
background-color: #fff;
position: relative;
}
.main_warp .main_warp_outer .main_l .main_bot .mian_bot_l img{
position: absolute;
top: 26px;
left: 12px;
width: 170px;
}
.main_warp .main_warp_outer .main_l .main_bot .mian_bot_l span {
position: absolute;
top: 77px;
left: 53px;
color: #ccc;
font-size: 14px;
}
.main_warp .main_warp_outer .main_l .main_bot .mian_bot_r{
width:700px ;
height: 120px;
margin-top: 10px;
float: left;
background-color: #fff;
position: relative;
}
.main_warp .main_warp_outer .main_l .main_bot .mian_bot_r img{
position: absolute;
top: 22px;
width: 146px;
}
.main_warp .main_warp_outer .main_l .main_bot .mian_bot_r .sp1 {
color: #cccccc;
position: absolute;
right: 15px;
top: 30px;
font-size: 12px;
}
.main_warp .main_warp_outer .main_l .main_bot .mian_bot_r .sp2 {
position: absolute;
left: 160px;
top: 35px;
color: #777777;
font-size: 13px;
}
.main_warp .main_warp_outer .main_l .main_bot .mian_bot_r .sp3 {
position: absolute;
left:160px;
top: 56px;
padding-right: 10px;
color: #888;
font-size: 12px;
}
/*01右边*/
.main_warp .main_warp_outer .main_r{
width: 280px;
height: 740px;
margin-top: 10px;
margin-left: 10px;
float: left;
background-color: #ffffff;
}
.main_warp .main_warp_outer .main_r .main_r_1{
width: 100%;
height: 180px;
background-color: #f9f9f9;
padding-top: 20px;
position: relative;
}
.main_warp .main_warp_outer .main_r .main_r_1 img {
width: 64px;
border-radius: 50%;
display: block;
margin: 0 auto;
}
.main_warp .main_warp_outer .main_r .main_r_1 .sp{
color: #000;
font-size: 13px;
}
.main_warp .main_warp_outer .main_r .main_r_1 .sp1 {
display: block;
width: 52px;
margin: 10px auto 0;
}
.main_warp .main_warp_outer .main_r .main_r_1 .tao {
background-color: rgb(255, 228, 219);
padding: 2px 10px;
color: #ff4400;
border-radius: 10px;
display: inline-block;
margin-top: 10px;
}
.main_warp .main_warp_outer .main_r .main_r_1 .sp2 {
margin-left: 40px;
float: left;
}
.main_warp .main_warp_outer .main_r .main_r_1 .sp3 {
margin-right: 40px;
float: right;
}
.main_warp .main_warp_outer .main_r .main_r_1 .btn {
float: left;
color: #ffffff;
height: 18px;
width: 50px;
padding: 3px;
background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
margin: 20px 18px;
text-align: center;
border-radius: 20px;
display: block;
line-height: 18px;
}
.main_warp .main_warp_outer .main_r .main_r_2{
width: 100%;
height: 130px;
}
.main_warp .main_warp_outer .main_r .main_r_2>a {
display: block;
width: 280px;
height: 30px;
font-size: 13px;
color: #ff4400;
text-align: center;
background-color: rgb(255, 228, 221);
}
.main_warp .main_warp_outer .main_r li{
font-size: 13px;
color: #525252;
}
.main_warp .main_warp_outer .main_r .li:hover{
font-weight: bold;
}
.main_warp .main_warp_outer .main_r .top li {
float: left;
margin:10px 15px;
}
.main_warp .main_warp_outer .main_r .bot li {
float: left;
font-size: 12px;
margin: 10px 12px 0px 2px;
color: #ff4400;
}
.main_warp .main_warp_outer .main_r .top:after{
content: "";
display: block;
clear: both;
}
.main_warp .main_warp_outer .main_r .main_r_3 {
width: 100%;
height: 280px;
background-color: #ffffff;
}
.main_warp .main_warp_outer .main_r .main_r_3 li {
display: block;
box-sizing: border-box;
border-top: 1px solid #eee;
border-right: 1px solid #eee;
width: 70px;
height: 93px;
float: left;
position: relative;
}
.main_warp .main_warp_outer .main_r .main_r_3 .bot{
border-bottom:1px solid #eee;
}
.main_warp .main_warp_outer .main_r .main_r_3 .right{
border-right: none;
}
.main_warp .main_warp_outer .main_r .main_r_3 img{
width: 28px;
height: 28px;
display: block;
margin: 15px auto;
opacity: 0.85;
}
.main_warp .main_warp_outer .main_r .main_r_3 img:hover{
opacity: 1;
}
.main_warp .main_warp_outer .main_r .main_r_3 .sp{
display: block;
width: 70px;
text-align: center;
font-size: 13px;
margin-top: 10px;
}
.main_warp .main_warp_outer .main_r .main_r_3 span:hover{
color: #ff4400;
font-weight: normal;
}
.main_warp .main_warp_outer .main_r .main_r_4 {
width: 100%;
height: 130px;
position: relative;
}
.main_warp .main_warp_outer .main_r .main_r_4 .spl {
position: absolute;
top: -12px;
left: 10px;
color: red;
font-weight: bold;
font-size: 14px;
color: #525252;
}
.main_warp .main_warp_outer .main_r .main_r_4 .spr {
position: absolute;
top: -12px;
color: #999;
font-size: 13px;
right: 10px;
}
.main_warp .main_warp_outer .main_r .main_r_4 ul{
margin-top: 18px;
}
.main_warp .main_warp_outer .main_r .main_r_4 .app{
width: 56px;
height: 56px;
box-sizing: border-box;
float: left;
opacity: 0.8;
}
.main_warp .main_warp_outer .main_r .main_r_4 .app:hover{
opacity: 1;
}
.main_warp .main_warp_outer .main_r .main_r_4 img{
width: 35px;
height: 35px;
padding: 10px;
}
.main_warp .main_warp_outer::after {
content: "";
display: block;
clear: both;
}
ps:纯属学习交流,若有侵权或者其他不妥,尽请联系删除
链接: https://pan.baidu.com/s/1DU5QE2EKkNXSfOi8k530NQ
提取码: mu4i 复制这段内容后打开百度网盘手机App，操作更方便哦