这个是前段时间做的一个小组项目 以下是布局<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>专卖店查询-魅族官网</title>
<link rel="shortcut icon" href="img/favicon_19fbf41.ico" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/urlConfig.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div id="one">
<div id="one_bottom">
<div id="one_left">
<ul>
<li>
<a href="javascript:void(0)">商城</a>
</li>
<li>
<a href="javascript:void(0)">魅族</a>
</li>
<li>
<a href="javascript:void(0)">魅蓝</a>
</li>
<li>
<a href="javascript:void(0)">Flyme</a>
</li>
<li>
<a href="javascript:void(0)">云服务</a>
</li>
<li>
<a href="index.html">专卖店</a>
</li>
<li>
<a href="javascript:void(0)">服务支持</a>
</li>
<li>
<a href="javascript:void(0)">社区</a>
</li>
</ul>
</div>
<div id="one_right">
<ul>
<li id="a1">
<a href="javascript:void(0)">
<span>Select Region</span>
<ul id="ul1">
<li class="li1">简体中文</li>
<li class="li2">繁體中文</li>
<li class="li3">Engilsh</li>
<li class="li4">Русский</li>
</ul>
</a>
</li>
<li id="a2">
<a href="javascript:void(0)">
<img src="img/download_ec461fd.png" />APP下载
</a>
<p>
<img id="img" src="img/code_e26a984.jpg" />
</p>
</li>
</ul>
</div>
</div>
</div>
<div id="two">
<div class="two_left">
<a href="javascript:void(0)">
<img src="img/logo-new_2ea694e.png" />
</a>
</div>
<div class="two_right">
<ul>
<li class="a" id="t_t_div1">
<a href="javascript:void(0)">魅族手机</a>
</li>
<li class="a" id="t_t_div2">
<a href="javascript:void(0)">魅蓝手机</a>
</li>
<li class="a" id="t_t_div3">
<a href="javascript:void(0)">魅族声学</a>
</li>
<li class="a" id="t_t_div4">
<a href="javascript:void(0)">智能·配件</a>
</li>
<li class="a" id="t_t_div5">
<a href="javascript:void(0)">生活周边</a>
</li>
<li class="a">
<input type="text" id="inp" data-keyword="魅蓝 6T" placeholder="魅蓝 6T" />
</li>
<li id="dingwei" class="a" style="padding-top: 10px;">
<a href="javascript:void(0)">
<img class="yhdl" src="img/icon-user_47dae1a.jpg" />
</a>
<div class="t_r_bottom">
<ul>
<li>
<a href="javascript:void(0)">立即登陆</a>
</li>
<li>
<a href="javascript:void(0)">立即注册</a>
</li>
<li>
<a href="javascript:void(0)">我的订单</a>
</li>
<li>
<a href="javascript:void(0)">M码通道</a>
</li>
</ul>
</div>
</li>
<li class="a" style="padding-top: 10px;">
<a href="javascript:void(0)">
<img class="gwc" src="img/shopping-cart-gray_c2cb1d5.jpg" />
</a>
</li>
</ul>
</div>
</div>
<div class="t_t_div1">
<ul>
<li class="t_t_div_li1"><img src="img/Cgbj0VrxPbKAPw-1AAJWqasMn_A309.png" /></li>
<li class="t_t_div_li2"><img src="img/Cgbj0FrxPbKAURMmAAJgeOiuUGU292.png" /></li>
<li class="t_t_div_li3"><img src="img/Cgbj0VrxPbKAKcgdAADRxoC3l-8128.png" /></li>
<li class="t_t_div_li4"><img src="img/Cgbj0Vl4OYOAGRToAAJwA8hDe5Y164.png" /></li>
<li class="t_t_div_li5"><img src="img/Cgbj0FrxPgeAP99dAAuYs_pyDV0621.png" /></li>
<li class="t_t_div_li6"><img src="img/Cix_s1g-ZXuAYp1LABY2I5awJck337.png@480x480.jpg" /></li>
</ul>
</div>
<div class="t_t_div2">
<ul>
<li class="t_t_div_li1"><img src="img/Cgbj0VsM-iyAAgTIAAbXIwKFVL4647.png" /></li>
<li class="t_t_div_li2"><img src="img/Cgbj0VrxPw-AagPuAAI1cwVNeY8122.png" /></li>
<li class="t_t_div_li3"><img src="img/Cgbj0FrxPy6Ae3lKAAHGS6FCfDA943.png" /></li>
<li class="t_t_div_li4"><img src="img/Cgbj0VnCGzWAWqh8AAwk2MA0gtk390.png@480x480.jpg" /></li>
<li class="t_t_div_li5"><img src="img/Cgbj0VrxP0-AAEj5AAKl8ZNZqio759.png" /></li>
<li class="t_t_div_li6"><img src="img/Cgbj0FrxP3aANzaiAAHfla2tlaY634.png" /></li>
</ul>
</div>
<div class="t_t_div3">
<ul>
<li class="t_t_div_li1"><img src="img/Cgbj0VrxQ9OAZBhhAAEsbGP9-g0239.png" /></li>
<li class="t_t_div_li2"><img src="img/Cgbj0FrxQ9OASHrkAAHd8RyFtJk439.png" /></li>
<li class="t_t_div_li3"><img src="img/Cgbj0VrxQ9OAPp2AAAHX9602H_I285.png" /></li>
<li class="t_t_div_li4"><img src="img/Cgbj0FrxQ9OANS4SAAESYJ5J8G4662.png" /></li>
<li class="t_t_div_li5"><img src="img/Cgbj0VrxQ9OAHs0WAADro6KyNPI707.png" /></li>
<li class="t_t_div_li6"><img src="img/Cgbj0FrxQ9SAVWzVAAOOmwIFC_A168.png" /></li>
<li class="t_t_div_li7"><img src="img/Cgbj0VrxQ9SAAHYpAACf4yQYHPc137.png" /></li>
</ul>
</div>
<div class="t_t_div4">
<ul>
<li class="t_t_div_li1"><img src="img/Cgbj0FrxRYSAa6YQAABMFFMVjEk568.png" /></li>
<li class="t_t_div_li2"><img src="img/Cgbj0VrcXw2AL0tBAApTh_xwKKk709.png" /></li>
<li class="t_t_div_li3"><img src="img/1449647645-31973.png" /></li>
<li class="t_t_div_li4"><img src="img/Cgbj0VrxRYSAAVeoAAGI27DZUHE458.png" /></li>
<li class="t_t_div_li5"><img src="img/Cgbj0FrxRYSAInh6AADPoOeWAz8281.png" /></li>
<li class="t_t_div_li6"><img src="img/Cgbj0VrxRYSANxyhAACP0gFVN9E385.jpg" /></li>
<li class="t_t_div_li7"><img src="img/Cgbj0FrxRYWAOmysAAFBKxiKZ5U445.png" /></li>
</ul>
</div>
<div class="t_t_div5">
<ul>
<li class="t_t_div_li1"><img src="img/Cgbj0FrxTr6AWJRJAAIg8sQ2Sd8611.png" /></li>
<li class="t_t_div_li2"><img src="img/1449647645-31973.png" /></li>
<li class="t_t_div_li3"><img src="img/Cgbj0FrxTr2AG6btAAItkYZoxDY018.png" /></li>
<li class="t_t_div_li4"><img src="img/Cgbj0VrxTryACthRAAIS1cr7_bs210.png" /></li>
<li class="t_t_div_li5"><img src="img/Cgbj0FrxTr2AFRdiAAJP1ff_fyo000.png" /></li>
<li class="t_t_div_li6"><img src="img/Cgbj0VrxTr2AR8UeAALz4Fjd8wQ600.png" /></li>
<li class="t_t_div_li7"><img src="img/Cgbj0VrxTr2AVPZBAAH0J5Z6am0417.png" /></li>
</ul>
</div>
<div id="three">
<div id="three_top">
<div id="three_top_img">
<img src="img/index_banner_f56ffa4.jpg" id="pic" />
</div>
</div>
<div class="three_centre_top">
<a id="zhuanmaidian" href="javascript:void(0)">专卖店</a>
<a id="xingxiang" href="javascript:void(0)">形象销售点</a>
</div><br />
<div id="three_centre_right" style="display: none;">
<div class="xiaoshoudian">
<div class="xiaoshoudian_left">
<div class="xiaoshoudian_left_top">
<select id="select1">
<option>广东省</option>
</select>
<select id="select2">
<option>深圳市</option>
</select>
</div>
<div class="xiaoshoudian_left_center">
<input id="txt" data-keyword="试着搜 销售点~" placeholder="试着搜 销售点~" />
<span>
<a href="javascript:void(0)">搜索</a>
</span>
</div>
<div class="xiaoshoudian_left_bottom">
<ul class="xiaoshoudian_left_bottom_ul">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
<li><span>13</span></li>
<li><span>14</span></li>
<li><span>15</span></li>
<li><span>16</span></li>
<li><span>17</span></li>
<li><span>18</span></li>
<li><span>19</span></li>
<li><span>20</span></li>
</ul>
</div>
</div>
<div class="xiaoshoudian_right">
<img src="img/ditu.png" />
</div>
</div>
<div id="three_bottom_x">
<div class="three_bottom_x_left">
<span>您的满意，我们的动力</span>
<a class="myd" href="#">满意度调查 </a>
</div>
<div class="three_bottom_x_right">
<span>加盟魅族，梦想从此开始</span>
<a class="jm" href="#">加盟认证店 </a>
<a class="xs" href="#">加盟销售精英</a>
</div>
</div>
</div>
<div id="three_centre_left" style="display: block;">
<div class="three_centre_bottom">
<div class="three_centre_bottom_top">
当前城市:
<select id="select1">
<option>广东省</option>
</select>
<select id="select2">
<option>深圳市</option>
</select>
</div>
<div class="three_centre_bottom_bottom">
<div id="dianmin" class="dianmin1"></div>
<div id="dianmin" class="dianmin2"></div>
<div id="dianmin" class="dianmin3"></div>
<div id="dianmin" class="dianmin4"></div>
<div id="dianmin" class="dianmin5"></div>
<div id="dianmin" class="dianmin6"></div>
<div id="dianmin" class="dianmin7"></div>
<div id="dianmin" class="dianmin8"></div>
<div id="dianmin" class="dianmin9"></div>
</div>
</div>
<div id="three_bottom">
<div class="t_b_bottom">
<span>加盟魅族，梦想从此开始</span>
<a class="jm" href="javascript:void(0)">加盟认证店 </a>
<a class="xs" href="javascript:void(0)">加盟销售精英</a>
</div>
</div>
</div>
</div>
<div id="four">
<div class="four_top">
<div class="four_top_left">
<ul>
<li>
<a href="javascript:void(0)">
<img src="img/e359f13e-3010-402f-87b0-1b4f9e1abbeb.png" />
<span>全场顺丰包邮</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/147d3cc3-b434-46a3-ba03-852ed7e50e40.png" />
<span>百城速达</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/ec5aad43-2cd2-49db-ad98-420def128e1f.png" />
<span>7天无理由退货</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/d914c51f-1e83-4954-a5ff-623962d408ea.png" />
<span>15天换货保障</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/810a9fae-4875-4d08-9403-65bc004c66f4.png" />
<span>1年免费保修</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/3ac6ea23-4d1f-472b-9c67-cc343526475c.png" />
<span>线下体验店</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/dc023b04-03ff-4f6c-9222-6022aaa90e9c.png" />
<span>远程支持服务</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/a794fcd4-888a-408c-8714-2e5c764da09b.png" />
<span>上门快修</span>
</a>
</li>
</ul>
</div>
<div class="four_top_right">
<span>周一至周日 7:30-24:00</span>
<p>400-788-3333</p>
<a href="javascript:void(0)">
<img src="img/footer_icon_09_60fabcd.png" />
<span>在线客服</span>
</a>
</div>
</div>
<hr />
<div class="four_bottom">
<div class="four_bottom_top">
<ul>
<li class="lj">
<a href="javascript:void(0)">了解魅族</a>
</li>
<li class="lj">
<a href="javascript:void(0)">加入我们</a>
</li>
<li class="lj">
<a href="javascript:void(0)">联系我们</a>
</li>
<li class="lj">
<a href="javascript:void(0)">Flyme</a>
</li>
<li class="lj">
<a href="javascript:void(0)">魅族社区</a>
</li>
<li class="lj">
<a href="javascript:void(0)">天猫旗舰店</a>
</li>
<li class="lj">
<a href="javascript:void(0)">问题反馈</a>
</li>
<li class="lj">
<a href="javascript:void(0)">线上销售授权名单公示</a>
</li>
<li class="lj">
<a href="javascript:void(0)">出版物经营许可证</a>
</li>
<li class="xf">
<a href="javascript:void(0)" class="a3">简体中文</a>
<ul id="ul2">
<li class="li5">Русский</li>
<li class="li6">Engilsh</li>
<li class="li7">繁體中文</li>
<li class="li8">简体中文</li>
</ul>
</li>
</ul>
</div>
<div class="four_bottom_center">
©2018 Meizu Telecom Equipment Co., Ltd. All rights reserved.
<a href="javascript:void(0)">粤ICP备13003602号</a>
<a href="javascript:void(0)">合字B2-20170010</a>
<a href="javascript:void(0)">营业执照</a>
<a href="javascript:void(0)">法律声明</a>
<img src="img/7.png" /> 粤公网安备 44049102496009 号
<img id="img6" src="img/6.png" />
<img id="img5" src="img/5.png" />
<img id="img4" src="img/4.png" />
</div>
<div class="four_bottom_bottom">
<ul>
<li>
<img id="img3" src="img/3.png" />
</li>
<li id="weixindinwei">
<img id="img2" src="img/2.png" />
<img id="weixin" src="img/wx-code_94c130c.jpg" />
</li>
<li>
<img id="img1" src="img/1.png" />
</li>
</ul>
</div>
</div>
</div>
<div id="five" style="display: none;">
<ul>
<li id="app">
<a>APP</a>
<div class="five_ewm">
<img src="img/qrcode-3389e5b72a.png" />
<a>扫码下载魅族商城APP</a>
</div>
</li>
<li id="root">
<a>
<div id="root_left">
Λ
</div>
<div id="root_right">
回到顶部
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
以下是数据库加载的代码function Interface() {
//专卖店
var obj = $.ajax({
url: Config.routeUrl + "api/My/lyfInfo", //拼接配置路由
async: true,
data: {
"type": '专卖店'
},
type: "POST",
success: function(msg) {
console.log(msg);
for(var k = 0; k < msg.length; k++) {
$(".three_centre_bottom_bottom div").each(function(i, e) {
if(k == i) {
$(this).append("<a href='javascript:void(0)'>" + msg[k].Shop + "</a><p>" + msg[k].Impower + "</p><p>" + msg[k].Address + "</p><p>" + msg[k].Phone + "</p>")
}
})
}
},
error: function(a, e) {
alert("系统错误！请联系管理员")
}
})
//形象销售
var obj = $.ajax({
url: Config.routeUrl + "api/My/lyfInfo", //拼接配置路由
async: true,
data: {
"type": '形象销售'
},
type: "POST",
success: function(msg) {
console.log(msg);
for(var k = 0; k < msg.length; k++) {
$(".xiaoshoudian_left_bottom_ul li").each(function(i, e) {
if(k == i) {
$(this).append("<p class='p1'>" + msg[k].Shop + "</p><p class='p2'>" + msg[k].Address + "</p><p class='p3'>" + msg[k].Phone + "</p>")
}
})
}
},
error: function(a, e) {
alert("系统错误！请联系管理员")
}
})
//魅族手机
var obj = $.ajax({
url: Config.routeUrl + "api/My/GoodsInfo", //拼接配置路由
async: true,
data: {
"type": '魅族手机'
},
type: "POST",
success: function(msg) {
console.log(msg);
for(var k = 0; k < msg.length; k++) {
$(".t_t_div1 ul li").each(function(i, e) {
if(k == i) {
$(this).append("<p>" + msg[k].GoodsName + "</p><p>" + msg[k].Price + "</p>")
}
})
}
},
error: function(a, e) {
alert("系统错误！请联系管理员")
}
})
//魅蓝手机
var obj = $.ajax({
url: Config.routeUrl + "api/My/GoodsInfo", //拼接配置路由
async: true,
data: {
"type": '魅蓝手机'
},
type: "POST",
success: function(msg) {
console.log(msg);
for(var k = 0; k < msg.length; k++) {
$(".t_t_div2 ul li").each(function(i, e) {
if(k == i) {
$(this).append("<p>" + msg[k].GoodsName + "</p><p>" + msg[k].Price + "</p>")
}
})
}
},
error: function(a, e) {
alert("系统错误！请联系管理员")
}
})
//魅族声学
var obj = $.ajax({
url: Config.routeUrl + "api/My/GoodsInfo", //拼接配置路由
async: true,
data: {
"type": '魅族声学'
},
type: "POST",
success: function(msg) {
console.log(msg);
for(var k = 0; k < msg.length; k++) {
$(".t_t_div3 ul li").each(function(i, e) {
if(k == i) {
$(this).append("<p>" + msg[k].GoodsName + "</p><p>" + msg[k].Price + "</p>")
}
})
}
},
error: function(a, e) {
alert("系统错误！请联系管理员")
}
})
//智能配件
var obj = $.ajax({
url: Config.routeUrl + "api/My/GoodsInfo", //拼接配置路由
async: true,
data: {
"type": '智能配件'
},
type: "POST",
success: function(msg) {
console.log(msg);
for(var k = 0; k < msg.length; k++) {
$(".t_t_div4 ul li").each(function(i, e) {
if(k == i) {
$(this).append("<p>" + msg[k].GoodsName + "</p><p>" + msg[k].Price + "</p>")
}
})
}
},
error: function(a, e) {
alert("系统错误！请联系管理员")
}
})
//生活周边
var obj = $.ajax({
url: Config.routeUrl + "api/My/GoodsInfo", //拼接配置路由
async: true,
data: {
"type": '生活周边'
},
type: "POST",
success: function(msg) {
console.log(msg);
for(var k = 0; k < msg.length; k++) {
$(".t_t_div5 ul li").each(function(i, e) {
if(k == i) {
$(this).append("<p>" + msg[k].GoodsName + "</p><p>" + msg[k].Price + "</p>")
}
})
}
},
error: function(a, e) {
alert("系统错误！请联系管理员")
}
})
}
Interface();
})
css代码
body,
ul,
li,
p {
margin: 0px;
padding: 0px;
}
/*one开始*/
#one {
width: 100%;
height: 36px;
background-color: black;
}
#one_bottom {
width: 1340px;
height: 36px;
color: darkgray;
margin: 0px auto;
}
ul,
li {
list-style: none;
}
/*one 左边开始*/
#one_left {
float: left;
}
#one_left li {
float: left;
line-height: 36px;
margin-right: 22px;
}
#one_left a:hover {
color: white;
}
#one_left a {
color: darkgray;
}
/*one 右边开始*/
#one_right {
float: right;
}
#one_right a {
line-height: 20px;
color: darkgray;
}
#one_right ul {
float: right;
}
#one_right img {
margin-right: 15px;
}
#one_right #a1 {
padding: 8px;
position: relative;
float: left;
}
#one_right #a1:hover {
background-color: white;
color: black;
}
#one_right #a2 {
padding: 8px 15px;
float: right;
position: relative;
}
#one_right #a2:hover {
background-color: white;
color: black;
cursor: pointer;
}
#img {
width: 120px;
display: none;
position: absolute;
top: 40px;
right: -15px;
z-index: 100;
}
a {
text-decoration: none;
line-height: 36px;
}
#ul1 {
font-size: 13px;
line-height: 36px;
width: 118px;
background: white;
position: absolute;
color: black;
display: none;
left: 0px;
z-index: 100;
}
.li1 {
background: url(../img/1c31db15-ab85-4932-8e6c-edfd6039bc60.png)5px 9px no-repeat;
background-size: 20px;
padding-left: 35px;
}
.li2 {
background: url(../img/85fba643-95ca-4db1-991c-43e66f108afb.png)5px 9px no-repeat;
background-size: 20px;
padding-left: 35px;
}
.li3 {
background: url(../img/2ca9de93-02cb-4ded-ab0a-c497dcf06c5a.png)5px 9px no-repeat;
background-size: 20px;
padding-left: 35px;
}
.li4 {
background: url(../img/e743e97c-71af-4853-a91d-bd81c2d3a31c.png)5px 9px no-repeat;
background-size: 20px;
padding-left: 35px;
}
.li1:hover,
.li2:hover,
.li3:hover,
.li4:hover,
.li5:hover,
.li6:hover,
.li7:hover,
.li8:hover {
color: darkgray;
}
/*two开始*/
#two {
width: 1340px;
height: 80px;
margin: 0px auto;
}
.two_left {
width: 35%;
height: 100%;
line-height: 95px;
float: left;
}
.two_right {
width: 65%;
height: 100%;
float: right;
}
.two_right .a {
float: left;
height: 80px;
line-height: 80px;
padding-left: 15px;
padding-right: 17px;
color: darkgray;
}
#t_t_div1 a,
#t_t_div2 a,
#t_t_div3 a,
#t_t_div4 a,
#t_t_div5 a {
color: black;
}
#t_t_div1:hover a,
#t_t_div2:hover a,
#t_t_div3:hover a,
#t_t_div4:hover a,
#t_t_div5:hover a{
color: #31ADED;
}
#inp {
border: 1px solid darkgray;
height: 28px;
outline: none;
color: darkgray;
padding-right: 20px;
background: url(../img/9.png) 172px 8px no-repeat;
}
.yhdl,
.gwc {
height: 28px;
}
#dingwei {
position: relative;
}
.t_r_bottom {
background: white;
display: none;
width: 100px;
font-size: 13px;
line-height: 30px;
text-align: center;
height: 150px;
position: absolute;
right: -22px;
top: 55px;
}
.t_r_bottom a {
color: black;
}
.t_r_bottom a:hover {
color: #31ADED;
}
/*魅族手机 魅蓝手机 魅族声学 智能·配件 时候周边*/
#two {
position: relative;
}
.t_t_div1,
.t_t_div2,
.t_t_div3,
.t_t_div4,
.t_t_div5 {
position: absolute;
display: none;
top: 115px;
width: 100%;
height: 140px;
text-align: center;
font-size: 11px;
background: white;
}
.t_t_div1 img,
.t_t_div2 img,
.t_t_div3 img,
.t_t_div4 img,
.t_t_div5 img {
width: 90px;
}
.t_t_div1 ul,
.t_t_div2 ul,
.t_t_div3 ul,
.t_t_div4 ul,
.t_t_div5 ul {
width: 900px;
height: 100%;
margin: 0px auto;
}
.t_t_div1 li,
.t_t_div2 li,
.t_t_div3 li,
.t_t_div4 li,
.t_t_div5 li {
float: left;
margin-left: 15px;
margin-right: 15px;
}
/*three开始*/
#three {
width: 100%;
height: 1400px;
border-bottom: 1px solid darkgray;
}
#select1,
#select2 {
font-size: 17px;
height: 35px;
width: 160px;
outline: none;
}
/*three 头部开始*/
#three_top {
width: 100%;
background: #F7F7F7;
margin: 0px auto;
}
#three_top_img {
width: 1340px;
margin: 0px auto;
}
#three_top_img img {
width: 1340px;
}
/*three 中间部分开始*/
/*three 中上部分开始 专卖店部分*/
#three_centre {
width: 1340px;
height: 780px;
margin: 0px auto;
border-bottom: solid 1px darkgray;
}
.three_centre_top {
height: 60px;
border-bottom: solid 2px darkgray;
width: 1340px;
margin: 0px auto;
}
.three_centre_top a {
font-size: 30px;
}
.three_centre_bottom_top {
height: 50px;
line-height: 50px;
}
#zhuanmaidian {
color: darkgray;
}
#xingxiang {
margin-left: 70px;
color: darkgray;
}
/*three 中下部分开始*/
#dianmin a {
color: #00C3F6;
font-size: 15px;
}
#dianmin p {
font-size: 13px;
}
#dianmin {
float: left;
margin: 20px 25px;
width: 392px;
height: 182px;
text-align: center;
}
/*three 底部开始*/
#three_bottom {
padding-top: 22px;
padding-bottom: 88px;
width: 1340px;
height: 50px;
margin: 0px auto;
}
.t_b_bottom {
margin-top: 20px;
line-height: 50px;
float: right;
font-size: 20px;
}
.jm {
margin-left: 40px;
padding: 10px;
color: #00C3F5;
border: solid #00C3F5 1px;
}
.xs {
padding: 10px;
margin-left: 10px;
color: #00C3F5;
border: solid #00C3F5 1px;
}
#three_centre_left {
width: 1340px;
height: 590px;
margin: 0px auto;
}
/*three 形象销售点部分 左部分开始 */
.xiaoshoudian {
height: 685px;
width: 1340px;
margin: 0px auto;
}
.xiaoshoudian_left {
float: left;
width: 25%;
height: 100%;
}
.xiaoshoudian_left_top {
height: 50px;
line-height: 50px;
}
.xiaoshoudian_left_center {
height: 50px;
line-height: 50px;
}
#txt {
width: 240px;
height: 30px;
color: darkgray;
outline: auto;
}
.xiaoshoudian_left_center span {
padding: 7px 20px 10px;
background-color: #11BCF0;
}
.xiaoshoudian_left_center a {
color: black;
}
.xiaoshoudian_left_bottom_ul {
height: 520px;
overflow: auto;
font-size: 13px;
width: 310px;
padding: 30px 30px 0px 0px;
vertical-align: text-bottom;
}
.xiaoshoudian_left_bottom_ul li {
height: 70px;
margin: 15px 0px;
}
.xiaoshoudian_left_bottom_ul li:hover {
cursor: pointer;
}
.xiaoshoudian_left_bottom_ul li span {
float: left;
height: 100%;
width: 30px;
color: darkgray;
text-align: center;
line-height: 50px;
}
.p1 {
color: black;
}
.p2 {
color: darkgray;
}
.p3{
color: darkgray;
}
/*three 形象销售点部分 右部分开始 */
.xiaoshoudian_right {
width: 75%;
height: 100%;
float: right;
}
.xiaoshoudian_right img {
width: 1005px;
}
/*three 形象销售点部分 底部开始*/
#three_bottom_x {
padding-top: 20px;
height: 50px;
width: 1340px;
margin: 0px auto;
}
.three_bottom_x_left {
float: left;
}
.three_bottom_x_right {
float: right;
}
.myd {
margin-left: 30px;
padding: 10px 25px;
color: #00C3F5;
border: solid #00C3F5 1px;
}
/*four开始*/
/*four开始 上部分*/
#four {
width: 1340px;
height: 260px;
margin: 0px auto;
}
.four_top {
height: 130px;
width: 100%;
margin-top: 50px;
}
hr {
margin: 20px 0px;
}
/*four开始 上左部分*/
.four_top_left {
float: left;
width: 1140px;
}
.four_top_left li {
width: 280px;
height: 58px;
float: left;
line-height: 58px;
}
.four_top_left img {
margin-right: 5px;
vertical-align: middle;
}
.four_top_left a {
color: darkgray;
font-size: 13px;
width: 160px;
line-height: 30px;
height: 30px;
}
.four_bottom_top span {
vertical-align: middle;
}
/*four开始 上右部分*/
.four_top_right {
margin-top: 30px;
float: right;
}
.four_top_right span {
color: darkgray;
font-size: 13px;
}
.four_top_right p {
color: #00A8EB;
font-size: 25px;
}
.four_top_right a img {
vertical-align: middle;
}
.four_top_right a span {
color: black;
font-size: 16px;
vertical-align: middle;
}
/*four开始 下部分*/
.four_bottom {
height: 80px;
}
/*four 下部分的头部开始*/
.four_bottom_top {
float: left;
height: 30px;
width: 995px;
}
.four_bottom_top li {
float: left;
height: 30px;
}
.four_bottom_top a {
color: darkgray;
font-size: 13px;
line-height: 30px;
}
.li8 {
background: url(../img/1c31db15-ab85-4932-8e6c-edfd6039bc60.png)5px 5px no-repeat;
background-size: 20px;
padding-left: 35px;
}
.li7 {
background: url(../img/85fba643-95ca-4db1-991c-43e66f108afb.png)5px 5px no-repeat;
background-size: 20px;
padding-left: 35px;
}
.li6 {
background: url(../img/2ca9de93-02cb-4ded-ab0a-c497dcf06c5a.png)5px 5px no-repeat;
background-size: 20px;
padding-left: 35px;
}
.li5 {
background: url(../img/e743e97c-71af-4853-a91d-bd81c2d3a31c.png)5px 5px no-repeat;
background-size: 20px;
padding-left: 35px;
}
.lj a {
font-size: 11px;
padding-right: 15px;
margin-right: 15px;
border-right: solid 1px darkgray;
}
.lj a:hover {
color: #00C3F6;
}
.a3 {
width: 70px;
background: url(../img/1c31db15-ab85-4932-8e6c-edfd6039bc60.png)5px 4px no-repeat;
background-size: 20px;
padding-left: 35px;
height: 30px;
padding: 5px 0px 5px 35px;
/*上 左 下 右*/
}
.xf {
background: white;
position: relative;
}
#ul2 {
font-size: 13px;
line-height: 36px;
width: 110px;
background: white;
position: absolute;
color: black;
display: none;
left: 0px;
z-index: 100;
top: -119px;
left: 2px;
}
#ul2 li {
width: 60px;
}
/*four 下部分的中部开始*/
.four_bottom_center {
float: left;
font-size: 13px;
color: darkgray;
height: 50px;
}
.four_bottom_center a {
color: darkgray;
}
.four_bottom_center a:hover {
color: #00C3F5;
}
#img1:hover,
#img2:hover,
#img3:hover,
#img4:hover,
#img5:hover,
#img6:hover {
cursor: pointer;
}
/*four 下部分的底部开始*/
.four_bottom_bottom {
float: right;
}
.four_bottom_bottom img {
margin-right: 20px;
}
.four_bottom_bottom li {
float: left;
}
#weixindinwei {
position: relative;
}
#weixindinwei:hover {
cursor: pointer;
}
#weixin {
width: 200px;
position: absolute;
right: -60px;
top: -200px;
display: none;
}
/*four结束*/
/*five 开始*/
#five {
width: 120px;
position: fixed;
bottom: 105px;
right: 0px;
}
#five li {
height: 50px;
background: darkgray;
text-align: center;
}
#five a {
line-height: 50px;
}
.five_ewm {
display: none;
position: absolute;
right: 50px;
padding: 10px;
bottom: 53px;
background: #A39A9A;
font-size: 14px;
}
.five_ewm img {
width: 150px;
}
#app {
margin-left: 70px;
width: 50px;
}
#app a {
color: white;
}
#app:hover {
cursor: pointer;
}
#root {
margin-top: 3px;
width: 120px;
margin-left: 70px;
}
#root_left {
color: white;
float: left;
width: 50px;
}
#root_right {
width: 70px;
color: white;
font-size: 13px;
float: right;
}