<!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>Document</title>
<link rel="stylesheet" href="./box.css">
</head>
<body>
<header>
<div class="div1">
<img src="./img/1_03.gif" alt="">
<div class="div1_1">
<p>|</p>
</div>
<div class="div1_2">
<p><i> 奉行卓越品质</i></p>
<p><i>则可拥抱世界</i> </p>
</div>
</div>
<div class="div2">
<div class="div2_1">
<ul>
<li>网站首页</li>
<li>关于我们</li>
<li>新闻资讯</li>
<li>成功案例</li>
<li>尊享服务</li>
<li>招商加盟</li>
<li>联系我们</li>
</ul>
</div>
<div class="div2_2"></div>
</div>
</header>
<div class="div3">
<!-- <div></div> -->
<img src="./img/1_09.gif" alt="">
<!-- <div></div> -->
</div>
<div class="div4">
<p class="div4_1">战略合作 Strategic partners</p>
<p class="div4_2">真诚,共赢,无微不至</p>
<div class="div4_3">
<div class="div4_3_1"><img src="./img/1_12.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_13.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_14.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_15.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_16.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_17.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_19.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_20.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_21.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_22.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_23.gif" alt=""></div>
<div class="div4_3_1"><img src="./img/1_24.gif" alt=""></div>
</div>
</div>
<div class="div5">
<p class="div5_1">我们的优势 Our Advantages</p>
<p class="div5_2">创独一无二的设计,造国际品质的产品,行无微不至的服务</p>
<div class="div5_3">
<div class="div5_3_1">
<div class="yuan">
<div class="yuan_1"><img src="./img/1_27.gif" alt=""></div>
</div>
<h5 class="p1">我们的设计 our Design</h5>
<p class="p2">从实地到方案敲定再到设计出图,每一步</p>
<p class="p2">都有优秀的设计团队全程跟踪,为您打造</p>
<p class="p2">出最合适的作品是最诚恳的义务.</p>
</div>
<div class="div5_3_1">
<div class="yuan">
<div class="yuan_1"><img src="./img/1_29.gif" alt=""></div>
</div>
<h5 class="p1">我们的设计 our Design</h5>
<p class="p2">从实地到方案敲定再到设计出图,每一步</p>
<p class="p2">都有优秀的设计团队全程跟踪,为您打造</p>
<p class="p2">出最合适的作品是最诚恳的义务.</p>
</div>
<div class="div5_3_1">
<div class="yuan">
<div class="yuan_1"><img src="./img/1_31.gif" alt=""></div>
</div>
<h5 class="p1">我们的设计 our Design</h5>
<p class="p2">从实地到方案敲定再到设计出图,每一步</p>
<p class="p2">都有优秀的设计团队全程跟踪,为您打造</p>
<p class="p2">出最合适的作品是最诚恳的义务.</p>
</div>
</div>
</div>
<div class="div6">
<h5 class="div6_1">成功案例 Successful Case</h5>
<p class="div6_2">始终终以建设温馨,和谐的家园,提升您的居家生活品味为己任</p>
<div class="div6_3">
<ul>
<li>服务行业 <span></span></li>
<li>教育行业<span></span></li>
<li>房产行业<span></span></li>
<li>能源行业<span></span></li>
</ul>
</div>
<div class="div6_4">
<div><img src="./img/1_36.gif" alt=""></div>
<div><img src="./img/1_38.gif" alt=""></div>
<div><img src="./img/1_40.gif" alt=""></div>
<div><img src="./img/1_44.gif" alt=""></div>
<div><img src="./img/1_45.gif" alt=""></div>
<div><img src="./img/1_46.gif" alt=""></div>
</div>
</div>
<div class="div7">
<div class="div7_1">
<div class="div7_2">
<h3>公司新闻 Company News</h3>
<p>一款APP从设计稿到切图过程全方位揭秘 <span>10-10</span> </p>
<p>关于移动端设计工作者必备相关素质<span>10-10</span></p>
<p>移动产品经理必须了解 产品的体验进化设<span>10-10</span></p>
<p>App细节设计系列 Path for ioS分析<span>10-10</span></p>
<p>指尖上的世界杯 看国内新闻客户端功能剖<span>10-10</span></p>
<p>更好的方式来引导用户为APP应用打分<span>10-10</span></p>
<div class="div7_3">MORE INFO-></div>
</div>
<div class="div7_2">
<h3>行业新闻 Industry New:s</h3>
<p>一款APP从设计稿到切图过程全方位揭秘 <span>10-10</span> </p>
<p>关于移动端设计工作者必备相关素质<span>10-10</span></p>
<p>移动产品经理必须了解 产品的体验进化设<span>10-10</span></p>
<p>App细节设计系列 Path for ioS分析<span>10-10</span></p>
<p>指尖上的世界杯 看国内新闻客户端功能剖<span>10-10</span></p>
<p>更好的方式来引导用户为APP应用打分<span>10-10</span></p>
<div class="div7_3">MORE INFO-></div>
</div>
<div class="div7_2">
<h3>媒体报道 Media report:s</h3>
<p>一款APP从设计稿到切图过程全方位揭秘 <span>10-10</span> </p>
<p>关于移动端设计工作者必备相关素质<span>10-10</span></p>
<p>移动产品经理必须了解 产品的体验进化设<span>10-10</span></p>
<p>App细节设计系列 Path for ioS分析<span>10-10</span></p>
<p>指尖上的世界杯 看国内新闻客户端功能剖<span>10-10</span></p>
<p>更好的方式来引导用户为APP应用打分<span>10-10</span></p>
<div class="div7_3">MORE INFO-></div>
</div>
</div>
</div>
<div class="div8">
<ul>
<li>网站首页</li>
<li>关于我们</li>
<li>产品展示</li>
<li>客户案例</li>
<li>新闻资讯</li>
<li>帮助中心</li>
<li>解决方案</li>
<li>联系我们</li>
</ul>
<div class="div8_1">
<p>Copyright @ 2002-2015 上海机械设备服务有限公司 版权所有 Power by DedeCms</p>
<p>电话:15918779820 E-mail:89898981@qq.com 地址:上海市沙河广园东路1858新天地服装城</p>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
body {
width: 100%;
height: 100%;
/* background-color: aqua; */
}
header {
width: 100%;
height: 100px;
background-color: white;
display: flex;
position: absolute;
}
.div1 {
width: 45%;
height: 100%;
background-color: white;
display: flex;
align-items: center;
}
.div1 img {
width: 253px;
height: 60px;
margin-left: 148px;
}
.div1_1 p {
font-size: 30px;
margin-left: 20px;
margin-top: -5px;
color: #BABAB9;
}
.div1_2 p {
margin-left: 30px;
color: #BABAB9;
font-family: kaiti;
}
.div2 {
width: 55%;
height: 100%;
background-color: white;
color: black;
font-family: kaiti;
display: flex;
justify-content: space-between;
}
.div2_1 {
width: 90%;
}
.div2_1 ul {
margin-top: 47px;
display: flex;
justify-content: space-around;
}
.div2_1 ul li:hover{
background-color: #E24041;
}
.div2_2 {
width: 10%;
height: 100%;
background-color: white;
}
.div3 {
display: flex;
justify-content: space-around;
}
div3 img {
width: 1400px;
height: 460px;
background-size: 100%;
background-repeat: no-repeat;
}
.div4 {
width: 100%;
height: 380px;
background-color: #F7F7F7;
margin-top: -4px;
/* position: absolute; */
}
.div4_1 {
font-size: 25px;
text-align: center;
padding-top: 35px;
/* margin-top: 35px; */
}
.div4_2 {
font-size: 15px;
text-align: center;
margin-top: 22px;
color: #9CA1A8;
}
.div4_3 {
width: 1131px;
height: 202px;
/* background-color: aqua; */
display: flex;
margin: 22px auto;
justify-content: space-around;
flex-wrap: wrap;
}
.div4_3_1 {
width: 16.5%;
height: 100px;
/* background-color: blue; */
}
.div5 {
width: 100%;
height: 543px;
background-color: #1A1B1F;
margin-top: -4px;
position: absolute;
}
.div5_1 {
font-size: 25px;
text-align: center;
padding-top: 35px;
color: white;
/* margin-top: 35px; */
}
.div5_2 {
font-size: 15px;
text-align: center;
margin-top: 22px;
color: white;
}
.div5_3 {
width: 1144px;
height: 330px;
/* background-color: aqua; */
margin: 40px auto;
display: flex;
align-items: end;
justify-content: space-between;
}
.div5_3_1 {
width: 340px;
height: 260px;
background-color: #D1D1D3;
}
.yuan {
width: 130px;
height: 130px;
background-color: white;
border-radius: 100px;
margin-top: -70px;
margin-left: 105px;
display: flex;
align-items: center;
justify-content: center;
}
.yuan_1 {
width: 110px;
height: 110px;
border-radius: 100px;
background-color: #E24041;
/* display: flex; */
}
.yuan_1 img {
width: 70px;
height: 70px;
margin-top: 20px;
margin-left: 20px;
}
.p1 {
color: #E24041;
font-size: 18px;
text-align: center;
padding-top: 31px;
}
.p2 {
font-size: 12px;
text-align: center;
padding-top: 22px;
}
.div6 {
width: 100%;
height: 809px;
margin-top: 540px;
/* background-color: #2b80f7; */
}
.div6_1 {
font-size: 27px;
text-align: center;
padding-top: 35px;
/* margin-top: 35px; */
}
.div6_2 {
font-size: 15px;
text-align: center;
margin-top: 22px;
color: #BABAB9;
}
.div6_3 {
width: 800px;
height: 40px;
background-color: #666666;
margin: 35px auto;
color: white;
display: flex;
}
.div6_3 ul {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.div6_3 ul li {
width: 200px;
height: 100%;
line-height: 40px;
text-align: center;
position: relative;
}
.div6_3 ul li:hover {
background-color: red;
}
.div6_3 ul li:hover span {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #f75a53;
position: absolute;
top: 40px;
left: 90px;
}
.div6_4 {
width: 1144px;
height: 555px;
/* background-color: #666666; */
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.div7 {
width: 100%;
height: 352px;
background-color: #F2F2F2;
}
.div7_1 {
width: 1152px;
height: 100%;
/* background-color: aqua; */
margin: 0 auto;
display: flex;
}
.div7_2 {
width: 33.3%;
height: 100%;
line-height: 35px;
background-color: #F7F7F7;
}
.div7_2 h3 {
padding-top: 37px;
}
.div7_2 p {
font-size: 10px;
}
.div7_2 p span {
margin-left: 100px;
}
.div7_3 {
display: flex;
align-items: center;
justify-content: center;
width: 117px;
height: 32px;
background-color: #F75A54;
border-radius: 5px;
margin-top: 25px;
color: white;
}
.div8 {
width: 100%;
height: 138px;
background-color: #363636;
color: #ccc;
}
.div8 ul {
width: 1000px;
display: flex;
margin: 25px auto;
justify-content: space-around;
}
.div8 ul li {
width: 80px;
height: 20px;
padding-left: 20px;
line-height: 1;
border-right: 1px solid #ccc;
}
.div8 ul li:last-child {
border: none;
}
.div8_1 p {
padding-top: 15px;
text-align: center;
}