We smiler

css/new_file.css

@@ -0,0 +1,240 @@
+@charset "utf-8";
+body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 1em;
+	font: inherit;
+	vertical-align: baseline;
+}
+html,body {
+	font-family: "微软雅黑";
+	width: 100%;
+	overflow-x: hidden;
+}
+em {
+	font-style: normal
+}
+li {
+	list-style: none
+}
+a {
+	text-decoration: none;
+	outline: 0;
+	color: #333;
+}
+img {
+	cursor: pointer;
+	vertical-align: middle;
+	border: 0 none;
+}
+table {
+	border-collapse: collapse;
+}
+input {
+	font-family: "Microsoft YaHei";
+	padding: 0;
+}
+textarea {
+	resize: none;
+	overflow: auto;
+	padding: 0;
+	font-family: "Microsoft YaHei"
+}
+textarea:focus {
+	outline: none;
+}
+input:focus {
+	outline: none;
+}
+.clear {
+	zoom: 1
+}
+.clear:after {
+	content: "";
+	display: block;
+	clear: both;
+}
+.fl {
+	float: left
+}
+.fr {
+	float: right
+}
+li {
+	list-style: none;
+}
+a {
+	text-decoration: none;
+}
+/***************************************首页***************************************/
+header{
+   width: 100%;
+   height: 100px;
+   background: #FFF;
+}
+nav{
+   width: 1200px;
+   height: 100px;
+   min-width: 1200px;
+   margin: 0 auto;
+ 
+   position: relative;
+}
+nav .logo{
+   width: 270px;
+   height: 70px;
+   margin-top: 15px;
+}
+nav .dh{
+  position: absolute;
+  right: 5px;
+  bottom: 10px;
+}
+nav .dh li{
+   float: left;
+   margin-left: 10px;
+}
+nav .dh li a{
+   font-size: 16px;
+   text-align: center;
+   padding: 15px;
+   color: #6c6c6c;
+}
+nav .dh li a:hover{
+  color: #E41839;
+}
+
+/* banner */
+.banner{
+	width: 100%;
+	min-width: 1200px;
+	background: url(../images/banner_bg.jpg) no-repeat center top;
+	height: 736px;
+}
+.banner .w1200{
+	width: 1200px;
+	margin: auto;
+	position: relative;
+	height: 736px;
+}
+.banner .w1200 .ban_left{
+	bottom: 0px;
+	position: absolute;
+	width: 895px;
+}
+.banner .w1200 .ban_right{
+	width: 450px;
+	text-align: center;
+	position: absolute;
+	right: 0px;
+	bottom: 30px;
+}
+.banner .w1200 .ban_right span{
+	color: #000000;
+	font-size: 28px;
+}
+.banner .w1200 .ban_right h3{
+	color: #000000;
+	font-size: 52px;
+	margin-bottom: 40px;
+}
+.banner .w1200 .ban_right a{
+	display: block;
+	width: 213px;
+	height: 48px;
+	line-height: 48px;
+	margin: auto;
+	border-radius: 8px;
+	color: #fff;
+	font-size: 22px;
+	transition: all 0.4s;
+}
+.banner .w1200 .ban_right a.a1{
+	margin-top: 20px;
+	margin-bottom: 10px;
+	background: #77ce41;
+	/*background: #77ce41 url(../images/index2.png) no-repeat 15px center;*/
+	padding-left: 15px;
+}
+.banner .w1200 .ban_right a.a2{
+	background: #77ce41 url(../images/index3.png) no-repeat 15px center;
+	padding-left: 15px;
+}
+.banner .w1200 .ban_right a:hover{
+	background-color: #7fdb46;
+}
+
+.w1000{
+	width: 1000px;
+	margin: auto;
+	position: relative;
+	overflow: hidden;
+}
+/* 首页轮播 */
+.box_wap{
+	width: 307px;
+	height: 636px;
+	background: url(../images/shouji_bg.png) no-repeat center;
+	position: relative;
+	margin-top: 85px;
+}
+.box_wap .swiper-container {
+    width: 260px;
+    height: 457px;
+    top: 85px;
+}
+.title{
+	position: absolute;
+	top: 200px;
+	left: 0;
+	width: 500px;
+	height: 480px;
+}
+.title h3,.Online h3{
+	color: #000;
+	font-size: 30px;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+.title p,.Online p{
+	color: #878787;
+	font-size: 20px;
+	font-weight: 100;
+	font-family: "微软雅黑";
+}
+.title img,.Online img{
+	margin-top: 40px;
+}
+.transaction{
+	height: auto;
+}
+.Online{
+	position: absolute;
+    top: 200px;
+    right: 0;
+    width: 500px;
+    height: 480px;
+}
+footer{
+	width: 100%;
+	height: auto;
+	padding-bottom: 50px;
+}
+.navigation{
+	width: 800px;
+	margin: 100px auto 50px auto;
+}
+footer ul li{
+	float: left;
+	width: 200px;
+	text-align: center;
+}
+footer ul li a{
+	color: #878787;
+}
+footer p{
+	text-align: center;
+	color: #878787;
+	margin-bottom: 10px;
+}

index.html

@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="keywords" content="线上交易平台/">
+		<meta name="description" content="“好艺多”艺演线上交易平台，专注演艺行业项目实现线上交易，平台担保。专业、快速、高效的为演艺从业人员及演艺用人方服务。 因其良好的用户体验与强大高效的选角功能受到演艺从业者及用人方的欢迎。">
+		<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
+		<link rel="stylesheet" href="css/animate.min.css">
+		<link rel="stylesheet" href="css/new_file.css" />
+		<script src="js/jquery-1.11.3.min.js"></script>
+		<script src="js/wow.min.js"></script>
+		<script src="js/swiper.min.js"></script>
+		<title>好艺多演艺线上平台</title>
+		<script>
+			$(document).ready(function(){
+             var wow = new WOW({
+			    boxClass: 'wow',
+			    animateClass: 'animated',
+			    offset: 100,
+			    live: true
+			});
+	         wow.init();
+       })	
+		</script>
+	</head>
+	<body>
+	   <!--头部 star-->
+	   <header>
+	     <nav>
+	         <div class="logo fl"><img src="images/logo.png" width="270px" height="67px" alt=""/></div>
+	         <ul class="dh fr">
+	             <li><a href="#">首页</a></li>
+	             <li><a href="#">收藏</a></li>
+                 <li><a href="#">商务合作</a></li>             
+	         </ul>
+	     </nav>
+	   </header>
+	   <!--头部 end-->
+	   <!--banner star-->
+	   <div class="banner">
+	   		<div class="w1200 clear">
+			   <div class="fl ban_left wow bounceInLeft animated">
+					<img src="images/index1.png" />
+			   </div>
+			   <div class="fr ban_right wow bounceInRight animated">
+					<span>好艺多  演艺行业从业者自己的平台</span>
+					<h3>演艺之路 由此不同</h3>
+					<img src="images/ewm.png" />
+					<a class="a1" href="javascript:;">扫描二维码下载APP</a>
+					<!--<a class="a2" href="javascript:;">Android版下载</a>-->
+			   </div>
+		   </div>
+	   </div>
+	   <!--banner end-->
+	   <!--海量艺人资源库 star-->
+	   <div class="w1000 clear">
+			<div class="fl title  wow slideInLeft" data-wow-duration="1s" data-wow-delay="1s">
+				<h3>海量艺人资源库 演出通告库</h3>
+				<p>满足一切演艺圈业务需求<br/>我们期待每一位演艺从业人士加入<br/>动动手指 一切轻松搞定</p>
+				<img src="images/index_4.png" width="100%" height="261px" alt=""/> 
+			</div>
+			<!-- 手机轮播 开始 -->
+		    <div class="box_wap fr wow slideInRight" data-wow-duration="1s" data-wow-delay="1s">
+		        <!-- Swiper -->
+		        <div class="swiper-container">
+		            <div class="swiper-wrapper">
+		                <div class="swiper-slide"><a href="javascript:;"><img src="images/shouji1.jpg" /></a></div>
+		                <div class="swiper-slide"><a href="javascript:;"><img src="images/shouji1.jpg" /></a></div>
+		                <div class="swiper-slide"><a href="javascript:;"><img src="images/shouji1.jpg" /></a></div>
+		            </div>
+		            <!-- Add Pagination -->
+		            <div class="swiper-pagination"></div>
+		        </div>
+		    </div>
+		    <!-- 手机轮播 结束 -->
+	   </div>
+	   <!--海量艺人资源库 end-->
+	   <!--先上交易  star-->
+	   <div class="transaction w1000">
+	   	  <!-- 手机轮播 开始 -->
+		    <div class="box_wap fl wow bounceInDown bg-green animated" data-wow-duration="1s" data-wow-delay="1s">
+		        <!-- Swiper -->
+		        <div class="swiper-container pic">
+		            <div class="swiper-wrapper">
+		                <div class="swiper-slide"><a href="javascript:;"><img src="images/shouji2.jpg" /></a></div>
+		                <div class="swiper-slide"><a href="javascript:;"><img src="images/shouji2.jpg" /></a></div>
+		                <div class="swiper-slide"><a href="javascript:;"><img src="images/shouji2.jpg" /></a></div>
+		            </div>
+		            <!-- Add Pagination -->
+		            <div class="swiper-pagination"></div>
+		        </div>
+		    </div>
+		    <!-- 手机轮播 结束 -->
+		    <div class="Online fr wow bounceInUp bg-red animated" data-wow-duration="1s" data-wow-delay="1s">
+				<h3>线上交易 好艺多平台担保</h3>
+				<p>通线上交易，减少中间环节，交易价格透明好艺多平台担保，交易安全有保障</p>
+				<img src="images/index_5.png" width="100%" height="300px" alt=""/> 
+			</div>
+			<div style="clear: both;"></div>
+	   </div>
+	   <!--先上交易  end-->
+	   <!--底部 star-->
+	   <footer>
+	   	 <ul class="navigation">
+	   	 	<li><a href="#">关于好艺多</a></li>
+	   	 	<li><a href="#">加入我们</a></li>
+	   	 	<li><a href="#">联系我们</a></li>
+	   	 	<li><a href="#">法律申明</a></li>
+	   	 	<div style="clear: both;"></div>
+	   	 </ul>
+	   	 <p>© 2014-2017 好艺多, All Rights Reserved | 贵州经营性网站备案编号11010500000 | 黔ICP备150xxxxxxx号-1 </p>
+	   	 <p>违法和不良信息举报：Tel:4008888888     E-mail:haoyiduowangadmin@qq.com     COPYRIGHT</p>
+	   </footer>
+	   <!--底部  end-->
+	</body>
+</html>
+<script>
+var swiper = new Swiper('.swiper-container', {
+	//pagination: '.swiper-pagination',
+	paginationClickable: true,
+	spaceBetween: 0,
+	centeredSlides: true,
+	autoplay: 3500,
+	loop: true,
+	autoplayDisableOnInteraction: false
+});
+//线上交易轮播
+var swiper = new Swiper('.pic', {
+	//pagination: '.swiper-pagination',
+	paginationClickable: true,
+	spaceBetween: 0,
+	centeredSlides: true,
+	autoplay: 5500,
+	loop: true,
+	autoplayDisableOnInteraction: false
+});
+</script>