HTML紫色大气形式港湾个人介绍网页模板



12 44 15



模板描述:紫色 大气形式 港湾个人介绍,HTML紫色大气形式港湾个人介绍网页模板HTML模板下载

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Alegreya' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/slider-style.css" />

2. 引入JS

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/modernizr.custom.28468.js"></script>
<script src="./js/responsive.menu.js"></script>
<script type="text/javascript" src="./js/jquery.cslider.js"></script>
<script type="text/javascript" src="./js/move-top.js"></script>
<script type="text/javascript" src="./js/easing.js"></script>

3. HTML代码

		<!------start-header----------->
<div class="header">	
   	<nav class="nav">	        	
	    	  <a href="#" id="w3-menu-trigger"> </a>
	             <ul class="nav-list" style="">
					<li class="nav-item"><a href="index.html">Home</a></li>
					<li class="nav-item"><a href="about.html">About</a></li>
					<li class="nav-item"><a href="musings.html">Musings</a></li>
					<li class="nav-item"><a href="verse.html">Verse</a></li>
					<li class="nav-item"><a href="prose.html">Prose</a></li>
					<li class="nav-item"><a href="contact.html">Contact</a></li>
					<div class="clear"> </div>
	             </ul>
	      </nav>
     	<div class="logo">
			<a href="index.html"><img src="./images/logo.png" alt=""/></a>
		  </div>
	      <div class="clear"> </div>
		  <div class="clear"> </div>
	 </div>
		<!-----end-header-------->
		<div class="text-slider">
				<div class="wrap"> 
		<!---start-da-slider----->
			<div id="da-slider" class="da-slider">
					<div class="da-slide">
						<h2><span><img src="./images/que.png"/></span></h2>
						<p>They are ill discoverers that think there is no land,when they can see nothing but sea.</p>
						<span class="da-link"><h6> </h6></span>
					</div>
					<div class="da-slide">
						<h2><span><img src="./images/que.png"/></span></h2>
						<p>They are ill discoverers that think there is no land,when they can see nothing but sea.</p>
						<span class="da-link"><h6> </h6></span>
					</div>
					<div class="da-slide">
						<h2><span><img src="./images/que.png"/></span></h2>
						<p>They are ill discoverers that think there is no land,when they can see nothing but sea.</p>
						<span class="da-link"><h6> </h6></span>
					</div>
					<div class="da-slide">
						<h2><span><img src="./images/que.png"/></span></h2>
						<p>They are ill discoverers that think there is no land,when they can see nothing but sea.</p>
						<span class="da-link"><h6> </h6></span>
					</div>
					<div class="da-slide">
						<h2><span><img src="./images/que.png"/></span></h2>
						<p>They are ill discoverers that think there is no land,when they can see nothing but sea.</p>
						<span class="da-link"><h6> </h6></span>
					</div>
					<nav class="da-arrows">
						<span class="da-arrows-prev"> </span>
						<span class="da-arrows-next"> </span>
					</nav>
			</div>
				<script type="text/javascript">
					$(function() {
						$('#da-slider').cslider({
							autoplay	: true,
							bgincrement	: 450
						});
					});
				</script>
			 </div>
			</div>
				<!---//End-da-slider----->
			<!----//End-banner---->
		<div class="main">
			<div class="wrap">
				<div class="part_of_1">
					<div class="image">
						<a href="#"><img src="./images/img.png"/></a>
					</div>
					<div class="desc">
						<span>Hello.</span>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="middle">
			<div class="wrap">
				<div class="grid_of_1">
					<div class="./images">
						<a href="#"><span><img src="./images/icon1.png" /></span></a>
					</div>
					<h3>Lorem ipsum dolor</h3>
					<p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					<h4>Posted on 1st jan 2014</h4>
					<div class="links">
						<ul>
							<li><a class="upload" href="#"> </a> </li>
							<li><a class="refesh" href="#"> </a> </li>
							<li><a class="wishlish" href="#"> </a> </li>
							<div class="clear"> </div>
						</ul>
					</div>
					<span><h6> </h6></span>
				</div>
				<div class="grid_of_1">
					<div class="./images">
						<a href="#"><span><img src="./images/icon2.png" /></span></a>
					</div>
					<p class="para para1">"Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."</p>
					<h5>Lorem ipsum dolor</h5>
					<h4>Posted on 1st jan 2014</h4>
					<div class="links">
						<ul>
							<li><a class="upload" href="#"> </a> </li>
							<li><a class="refesh" href="#"> </a> </li>
							<li><a class="wishlish" href="#"> </a> </li>
							<div class="clear"> </div>
						</ul>
					</div>
					<span><h6> </h6></span>
				</div>
				<div class="grid_of_1">
					<div class="./images">
						<a href="#"><span><img src="./images/icon4.png" /></span></a>
					</div>
					<div class="bg_images">
						<a href="#"><img src="./images/image.jpg" /></a>
					</div>
					<h4>Posted on 1st jan 2014</h4>
					<div class="links">
						<ul>
							<li><a class="upload" href="#"> </a> </li>
							<li><a class="refesh" href="#"> </a> </li>
							<li><a class="wishlish" href="#"> </a> </li>
							<div class="clear"> </div>
						</ul>
					</div>
					<span><h6> </h6></span>
				</div>
				<div class="grid_of_1">
					<div class="./images">
						<a href="#"><span><img src="./images/icon4.png" /></span></a>
					</div>
					<div class="bg_vedio">
						<a href="#"><iframe src="http://player.vimeo.com/video/15370828" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></a>
					</div>
					<h4>Posted on 1st jan 2014</h4>
					<div class="links">
						<ul>
							<li><a class="upload" href="#"> </a> </li>
							<li><a class="refesh" href="#"> </a> </li>
							<li><a class="wishlish" href="#"> </a> </li>
							<div class="clear"> </div>
						</ul>
					</div>
					<span><h6> </h6></span>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="wrap">
			<div class="social">
				<div class="social">
				<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>
					<div class="clear"> </div>
				</ul>
			</div>
			</div>
		</div>
		</div>
		<!-- scroll_top_btn -->
	    <script type="text/javascript">
			$(document).ready(function() {
				var defaults = {
		  			containerID: 'toTop', // fading element id
					containerHoverID: 'toTopHover', // fading element hover id
					scrollSpeed: 1200,
					easingType: 'linear' 
		 		};
				$().UItoTop({ easingType: 'easeOutQuart' });
			});
		</script>
		 <a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
		<!--end scroll_top_btn -->
		<div class="copy-right">
			<p>Template by <a href="https://www.51qianduan.com/">51前端</a></p>	    
		</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 黑色 bootstrap自适应 蓝色 普通自适应 欧美风 红色 中国风 绿色 韩系 灰色 日系 简洁简约 黄色 炫酷 紫色 卡通动画 橙色 精美 实用通用 艺术创意 粉色 大气 白色 棕色 清新 彩色 绘画 其他风格 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到