` ``<!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>
<style>
*{
margin: 0px;
padding: 0px;
}
.inner{
margin:0 auto;
}
.header{
width: 100%px;
height: 1542px;
}
.header .hang{
width: 100%px;
height: 294px;
background-color: #242833;
}
.header .hang .inner{
width: 720px;
height: 294px;
}
.header .hang .inner ul li{
list-style: none;
height: 33px;
border-bottom:1px solid #3a3e49;
font-size: 12PX;
padding-top:8px;
background-image: url(images/hangsanjioa_03.png);
background-repeat: no-repeat;
background-position: right 17px;
}
.header .hang .inner a{
color:#7a7e87;
text-decoration: none;
}
.header .logo{
width: 1080px;
height: 434px;
margin:0 auto;
}
.header .logo .one{
width: 1080px;
height: 79px;
margin:0 auto;
background-image: url(images/cha_03.png);
background-repeat: no-repeat;
background-position: right 0px;
background-color: #efefed;
}
.header .logo .two{
width: 855px;
height: 99px;
padding-left:225px;
background-color: #efefed;
}
.header .logo .two .left{
width: 123px;
height: 99px;
background-image: url(images/logo_03.png);
}
.header .logo .two .left h1{
width: 123px;
height: 99px;
}
.header .logo .two .left a{
display:block;
width: 123px;
height: 99px;
text-indent:-4000px;
}
.header .logo .three{
width: 786px;
height: 48px;
padding-left:294px;
background-color: #efefed;
}
.header .logo .three #p1{
font-size: 26px;
color:#282828;
letter-spacing: 10px;
}
.header .logo .three #p2{
margin-left:173px;
color:#b4b4b4;
font-size: 12px;
}
.header .logo .four{
width: 1080px;
height: 208px;
background-image: url(images/shan_02.png);
}
.header .nav{
width: 100%px;
height: 1103px;
}
.header .nav .one{
width: 100%px;
height: 232px;
background-color:#f6f5fa;
}
.header .nav .one .inner{
width: 489px;
height: 166px;
padding-top: 66px;
background-image: url(images/zhengsanjioa_03.png);
background-repeat: no-repeat;
background-position: 240px 87px;
}
.header .nav .one .inner h2{
font-size: 12px;
margin-left:224px;
margin-bottom:48px;
}
.header .nav .one .inner h2 a{
color:#3a3b3f;
text-decoration: none;
}
.header .nav .one .inner #p1{
font-size: 12px;
color:#7f7f7f;
}
.header .nav .one .inner #p2{
font-size: 12px;
color:#7f7f7f;
margin-left:90px;
}
.header .nav .two{
width: 100%px;
height: 449px;
}
.header .nav .two .inner{
width: 728px;
height: 393px;
padding-top:56px;
background-image: url(images/zhengsanjioa_03.png);
background-position:355px 95px;
background-repeat: no-repeat;
}
.header .nav .two .inner h2{
padding-left:300px;
margin-bottom:68px;
}
.header .nav .two .inner h2 a{
color:#3a3b3f;
text-decoration: none;
}
.header .nav .two .inner ul li{
list-style: none;
float: left;
width: 248px;
}
.header .nav .two .inner ul li .i1{
margin-left:60px;
margin-bottom:32px;
}
.header .nav .two .inner ul li .i2{
margin-bottom:18px;
margin-left:106px;
}
.header .nav .two .inner ul li a{
display: block;
text-decoration: none;
color:#4f4f4f;
margin-left:90px;
margin-bottom:18px;
}
.header .nav .two .inner p{
font-size: 12px;
color: #989898;
}
.header .nav .two .inner p span{
margin-left:88px;
}
.header .nav .three{
width: 1080px;
height: 422px;
margin:0 auto;
}
.header .nav .three .left{
width: 540px;
height: 422px;
float: left;
}
.header .nav .three .right{
width: 464px;
height: 342px;
float: left;
padding-top:80px;
background-image: url(images/zhengsanjioa_03.png);
background-repeat: no-repeat;
background-position: 217px 106px;
padding-left:76px;
position:relative;
}
.header .nav .three .right a{
display:block;
margin-left:122px;
text-decoration: none;
color:#646464;
font-size: 12PX;
margin-bottom:30px;
}
.header .nav .three .right p{
font-size: 12px;
color:#737373;
width: 293px;
}
.header .nav .three .right #sp1{
line-height: 25px;
}
.header .nav .three .right #sp2{
margin-left: 122px;
}
.header .nav .three .right #sp3{
margin-left: 110px;
}
.header .nav .three .right #i3{
position:absolute;
left:204px;
top:271px;
}
.bottom{
width: 100%px;
height: 1941px;
clear:both;
}
#b1{
margin:0 auto;
}
.bottom .one{
width: 1080px;
height: 205px;
background-color: red;
}
.bottom .two{
width: 901px;
height: 363px;
padding-left:170px;
padding-top:59px;
position:relative;
}
.bottom .two ul li{
list-style: none;
float: left;
width: 234px;
margin:19px;
position:relative;
}
.bottom .two a{
display: block;
text-decoration: none;
color:#494949;
margin-left:60px;
font-size: 12px;
margin-bottom:50px;
}
.bottom .two #i4{
margin-bottom:38px;
margin-bottom:14px;
}
.bottom .two #i5{
position:absolute;
left:40px;
top:213px;
}
.bottom .two p{
color:#939393;
font-size: 12px;
}
.bottom .two>img{
position:absolute;
left:524px;
top:355px;
}
.bottom .three{
width: 100%px;
height: 94px;
background-color: #242833;
padding-top:45px;
}
.bottom .three .box{
width: 203px;
height: 41px;
background-color: #242833;
margin:0 auto;
border:2px solid #858994;
}
.bottom .three .box p{
color:#e6eaf5;
font-size: 12px;
line-height: 41px;
text-indent: 17px;;
}
.bottom .four{
width: 910px;
height: 460px;
padding-top:59px;
position:relative;
padding-left:170px;
}
.bottom .four>a{
display: block;
text-decoration: none;
font-size: 12px;
color: #4a4a4a;
margin-left:320px;
margin-bottom:74px;
}
.bottom .four>img{
position:absolute;
left:530px;
top:86px;
}
.bottom .four ul li{
list-style: none;
float: left;
width: 234px;
margin-right:20px;
}
.bottom .four ul li #i6{
margin-left:50px;
margin-bottom:32px;
}
.bottom .four ul li a{
font-size: 12px;
color: #3e3e3e;
display: block;
margin-left:60px;
text-decoration: none;
margin-bottom:15px;
}
.bottom .four ul li #i7{
margin-left:100px;
margin-bottom:20px;
}
.bottom .four ul li p{
font-size: 12px;
color:#a5a5a5;
}
.bottom .four ul li p #sp4{
display: inline-block;
width: 36px;
height: 12px;
}
.bottom .four ul li p #sp5{
display: inline-block;
width: 73px;
height: 12px;
}
.bottom .four ul li p #sp6{
display: inline-block;
width: 48px;
height: 12px;
}
.bottom .four #i8{
position:absolute;
top:455px;
left:520px;
}
.bottom .five{
width: 1080px;
height: 268px;
background-color: green;
}
.bottom .six{
width: 100%px;
background-color: #f5f6fa;
}
.bottom .six .inner{
width: 900px;
height: 322px;
padding-top:65px;
position:relative;
padding-left:180px;
}
.bottom .six .inner a{
display: block;
margin-left:340px;
font-size: 12px;
color: #47464c;
text-decoration: none;
margin-bottom:80px;
}
.bottom .six .inner #i8{
position:absolute;
top:90px;
left:540px;
}
.bottom .six .inner #i9{
position:absolute;
left:524px;
top:-18px;
}
.bottom .six .inner ul li{
width: 230px;
height: 125px;
background-color: white;
float: left;
list-style: none;
margin-right:18px;
background-repeat: no-repeat;
background-position: 108px 23px;
}
.bottom .six .inner ul li #p1{
color:#759f95;
font-size: 12px;
margin-top:42px;
margin-left: 86px;
margin-bottom:10px;
}
.bottom .six .inner ul li #p2{
font-size: 12px;
color:#a8a8a8;
text-align: center;
}
.bottom .six .inner ul img{
margin-left:102px;
margin-bottom:15px;
}
.footer{
width: 100%px;
height: 79px;
background-color: #242833;
}
.footer .inner{
width: 1080px;
height: 80px;
}
.footer .inner .left{
width: 180px;
height: 44px;
float: left;
padding-top:36px;
padding-left:160px;
}
.footer .inner .left p{
color:white;
font-size: 12px;
}
.footer .inner .left span{
color: #828691;
}
.footer .inner .right{
width: 248px;
height: 44px;
float: right;
padding-top:36px;
}
.footer .inner .right p{
color:white;
font-size: 12px;
}
.footer .inner .right span{
color: #828691;
}
</style>
</head>
<body>
<div class="header">
<div class="hang">
<div class="inner">
<ul>
<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>
<li><a href="">服务体系</a></li>
<li><a href="">选择我们</a></li>
</ul>
</div>
</div>
<div class="logo">
<div class="one"></div>
<div class="two">
<div class="left">
<h1>
<a href="">恒义文化传媒</a>
</h1>
</div>
</div>
<div class="three">
<p id="p1">恒义文化传媒（天津）有限公司</p>
<p id="p2">敢不敢陪我到世界的尽头</p>
</div>
<div class="four"></div>
</div>
<div class="nav">
<div class="one">
<div class="inner">
<h2>
<a href="">关于我们</a>
</h2>
<p id="p1">拍照时候不思考，拍照时候不思考拍照时候不思考拍照时候不思考拍照时候不思考拍照时</p>
<p id="p2">你的动态，我的心态，我们将为此努力，我们将为此努力</p>
</div>
</div>
<div class="two">
<div class="inner">
<h2>
<a href="">我们的服务</a>
</h2>
<ul>
<li style="width: 232px;">
<img src="images/xiangji_03.png" alt="" class="i1">
<a href="">视频跟进</a>
<img src="images/gang_03.png" alt="" class="i2">
<p>恒义传媒提供航拍摄像等各种服务恒义传媒提供航拍摄像等各种服务恒义传媒提供航拍 <span>摄像等各种</span></p>
</li>
<li>
<img src="images/dianshi_03.png" alt="" class="i1">
<a href="">视频制作</a>
<img src="images/gang_03.png" alt="" class="i2">
<p>恒义传媒提供航拍摄像等各种服务恒义传 <span>摄像等各种</span></p>
</li>
<li>
<img src="images/dianshi1_03.png" alt="" class="i1">
<a href="">公司年会</a>
<img src="images/gang_03.png" alt="" class="i2">
<p>恒义传媒提供航拍摄像等各种服务恒义 <span>摄像等各种</span></p>
</li>
</ul>
</div>
</div>
<div class="three">
<div class="left">
<img src="images/daka_02.png" alt="">
</div>
<div class="right">
<a href="">选择我们</a>
<p><span id="sp1">要出售自己的得意产品，欢迎您来这里交易，找到需要</span>它、欣赏它的人，苦苦寻觅某家服务商。迫切希迫切希<span id="sp2">问题</span></p>
<p><span id="sp1">要出售自己的得意产品，欢迎您来这里交易，找到需要</span>它、欣赏它的人，苦苦寻觅某家服务商。迫切希迫切希<span id="sp3">的朋友吧</span></p>
<img src="images/dian_03.png" alt="">
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="one" id="b1"></div>
<div class="two" id="b1">
<ul>
<li>
<img src="images/ren_03.png" alt="" id="i4">
<a href="">国家电网任务篇</a>
<img src="images/gang_03.png" alt="" id="i5">
<p>国家电力任务篇<br>国家电力任务篇国家电力任务篇</p>
</li>
<li>
<img src="images/henduoren_03.png" alt="" id="i4">
<a href="" >婚礼视频</a>
<img src="images/gang_03.png" alt="" id="i5">
<p>婚礼视频片<br>卖场演示篇，市场调研策划拍摄企业专题片</p>
</li>
<li>
<img src="images/hunli_03.png" alt="" id="i4">
<a href="">大型活动制作团队</a>
<img src="images/gang_03.png" alt="" id="i5">
<p>精心提供与之活动要求的全方位策划方案,<br>以及活动结束后续撤离，一直服务于客户</p>
</li>
</ul>
<img src="images/dian_03.png" alt="">
</div>
<div class="three" id="b1">
<div class="box">
<p>恒义传媒，为您提供一站式服务</p>
</div>
</div>
<div class="four" id="b1">
<a href="">恒义传媒服务体系</a>
<img src="images/zhengsanjioa_03.png" alt="">
<ul>
<li>
<img src="images/wenjian1_03.png" alt="" id="i6">
<a href="">谦虚谨慎的服务态度</a>
<img src="images/gang_03.png" alt="" id="i7">
<p>秉承匠心心，匠心，责任的理念，对客户 <span id="sp4"></span> 对作品时时刻刻保持谦</p>
</li>
<li>
<img src="images/wenjian2_03.png" alt="" id="i6">
<a href="">诚信正值的服务理念</a>
<img src="images/gang_03.png" alt="" id="i7">
<p>秉承匠心心，匠心，责任的理念，对客户 <span id="sp4"></span> 对作品时时刻刻保持谦</p>
</li>
<li>
<img src="images/wenjian3_03.png" alt="" id="i6">
<a href="">务实创新的服务精神</a>
<img src="images/gang_03.png" alt="" id="i7">
<p>秉承匠心心，匠心，责任的理念，对客户 <span id="sp4"></span> 对作品时时刻刻保持谦</p>
</li>
</ul>
<img src="images/dian_03.png" alt="" id="i8">
</div>
<div class="five" id="b1"></div>
<div class="six" id="b1">
<div class="inner">
<a href="">联系我们</a>
<img src="images/zhengsanjioa_03.png" alt="" id="i8">
<ul>
<li style="background-image: url(images/weizhi_03.png);">
<p id="p1">ADDRESS</p>
<img src="images/gang_03.png" alt="">
<p id="p2">天津市西青区家园路万科国际7号楼</p>
</li>
<li style="background-image: url(images/shouji_03.png);">
<p id="p1">ADDRESS</p>
<img src="images/gang_03.png" alt="">
<p id="p2">天津市西青区家园路万科国际7号楼</p>
</li>
<li style="background-image: url(images/feiji_03.png);">
<p id="p1">ADDRESS</p>
<img src="images/gang_03.png" alt="">
<p id="p2">天津市西青区家园路万科国际7号楼</p>
</li>
</ul>
<img src="images/yuan_03.png" alt="" id="i9">
</div>
</div>
</div>
<div class="footer">
<div class="inner">
<div class="left">
<p>恒义文化传媒：<span>沪ICP备1112233号</span></p>
</div>
<div class="right">
<p>技术支持：<span>陈芝网络</span></p>
</div>
</div>
</div>
</body>
</html>
Copy the code