博主信息
阿杰网络科技博客资源站
博文
22
粉丝
0
评论
7
访问量
6215
积分:0
P豆:54

POLO360案例

2020年06月19日 23:46:37阅读数:212博客 / 阿杰网络科技博客资源站/ 基础作品

QQ图片20200619233843.png

实例

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>polo360</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" href="/static/build/layui.css" media="all">
		<!-- <link rel="stylesheet" type="text/css" href="css/page-index..css"/> -->
		<script src="js/layui.code.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./js/layui-v2.5.6/layui/css/layui.css"/>
		<style type="text/css">
			body{
				background: url(./img/bd-bg.png) repeat-x;
			}
			.clearfix::after{
			    content: "";
			    display: block;
			    clear: both;
			}
			
			.w{
				width: 940px;
				margin: 0 auto;
			}
			.header{
				padding: 37px 0 46px 0;
			}
			.logo{
				margin-left: 15px;
			}
			.nav{
				float: right;
				margin-top: 22px;
			}
			.nav li{
				float: left;
				padding: 0 10px;
				border-left: 1px dotted #d6d6d6;
			}
			.nav a{
				font: bold 14px Georgia;
				font-weight: bold;
				color: #666;
				line-height: 2;
			}
			.nav a:hover{
				color: #a1a1a1;
				text-decoration: underline; //下划线
			}
			.nav p{
				font: 11px Tahome;
				color: #b7b7b7;
			}
			.banner{
				width: 940px;
				height: 356px;
				margin: 0 auto;
				background: url(../img/banner-bg.png) no-repeat bottom center;
			}
			.banner .layui-carousel img{
				width: 940px;
				height: 342px;
			}
			.content h1{
				text-align: center;
				font:bold 24px Georgia;
				color: #000000;
				padding: 6px 0 20px 0;
				margin-bottom: 38px;
				background: url(../img/line.png) no-repeat bottom center;
			}
			.content .pl , .content .cs , .content .uc,
			.contack .sc , .contack .co , .contack .nu{
				float: left;
				width: 300px;
			}
			.content .cs , .contack .co{
				margin: 0 20px;
			}
			.content h2{
				font-size: 21px;
				color: #11719e;
			}
			.content .p1{
				font: 12px Helvetica;
				color: #8c8c8c;
			}
			.content .imgDiv{
				width: 299px;
				height: 190px;
				background: url(../img/img-bg.png) no-repeat;
				margin: 16px 0 10px 0;
				text-align: center;
				padding-top: 12px;
			}
			.content .p2{
				height: 92px;
				color: #3e3e3e;
				font: 13px Helvetica;
				word-spacing: 2px;
			}
			.content .lm{
				display: block;
				width: 163px;
				height: 43px;
				background: url(../img/btn1.png) no-repeat;
				color: #016999;
				font: 12px/40px Helvetica;
				text-indent: 1em;
				margin-bottom: 35px;
			}
			.contack{
				background: url(../img/line.png) no-repeat top center;
			}
			/* .contack .sc , .contack .co , .contack .nu{
				height: 300px;
			} */
			.contack .txt{
				width: 281px;
				height: 33px;
				background: url(../img/input.png) no-repeat;
				/*此代码只针对IE6浏览器进行设置处理,处理兼容性*/
				_background-attachment: fixed;
				border: none;
				padding: 0 10px;
				margin: 0 0 16px;
			}
			.contack .tarea{
				width: 276px;
				height: 114px;
				background: url(../img/textarea.png) no-repeat;
				/*此代码只针对IE6浏览器进行设置处理,处理兼容性*/
				_background-attachment: fixed;
				border: none;
				overflow: auto;
				resize: none;
				padding: 10px;
				margin: 0;
			}
			.contack .btn{
				width: 163px;
				height: 32px;
				background: url(../img/btn2.png) no-repeat;
				border: none;
				padding: 0;
				margin: 11px 0 23px;
				color: white;
				font: 13px;
				text-align: left;
				text-indent: 1em;
				cursor: pointer;
			}
			.contack h2{
				color: #444444;
				font: 18px Helvetica;
				line-height: 1;
				border-bottom: 1px dashed #d3d3d3;
				padding: 44px 0 10px 0;
				margin-bottom: 15px;
			}
			.sc .icon{
				/* 去除空格间隙 */
				font-size: 0;
				margin-top: 4px;
			}
			.sc .icon a{
				margin-right: 6px;
			}
			.sc .p1{
				color: #3e3e3e;
				font: 12px/1 Helvetica;
			}
			.sc .nl{
				font: bold 18px "gill sans mt";
				line-height: 1;
				padding: 32px 0 10px;
			}
			.sc .txt{
				margin-top: 19px;
				margin-bottom: 0 ;
			}
			.sc .btn{
				margin-top: 12px;
			}
			.sc .texts{
				width: 296px;
				height: 33px;
				margin-top: 15px;
				background: url(../img/input.png) no-repeat;
				_background-attachment: fixed;
				border: none;
				padding: 0 15px;
			}
			.nu img{
				float: left;
				margin-right: 8px;
			}
			.nu p{
				color: #444;
				font: 12px/1 helvetica;
				height: 58px;
				_height: 60px;
				border-bottom: 1px dashed #d3d3d3;
				margin-bottom: 14px;
				padding-bottom: 9px;
			}
			.nu .btn{
				margin-top: 0;
			}
			.footer{
				height: 173px;
				background: #333;
				border-top: 10px solid #4c4c4c;
			}
			.footer a , .footer p{
				font: 11px helvetica;
				color: #999999;
			}
			.footer p{
				margin-left: 8px;
				margin-right: 23px;
				margin-bottom: 6px;
			}
			.footer .w{
				margin-top: 18px;
			}
			.footer a:hover{
				color: #FFFFFF;
				
			}
			.footer .copyr{
				float: right;
			}
		</style>
		
	</head>
	<body>
		<div class="header w">
			<ul class="nav">
				<li>
					<a href="">HOME</a>
					<p>Back to home</p>
				</li>
				<li>
					<a href="">PRODUCTS</a>
					<p>What we have for you</p>
				</li>
				<li>
					<a href="">SERVLCES</a>
					<p>Things we do/p>
				</li>
				<li>
					<a href="">BLOG</a>
					<p>Follow our updates</p>
				</li>
				<li>
					<a href="">CONTACT</a>
					<p>Ways to reach us</p>
				</li>
			</ul>
			<div class="logo">
				<a href="#" title="polo360LOGO">
					<img src="./img/logo.png" alt="POLO360">
				</a>
			</div>
		</div>
		<div class="banner">
			<div class="layui-carousel" id="test1">
				<div carousel-item>
					<div><img src="img/banner/banner01.png" ></div>
					<div><img src="img/banner/background_1.jpg" ></div>
					<div><img src="img/banner/background_2.jpg"></div>
					<div><img src="img/banner/banner1.png" ></div>
					<div><img src="img/banner/background.jpg" ></div>
					</div>
			</div>
		</div>
		
		<div class="content w clearfix">
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
			<div class="pl">
				<h2>Perfect logic</h2>
				<p class="p1">All you want your website to do.</p>
				<div class="imgDiv">
					<img src="img/pic/pic1.jpg" alt="Perfect logic" >
				</div>
				<p class="p2">
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
				</p>
				<a href="#" class="lm">Lorem More</a>
			</div>
			<div class="cs">
				<h2>Complete Solution</h2>
				<p class="p1">A tool anything and everything you can think</p>
				<div class="imgDiv">
					<img src="img/pic/pic2.jpg" alt="Complete Solution" >
				</div>
				<p class="p2">
					Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
				</p>
				<a href="#" class="lm">Lorem More</a>
			</div>
			<div class="uc">
				<h2>Uber Culture</h2>
				<p class="p1">Fresh. Modern and ready for future</p>
				<div class="imgDiv">
					<img src="img/pic/pic3.jpg" alt="Uber Culture" >
				</div>
				<p class="p2">
					Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
				</p>
				<a href="#" class="lm">Lorem More</a>
			</div>
		</div>
		
		<div class="contack w clearfix">
			<div class="sc">
				<h2>Social Connection</h2>
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<div class="icon">
				<a href="#"><img src="img/rss.png" ></a>
				<a href="#"><img src="img/fb.png"></a>
				<a href="#"><img src="img/in.png"></a>
				<a href="#"><img src="img/yt.png"></a>
				<a href="#"><img src="img/tw.png"></a>
				</div>
				<h2 class="nl">Newsletter</h2>
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<form action="#" method="get">
					<input class="txt" type="text" placeholder="your name"/>
					<button class="btn">Subscribe</button>
				</form>
			</div>

			<div class="co">
				<h2>Contact</h2>
				<form action="#" method="get">
					<input class="txt" type="text" placeholder="your name"/>
					<input class="txt" type="text" placeholder="your email address"/>
					<textarea class="tarea" placeholder="message"></textarea>
					<button class="btn">Send it</button>
				</form>
			</div>
			<div class="nu">
				<h2>News Updates</h2>
				<p>
					<img src="img/1.gif">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				</p>
				<p>
					<img src="img/2.gif" >
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
				</p>
				<p>
					<img src="img/3.gif" >
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
				</p>
				<form action="#" method="get">
					<button class="btn">Visit our Blog</button>
				</form>
			</div>
		</div>
		<div class="footer">
			<div class="w">
				<p class="copyr">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
				<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
				<p><a href="">Home</a> | <a href="">About</a> | <a href=""></a><a href="">Products</a> | <a href="">Services</a> | <a href="">Contact</a></p>
				<p><a href="">Privacy Policy</a> | <a href="">Terms of use</a></p>
			</div>
		</div>
		<!-- 处理ie6的png问题 -->
		<!--[if IE 6]>
		<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
		<script type="text/javascript">DD_belatedPNG.fix("div,img,a,h1");</script>
		<![endif]-->
	</body>
	<script src="js/layui-v2.5.6/layui/layui.js"></script>
	<script>
		layui.use('carousel', function(){
			var carousel = layui.carousel;
			//建造实例
			carousel.render({
				elem: '#test1'
				,width: '100%' //设置容器宽度
				,arrow: 'always' //始终显示箭头
				//,anim: 'updown' //切换动画方式
			});
		});
	</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
阿杰网络科技
  • 阿杰网络科技· 2020-06-19 23:48:211楼
  • 其余CSS代码没有添加在里面,此案例的轮播图是用框架做的(Layui),有需要源码的联系我!!!

  • 回复