index.html
<!DOCTYPE>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>01-单页</title>
<link rel="stylesheet" href="CSS/index.css">
<script src="js/jquery.js"></script>
<script src="js/SuperSlide.js"></script>
</head>
<body>
<header>
<div class="wp fix">
<div class="header-l">
<a href="#"><span > ONE</span>PAGE</a>
</div>
<div class="header-r">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">SERVICES</a>
<a href="#">TEAM</a>
<a href="#">PROTFOLIO</a>
<a href="#">BENIFITS</a>
<a href="#">PRICING</a>
<a href="#">CONTACT</a>
</div>
</div>
</header>
<div class="sliders fix">
<div id="slideBox" class="slideBox">
<!--<div class="hd">
<ul><li></li><li></li></ul>
</div>-->
<div class="bd">
<ul>
<li><a href="#" ><img src="images/t-1.png" /></a>
<div class="box-sliders">
<div class="sliders-1">
<h1> PARRALAX <span>ONE PAGE</span> HAS ARRIVED</h1>
<div class="sliders-t fix">
<a href=""><img src="images/icon-thumbs-up.png" alt=""></a>
<div class="sliders-r">
<h2>Lets just do it</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit amet sed diam nonummy nibh <span>dolore</span></p>
</div>
</div>
</div>
</div>
</li>
<li><a href="#"><img src="images/t-2.png" /></a>
<div class="box-sliders">
<div class="sliders-2">
<h3>EXTREMELY <span>RESPONSIVE</span> DESIGN</h3>
</div>
</div>
</li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
</div>
<div class="about">
<div class="wp ">
<div class="tit">
<h3>METRONIC <span>INSPIRES</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<img src="images/about-dd.png" alt="">
<div class="at">
<div class="about-1">
<img src="images/about-1.png" alt="">
<p>Clean Code</p>
</div>
<div class="about-2">
<img src="images/about-2.png" alt="">
<p>Huges Updates</p>
</div>
<div class="about-3">
<img src="images/about-3.png" alt="">
<p>Responsive</p>
</div>
</div>
</div>
</div>
<div class="services">
<div class="wp">
<div class="tit">
<h3>OUR <span>SERVICES</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<dd>
<dl>
<a href="#"><img src="images/service-1.png" alt=""></a>
<h4>Fantastic Support</h4>
<p>Lorem ipsum et dolor amet consectetuer diam</p>
</dl>
<dl>
<a href="#"><img src="images/service-2.png" alt=""></a>
<h4>Fantastic Support</h4>
<p>Lorem ipsum et dolor amet consectetuer diam</p>
</dl>
<dl>
<a href="#"><img src="images/service-3.png" alt=""></a>
<h4>Fantastic Support</h4>
<p>Lorem ipsum et dolor amet consectetuer diam</p>
</dl>
<dl>
<a href="#"><img src="images/service-4.png" alt=""></a>
<h4>Fantastic Support</h4>
<p>Lorem ipsum et dolor amet consectetuer diam</p>
</dl>
</dd>
</div>
</div>
<div class="design">
<img src="images/design-1.png" alt="">
<div class="design-t">
<h4>THE DETAILS ARE NOT THE DETAILS<br><span>THEY MAKE THE DESIGN</span></h4>
<p>KEEN THEMES</p>
</div>
</div>
<div class="theteam">
<div class="wp">
<div class="tit">
<h3> MEET <span>THE TEAM</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<div class="team1">
<img src="images/team1.png" alt="">
<h4>Marcus Doe</h4>
<span>FOUNDER</span>
<p>Lorem ipsum dolor amet, tempor ut labore magna tempor dolore </p>
<div class="team-b">
<a href="#"> <img src="images/team-b1.png" alt=""></a>
<a href="#"> <img src="images/team-b2.png" alt=""></a>
<a href="#"> <img src="images/team-b3.png" alt=""></a>
</div>
</div>
<div class="team1">
<img src="images/team2.png" alt="">
<h4>Marcus Doe</h4>
<span>FOUNDER</span>
<p>Lorem ipsum dolor amet, tempor ut labore magna tempor dolore </p>
<div class="team-b">
<a href="#"> <img src="images/team-b1.png" alt=""></a>
<a href="#"> <img src="images/team-b2.png" alt=""></a>
<a href="#"> <img src="images/team-b3.png" alt=""></a>
</div>
</div>
<div class="team1">
<img src="images/team3.png" alt="">
<h4>Marcus Doe</h4>
<span>FOUNDER</span>
<p>Lorem ipsum dolor amet, tempor ut labore magna tempor dolore </p>
<div class="team-b">
<a href="#"> <img src="images/team-b1.png" alt=""></a>
<a href="#"> <img src="images/team-b2.png" alt=""></a>
<a href="#"> <img src="images/team-b3.png" alt=""></a>
</div>
</div>
</div>
</div>
<div class="lastest-work">
<div class="tit">
<h3>LASTEST<span> WORKS</span></h3>
</div>
<ul class="ul-lastest fix">
<li class="on">
<a href="javascript:;">
<img src="images/item1.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item2.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item3.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item4.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item5.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item6.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" alt="">
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
</ul>
</div>
<div class="choose">
<div class="wp">
<div class="tit">
<h3>WHY TO <span>CHOOSE US</span></h3>
<p>Lorem ipsum dolor sit amet, <span style="color:#1ea9e3">consectetuer piscing</span>elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="sideMenu" >
<p><em></em>Lorem ipsum dolor sit amet</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" alt="">
</ul>
<p><em></em>Consectetur adipisicing elit</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" alt="">
</ul>
<p><em></em>Augue assum anteposuerit dolore</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" alt="">
</ul>
<p><em></em>Sollemnes in futurum</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" alt="">
</ul>
<p><em></em>Nostrud Tempor veniam</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" alt="">
</ul>
<p><em></em>Ut enem magana sed dolore</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
</ul>
</div>
</div>
</div>
<div class="purchase">
<div class="wp">
<div class="pur-l">
<h2>CHECK OUT ADMIN THEME!</h2>
<p>Most Full Featured & Powerfull Admin Theme</p>
</div>
<a href="#">LIVE PREVIEW</a>
</div>
</div>
<div class="fact">
<div class="tit">
<h3 style="color:#fff">SOME FACTS ABOUT US</h3>
</div>
<div class="wp">
<div class="fact-bt">
<a href="#">
<dl>
<dt>39</dt>
<dd>PROJECTS COMPLETED</dd>
</dl>
</a>
<a href="#">
<dl>
<dt>14</dt>
<dd>PROJECTS COMPLETED</dd>
</dl>
</a>
<a href="#">
<dl>
<dt>29K+</dt>
<dd>PROJECTS COMPLETED</dd>
</dl>
</a>
<a href="#">
<dl>
<dt>500</dt>
<dd>PROJECTS COMPLETED</dd>
</dl>
</a>
</div>
</div>
</div>
<div class="pricing">
<div class="wp">
<div class="tit">
<h3>PRICING <span>TABLES</span></h3>
</div>
<dl>
<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>
<dd>
<img src="images/ca-bt.png" alt="">
<h5><span style="font-size: 30px;color:#fff">$</span>19</h5>
<p>Per Month</p>
<ul class="ul-pri">
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
</ul>
</dd>
<dd class="sign-up">
<a href="#"><p>SIGN UP</p></a>
</dd>
</dl>
<dl>
<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>
<dd>
<img src="images/ca-bt.png" alt="">
<h5><span style="font-size: 30px;color:#fff">$</span>25</h5>
<p>Per Month</p>
<ul class="ul-pri">
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
</ul>
</dd>
<dd class="sign-up">
<a href="#"><p>SIGN UP</p></a>
</dd>
</dl>
<dl>
<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>
<dd>
<img src="images/ca-bt.png" alt="">
<h5><span style="font-size: 30px;color:#fff">$</span>59</h5>
<p>Per Month</p>
<ul class="ul-pri">
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
</ul>
</dd>
<dd class="sign-up">
<a href="#"><p>SIGN UP</p></a>
</dd>
</dl>
<dl>
<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>
<dd>
<img src="images/ca-bt.png" alt="">
<h5><span style="font-size: 30px;color:#fff">$</span>98</h5>
<p>Per Month</p>
<ul class="ul-pri">
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
</ul>
</dd>
<dd class="sign-up">
<a href="#"><p>SIGN UP</p></a>
</dd>
</dl>
</div>
</div>
<div class="test">
<div class="wp">
<div class="tit">
<h3>CUSTOMER <span>TESTIMONIALS </span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<div class="txtScroll-left">
<div class="bd">
<ul class="infoList">
<li>
<a href="javascript:;" target="_blank">
<p>This is the most awesome, full featured, easy, costomizeble theme.</p>
<p>It’s extremely responsive and very helpful to all suggestions.</p>
<p style="color:#2dafe5">Mark Doe</p>
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
<p>This is the most awesome, full featured, easy, costomizeble theme.</p>
<p>It’s extremely responsive and very helpful to all suggestions.</p>
<p style="color:blue">Mark Doe</p>
</a>
</li>
<li>
<a href="javascript:;" target="_blank">
<p>This is the most awesome, full featured, easy, costomizeble theme.</p>
<p>It’s extremely responsive and very helpful to all suggestions.</p>
<p style="color:green">Mark Doe</p>
</a>
</li>
</ul>
</div>
<div class="hd">
<!--<a class="next"></a>-->
<ul class="num"><li></li><li></li><li></li></ul>
<!--<a class="prev"></a>
<span class="pageState"></span>-->
</div>
</div>
</div>
</div>
<div class="clien">
<div class="wp">
<div class="picMarquee-left">
<!--<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>-->
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="#" target="_blank"><img src="images/clien-1.png" /></a></div>
</li>
<li>
<div class="pic"><a href="#" target="_blank"><img src="images/clien-2.png" /></a></div>
</li>
<li>
<div class="pic"><a href="#" target="_blank"><img src="images/clien-3.png" /></a></div>
</li>
<li>
<div class="pic"><a href="#" target="_blank"><img src="images/clien-4.png" /></a></div>
</li>
<li>
<div class="pic"><a href="#" target="_blank"><img src="images/clien-5.png" /></a></div>
</li>
<li>
<div class="pic"><a href="#" target="_blank"><img src="images/clien-6.png" /></a></div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-t">
<div class="wp footer-tt">
<div class="footer-l">
<span>ABOUT US</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam sit nonummy nibh euismod tincidunt ut laoreet dolore magna aliquarm erat sit volutpat. Nostrud exerci tation ullamcorper suscipit lobortis nisl aliquip commodo consequat. </p>
<p>Duis autem vel eum iriure dolor vulputate velit esse molestie at dolore.</p>
</div>
<div class="footer-m ">
<span>LATESTTWEETS</span>
<div class="m-1">
<p class="aaa">KEEN <span style="color:#56c8eb;font-size:10px;">THEMES</span></p>
<p class="bbb">
keenThemes@keenthems</br>
Envato just updated the ThemeForest's license info page to make it more clear and easy to und:
</p>
<a href="#" style="color:#56c8eb;font-size: 14px;">http://themeforest.net/licens...</a>
</div>
<div class="m-2">
<p class="aaa">KEEN <span style="color:#56c8eb;font-size:10px;">THEMES</span></p>
<p class="bbb">
keenThemes@keenthems</br>
Envato just updated the ThemeForest's license info page to make it more clear and easy to und:
</p>
<a href="#" style="color:#56c8eb;font-size: 14px;">http://themeforest.net/licens...</a>
</div>
</div>
<div class="footer-r">
<span>OUR CONCATS</span>
<div class="r-1">
<p>25, Lorem Lis Street, Orange</br>California, US</br>Phone: 800 123 3456</br>Fax: 800 123 3456</br>Email: <a href="#" style="color:#56c8eb; font-size: 13px;">info@anybiz.com</a></br>Skype: <a href="#" style="color:#56c8eb; font-size: 13px;">anybiz</a></p>
</div>
<div class="newselecter">
<span>NEWSELECTER</span>
<div class="so fix">
<input type="text" value="youremail@mail.com" class="ss" onfocus="if(this.value='youremail@mail.com'){this.value='';}"
onblur="if(!this.value){this.value=this.defaultValue;}">
<input type="submit" value="SUBSCRIBE" class="sub-inp">
</div>
</div>
</div>
</div>
</div>
<div class="footer-b">
<div class="wp">
<span>2014 © Metronic Shop UI. ALL Rights Reserved. </span>
<div class="bdsharebuttonbox"><a title="分享到Facebook" href="#" class="bds_fbook" data-cmd="fbook"></a><a title="分享到linkedin" href="#" class="bds_linkedin" data-cmd="linkedin"></a><a title="分享到Twitter" href="#" class="bds_twi" data-cmd="twi"></a><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a><a title="分享到百度贴吧" href="#" class="bds_tieba" data-cmd="tieba"></a><a href="#" class="bds_more" data-cmd="more"></a>
</div>
</div>
</div>
</div>
<!--choose-->
<script type="text/javascript">
// var ary = location.href.split("&");
// jQuery(".sideMenu").slide({ titCell:"h3", targetCell:"ul", effect:ary[1], delayTime:ary[2] , trigger:ary[3], triggerTime:ary[4], defaultPlay:ary[5], returnDefault:ary[6],easing:ary[7] });
jQuery(".sideMenu").slide({titCell:"p", targetCell:"ul",defaultIndex:1,effect:"slideDown",delayTime:300,returnDefault:true,easing:"easeOutCirc"});
</script>
<!--test-->
<script id="jsID" type="text/javascript">
// var ary = location.href.split("&");
// jQuery(".txtScroll-left").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });
jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,easing:"easeInBack",pnLoop:false,mouseOverStop:false});
</script>
<!---footer--->
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<!--------------clien-->
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
//jQuery(".picMarquee-left").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4],pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7] });
jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:6,interTime:50})
</script>
<!--lastest-work部分-->
<script>
$(".ul-lastest li").mouseover(function(){
$(this).addClass("on").siblings().removeClass("on");
});
</script>
<!--sliders部分-->
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
// jQuery(".slideBox").slide( { mainCell:".bd ul", effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],mouseOverStop:ary[6],pnLoop:ary[7] });
jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
</script>
</body>
</html>
index.css部分
@charset 'utf-8';
*{margin: 0;padding: 0;}
.fix{*zoom:1; }
.fix:after,.fix:before{
display:block;
content:"clear";
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
html{
100%;
}
body{
100%;
color: #66717c;
/*overflow: hidden;*/
}
a{
text-decoration: none;
color: #66717c;
}
ul li{
list-style: none;
}
.wp{
1200px;
height: auto;
/*border: 1px solid red;*/
margin: 0 auto;
overflow: hidden;
}
span{
color:#e6400c;
}
/*----------------------------------------------tit*/
.tit{
660px;
margin: 0 auto;
text-align: center;
margin-top: 50px;
margin-bottom:40px;
box-sizing: border-box;
}
.tit h3{
font-size: 30px;
}
.tit p{
margin-top: 20px;
font-size: 16px;
}
/*-------------------------header部分*/
header{
/*position: fixed;
top:888px;*/
background-color: #fbfbfb;
/*background-color: pink;*/
height: auto;
100%;
height: 60px;
position: absolute;
margin-top: 888px;
line-height: 60px;
z-index: 1;
}
.header-l{
float: left;
380px;
}
.header-l a{
font-size: 32px;
}
.header-r{
float:right;
text-align: right;
820px;
}
.header-r a{
font-size:16px;
padding-left:25px;
}
/*--------------------sliders部分*/
.sliders{
100%;
height: 950px;
float: left;
box-sizing: border-box;
}
.sliders .bd img{
100%;/*自适应*/
/*height: 948px;*/
/*display: block;*/
float: left;
display: block;
}
/* 本例子css */
.slideBox{ 100%; overflow:hidden; position:relative;
border: 1px solid #cccccc;
box-sizing: border-box;/*防止滚动条*/
}
/*
.slideBox .hd{
left: 50%;
margin-left: -37px;
height:15px; overflow:hidden; position:absolute; right:5px; bottom:15px; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }
.slideBox .hd ul li{ float:left; margin-right:20px;
50px; height:10px; line-height:10px; text-align:center; background:pink; cursor:pointer; }
.slideBox .hd ul li.on{ background:#f00; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:0; }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ 100%; display:block; }*/
/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev{position:absolute; left:3%; top:50%; margin-top:-25px;
display:block; 4%; height:40px;
/*filter:alpha(opacity=50);opacity:0.5; */
background:url(../images/slider-left.png) no-repeat center center;
}
.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px;
display:block; 4%; height:40%;
background:url(../images/slider-right.png) no-repeat center center;
/*filter:alpha(opacity=50);opacity:0.5; *//*透明度*/
}
.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }
.slideBox .prevStop{ display:none; }
.slideBox .nextStop{ display:none; }
.slideBox{
position: relative;
float: left;
height: 948px;
}
.box-sliders{
position: absolute;
margin-top:336px;
float: right;
text-align: center;
margin-left: 350px;
}
.box-sliders h1{
color: #fff;
font-size: 4rem;
}
.box-sliders .sliders-t{
padding: 60px 215px;
}
.box-sliders .sliders-t a{
display: block;
float: left;
height:140px;
140px;
padding: 30px;
box-sizing: border-box;
background-color: rgba(0, 0, 0 ,0.7);
}
.box-sliders .sliders-t .sliders-r{
float: right;
text-align: left;
512px;
height:140px;
line-height: 140px;
background-color: rgba(0, 0, 0 ,0.7);
color: #fff;
}
.box-sliders .sliders-t .sliders-r h2{
font-size: 38px;
line-height: 38px;
margin-top: 25px;
}
.box-sliders .sliders-t .sliders-r p{
font-size: 20px;
line-height: 30px;
margin-top: 10px;
}
.sliders-2 h3{
font-size: 60px;
margin-top: -65px;
margin-left: 60px;
color: #fff;
}
/*-------------------about部分*/
.about{
100%;
height: 540px;
/*border: 5px solid red;*/
float: left;
box-sizing: border-box;
}
.about img{
margin-top: 120px;
z-index: 2;
position: absolute;
}
.at img{
/*margin-top: 40px;
margin-left: 16px;*/
margin: 30px 50px;
}
.at p{
color: #fff;
margin-top: 76px;
text-align: center;
}
.about-1{
135px;
height: 135px;
background-color: #33b1e6;
position: absolute;
margin-top: 222px;
margin-left: 60px;
border-radius: 50%;
}
.about-2 {
135px;
height: 135px;
border-radius: 50%;
background-color: #e85425;
margin-left: 370px;
position: absolute;
}
.about-3 {
135px;
height: 135px;
border-radius: 50%;
background-color: #94db40;
margin-top: 160px;
margin-left: 920px;
position: absolute;
}
/*-------------------services部分*/
.services{
100%;
height: 480px;
/*border: 5px solid blue;*/
float: left;
box-sizing: border-box;
overflow: hidden;
background-color: #f6f6f6;
}
.services dd{
margin: 0 auto;
height: 215px;
110%;
display: block;
}
.services dl{
200px;
text-align: center;
padding: 10px 50px 60px 50px;
display: block;
float: left;
border-right: 1px solid #e8e7e7;
}
.services dl img{
padding-bottom: 15px;
}
.servicese dl h4{
font-size: 18px;
height: 25px;
line-height: 25px;
}
.services dl p{
font-size: 14px;
height: 25px;
line-height: 25px;
}
/*-------------------design部分*/
.design{
100%;
height: 460px;
/*border: 5px solid orange;*/
float: left;
box-sizing: border-box;
position: relative;
}
.design img{
float: left;
margin-left: 210px;
}
.design .design-t{
text-align: center;
color: #fff;
float: left;
position: absolute;
left: 0;
top: 0;
transition: all 1s linear;
100%;
height: 0;
background-color: rgba(0,0,58,0.6);
overflow: hidden;
}
.design .design-t h4{
font-size: 34px;
line-height: 40px;
padding-top: 135px;
padding-left: 85px;
}
.design .design-t p{
font-size: 14px;
margin-top: 20px;
}
.design:hover .design-t{
display: block;
height: 100%;
}
/*-------------------theteam部分*/
.theteam{
100%;
height: 790px;
/*border: 5px solid green;*/
float: left;
box-sizing: border-box;
}
.theteam .team-t{
margin: 0 auto;
text-align: center;
margin-top: 60px;
margin-bottom: 50px;
}
.theteam h3{
font-size: 32px;
}
.theteam p{
font-size: 14px;
}
.theteam .team1{
float: left;
text-align: center;
360px;
margin-left: 15px;
}
.theteam .team1 h4{
font-size: 20px;
}
.theteam .team-b{
height: 50px;
margin-top: 12px;
margin-left: 10px;
}
.theteam .team-b img{
15px;
height: 15px;
}
.theteam .team-b a{
padding: 8px 10px;
border: 1px solid;
border-radius: 50%;
margin-left: 10px;
}
.theteam .team-b a:hover{
background-color: #e6400c;
}
/*---------------lastest-work部分*/
.lastest-work{
100%;
height: 695px;
/*border: 5px solid purple;*/
float: left;
box-sizing: border-box;
text-align: center;
background-color: #f6f6f6;
}
/*.lastest-work h3{
font-size: 37px;
line-height: 65px;
margin: 40px auto;
}*/
.ul-lastest{
overflow: hidden;
}
.ul-lastest li{
display: block;
float: left;
position: relative;
/*border: 2px solid white;
*/
}
.ul-lastest img{
vertical-align: bottom;
315px;
height: 265px;
}
.ul-lastest li div{
left: 0;
top: 0;
transition: all 1s linear;
100%;
height: 0;
position: absolute;
background-color: rgba(227,96,58,0.7);
overflow: hidden;
color: #fff;
}
.ul-lastest li div h5{
font-size: 18px;
margin-top: 95px;
}
.ul-lastest li div p{
font-size: 14px;
line-height: 28px;
}
.ul-lastest li div a{
font-size: 14px;
color: #fff;
border: 1px solid #fff;
line-height: 28px;
margin: 0 20px;
}
/*.ul-lastest div{
transition: scale(0);
opacity:0.6;
0;
height: 0;
transition: all .5s ease-in;
background-color:#e6400c;
color: #fff;
border-radius: 5px;
font-size: 18px;
position: absolute;
display: block;
float: left;
text-align: center;
}*/
.ul-lastest li:hover div{
display: block;
height: 100%;
}
/*-------------------choose*/
/*---------------choose部分*/
.choose{
100%;
height: 760px;
/*border: 5px solid orange;*/
float: left;
box-sizing: border-box;
position: relative;
}
/* 本例子css */
.sideMenu{ border:1px solid #ddd; margin-left:50%; margin-top: 60px;}
.sideMenu p{ height:40px; line-height:40px;
font-size:18px;
padding-left:20px;
border-top:1px solid #e3e3e3;
background:#f4f4f4;
cursor:pointer;
/*font:normal 14px/32px "Microsoft YaHei";*/
}
.sideMenu p:hover{
color:#1ea9e3;
}
.sideMenu p em{ float:left; display:block; 40px; height:32px;
background:url(../images/cc.png) 16px 12px no-repeat; cursor:pointer; }
.sideMenu p.on em{ background-position:16px -57px; }
.sideMenu ul{ padding:8px 25px; color:#999; display:none; /* 默认都隐藏 */ }
.sideMenu li{ font-size: 14px; }
.sideMenu img{
display: block;
position: absolute;
float: left;
margin-left:-620px;
margin-top: -180px;
}
/*---------------purchase部分*/
.purchase{
100%;
height: 100px;
/*border: 5px solid orange;*/
float: left;
box-sizing: border-box;
background-color: #292f34;
}
.purchase .pur-l{
float: left;
margin: 32px 0;
line-height: 30px;
color: #fff;
}
.purchase h2{
float: left;
font-size: 30px;
}
.purchase p{
margin-left: 5px;
font-size: 16px;
float: left;
margin-top: 5px;
}
.purchase a{
display: block;
float: right;
padding: 10px 18px;
font-size: 18px;
color: #fff;
margin-top: 25px;
/* 140px;
height: 50px;*/
background-color: #e6400c;
}
/*---------------fact部分*/
.fact{
100%;
height: 470px;
/*border:20px solid orange;*/
float: left;
box-sizing: border-box;
background: url("../images/fact-b.png") no-repeat center center;
color: #fff;
margin-top: -2px;
}
.fact .tit{
background-color: #000;
opacity: 0.5;
100%;
}
.fact dl{
color: #fff;
text-align: center;
float: left;
200px;
height: 200px;
background-color: #e6400c;
opacity: 0.7;
border-radius: 50%;
margin:48px;
}
.fact dt{
margin-top: 25px;
font-size:60px;
}
.fact dd{
font-size: 14px;
margin-top:15px;
}
.fact dl:hover{
border-radius:20%;
opacity:1;
border: 2px dashed darkblue;
/*height:220px;
-webkit-transition: height 0.3s ease 0.5s;
-moz-transition: height 0.3s ease 0.5s;
transition: height 0.3s ease 0.5s;
*/
}
/*---------------pricing部分*/
.pricing{
100%;
height: 760px;
/*border: 5px solid orange;*/
float: left;
box-sizing: border-box;
background-color: #f6f6f6;
}
.pricing dl{
260px;
height: 520px;
/*border: 1px solid rebeccapurple;*/
text-align: center;
background-color: #fff;
float: left;
margin-right: 32px;
}
.pricing dt{
font-size: 38px;
color: #fff;
background-color: #a4afb8;
height:90px;
padding-top: 20px;
}
.pricing dt p{
margin-top: 8px;
}
.pricing dd img{
margin-top: 25px;
}
.pricing dd h5{
position: absolute;
margin-top: -120px;
margin-left: 80px;
font-size: 68px;
color: #fff;
}
.pricing dd p{
font-size: 16px;
margin-top: 15px;
}
.pricing .ul-pri{
margin-top: 30px;
}
.pricing .ul-pri li{
list-style-image: url("../images/cc.png");
font-size: 18px;
line-height: 28px;
}
.pricing .sign-up p{
font-size: 24px;
color: #fff;
background-color: #a4afb8;
232px;
height: 48px;
line-height: 48px;
margin-left: 16px;
margin-top: 30px;
}
/*---------------test部分*/
.test{
100%;
height: 410px;
/*border: 5px solid orange;*/
float: left;
box-sizing: border-box;
}
.infoList li{
100%;
}
.infoList p{
line-height: 30px;
font-size: 23px;
color: #66717c;
}
/* 本例子css */
.txtScroll-left{
position:relative;
/*border:1px solid #ccc; */
}
.txtScroll-left .hd{
overflow:hidden;
height:30px;
margin-top: -35px;
/*background:#f4f4f4; */
padding:0 10px; }
/*.txtScroll-left .hd .prev,.txtScroll-left .hd .next{ display:block; 5px; height:9px; float:right; margin-right:5px; margin-top:100px; overflow:hidden; cursor:pointer; background:url("../images/cc.png") no-repeat;}
.txtScroll-left .hd .next{ background-position:0 -50px; }*/
/*.txtScroll-left .hd .prevStop{ background-position:-60px 0; }
.txtScroll-left .hd .nextStop{ background-position:-60px -50px; }*/
.txtScroll-left .hd ul{ float:left; overflow:hidden; zoom:1; margin:10px 560px; }
.txtScroll-left .hd ul li{ float:left; 10px; height:10px; overflow:hidden;
margin-right:5px; text-indent:-999px;
cursor:pointer; background:#fff url("../images/cc.png") no-repeat center center; }
.txtScroll-left .hd ul li.on{ background-position:0 0; }
.txtScroll-left .bd{ padding:10px 230px; 100%;
overflow:hidden; height: 200px; margin-left: -250px; }
.txtScroll-left .bd ul{ overflow:hidden; zoom:1; }
.txtScroll-left .bd ul li{
margin-right:20px; float:left;
/*height:24px;
line-height:24px; */
text-align:center; _display:inline;}
.txtScroll-left .bd ul li span{ color:#999; }
/*---------------clien部分*/
.clien{
100%;
height: 135px;
/*border: 5px solid orange;*/
float: left;
box-sizing: border-box;
background-color: #f6f6f6;
}
/* css 重置 */
/**{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:0; }
a{ text-decoration:none; color:#333; }*/
/* 本例子css */
.picMarquee-left{ overflow:hidden; position:relative; }
/*.picMarquee-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.picMarquee-left .hd .prev,.picMarquee-left .hd .next{ display:block; 5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") no-repeat;}
.picMarquee-left .hd .next{ background-position:0 -50px; }
.picMarquee-left .hd .prevStop{ background-position:-60px 0; }
.picMarquee-left .hd .nextStop{ background-position:-60px -50px; }*/
/*.picMarquee-left .bd{ padding:10px; }*/
.picMarquee-left .bd ul{ overflow:hidden; zoom:1; }
.picMarquee-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.picMarquee-left .bd ul li .pic{ text-align:center; }
.picMarquee-left .bd ul li .pic img{
120px; height:45px;
display:block; padding:40px; }
.picMarquee-left .bd ul li .pic a:hover img{ border-color:#999; }
/*.picMarquee-left .bd ul li .title{ line-height:24px; }*/
/*---------------footer部分*/
.footer{
100%;
height: 410px;
float: left;
box-sizing: border-box;
}
.footer .footer-t{
height: 350px;
100%;
background-color: #313030;
}
.footer .footer-t .footer-tt{
padding-top: 50px;
}
.footer-l{
float: left;
328px;
height: 180px;
margin-right: 80px;
}
.footer-tt span{
font-size: 18px;
color: #c2c1c1;
}
.footer-l p{
font-size: 13px;
color: #c2c1c1;
margin-top: 18px;
}
.footer-m{
float: left;
325px;
height: 245px;
margin-right: 80px;
}
.footer-m .m-1{
300px;
height: 80px;
margin-top: 15px;
}
.footer-m .m-2{
300px;
height: 80px;
margin-top: 40px;
}
.footer-m .aaa {
float: left;
50px;
height: 50px;
background-color: #000;
font-size: 10px;
color: #c2c1c1;
text-align: center;
margin: 5px 0;
}
.footer-m .bbb{
display: block;
float: left;
font-size: 13px;
line-height: 18px;
position: absolute;
265px;
height: 80px;
margin-left: 60px;
color: #c2c1c1;
}
.footer-m a{
display: block;
float: left;
margin-top: 75px;
padding-left:10px;
}
.footer-r{
float: left;
300px;
height: 270px;
}
.footer-r p{
font-size: 13px;
line-height: 23px;
color: #c2c1c1;
margin-top: 15px;
/*margin-bottom: -10px;*/
}
.newselecter{
float: left;
position: relative;
}
.newselecter span{
display: block;
margin-top: 20px;
}
.so{
margin-top: 10px;
border: 1px solid #535353;
background-color: #272626;
}
.newselecter .ss{
display: block;
float: left;
196px;
height: 38px;
line-height: 38px;
line-height: 38px9;
color: #c2c1c1;
background-color: transparent;
border: none;
}
.newselecter .sub-inp{
100px;
height: 38px;
margin-left: -5px;
background-color: #e6400c;
color: #fff;
position: absolute;
cursor: pointer;
border: none;
}
.footer .footer-b{
height: 60px;
100%;
background-color: #272626;
}
.footer-b span{
font-size: 12px;
color: #fff;
line-height: 60px;
}
.bdsharebuttonbox{
float: right;
margin-top: 10px;
}