HTML5蓝色简洁样式博客杂志网页模板代码下载



13 49 17



模板描述:蓝色 简洁样式 博客杂志,HTML5蓝色简洁样式博客杂志网页模板代码下载HTML模板下载

代码结构

1. 引入CSS

<link href="./css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="./css/jquery.bxslider.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/clndr.css" type="text/css" />

2. 引入JS

<script src="./js/jquery.min.js"></script>
<script src="./js/login.js"></script>
<script src="./js/modernizr.custom.js"></script>
<script src="./js/jquery.bxslider.min.js"></script>
<script src="./js/underscore-min.js"></script>
<script src= "./js/moment-2.2.1.js"></script>
<script src="./js/clndr.js"></script>
<script src="./js/site.js"></script>

3. HTML代码

		<!---strat-wrap---->
		<div class="wrap">
			<!---start-top-nav---->
	<div class="top-nav">
		<div class="menu1">
			<ul class="menu2">
		<li>
			<a  class="nav-icon" href=""> </a>
			<ul>
				<li>
					<a class="root-nav1" href="">Business</a>
					<ul>
						<li><a href="">Item 11</a></li>
						<li><a href="">Item 12</a></li>
						<li><a href="">Item 13</a></li>
						<li><a href="">Item 14</a></li>
					</ul>				
				</li>
				<li>
					<a class="root-nav2" href="">Technology</a>
					<ul>
						<li><a href="">Item 21</a></li>
						<li><a href="">Item 22</a></li>
						<li><a href="">Item 23</a></li>
						<li><a href="">Item 24</a></li>
					</ul>				
				</li>
				<li>
					<a class="root-nav3" href="">Travel</a>
					<ul>
						<li><a href="">Item 31</a></li>
						<li><a href="">Item 32</a></li>
						<li><a href="">Item 33</a></li>
						<li><a href="">Item 34</a></li>
					</ul>				
				</li>
				<li>
					<a class="root-nav4" href="">Entertainment</a>				
					<ul>
						<li><a href="">Item 41</a></li>
						<li><a href="">Item 42</a></li>
						<li><a href="">Item 43</a></li>
						<li><a href="">Item 44</a></li>
					</ul>	
				</li>
			</ul>
		</li>
	</ul>
		 </div>
		 <div class="top-nav_right">
		 <div class="menu">
		 	<!-- start top-nav-->
			<div class="./cssmenu">
					<ul>
					   <li  class="has-sub"><a href="#"><span>Shope</span></a>
					   	<ul>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					         <li class="has-sub"><a href="#"><span>Lorem Ipsum</span></a></li>
					      </ul>
					   </li>
					</ul>
				</div>
			<div class="clear"></div>
		</div>
		<!-- start search-->
		<!-- start social icons -->
		<div class="soc_right">
	          </div>
	          	</div>
	     <!-- start login_box -->
			<div class="login_box">
	    		   <div id="loginContainer">
	                  <a id="loginButton" class=""><span></span></a>               
	                <div id="loginBox" style="display: none;">                
	                    <form id="loginForm">	
	                        <fieldset id="body">
	                            <fieldset>
	                            	<input type="text"   name="email" id="email" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}">
	                               <input type="text"  name="password" id="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}">
	                            </fieldset>
	                            <input type="submit" id="login" value="Sign in">
	                            <label for="checkbox"><i><a href="">Lost Password ?</a></i></label>
	                        </fieldset>
	                    </form>
	                </div>
	              </div>
	            <div class="clear"></div>
	          </div>
 		<div class="clear"></div>
	</div>
		<!---start-top-nav2---->
			<!---->
			<div class="top-nav2">
				<ul class="menu3">
					<li class="active">
						<a href="">
							<span> </span> 
							<span class="arrow"> </span>
						</a>
					</li>
					<li>
						<a href="">
							<span>Level 2</span>
							<span class="arrow"> </span>
						</a>
					</li>
					<li>
						<a href="">
							<span>Level 3</span>
							<span class="arrow"> </span>
						</a>
					</li>
					<div class="clear"> </div>
				</ul>
			</div>
				<!---//End-top-nav2---->
			<div class="clear"> </div>
			<!---start-subscribe-box---->
			<div class="subscribe-box">
				<h2><span> </span>Subscribe to Our Newsletter</h2>
				<form>
					<input type="text"   name="email" id="email" value="Enter your email address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your email address';}">
					<input type="submit" value="Subscribe" />
				</form>
			</div>
			<!---//End-subscribe-box---->
			<!----start-buttons-sectioin---->
			<div class="buttons-section">
					<div class="buttons-section-grid1">
						<div class="buttons-section-grid1-top">
							<div class="buttons-section-grid1-top-left">
								<ul class="small-arrow">
									<li><a href="#"><span> </span> </a></li>
									<li><a href="#"><span> </span> </a></li>
									<div class="clear"> </div>
								</ul>
								<ul class="big-arrow">
									<li><a href="#"><span> </span> </a></li>
								</ul>
							</div>
							<div class="buttons-section-grid1-top-right">
								<ul class="check-arrow">
									<li><a href="#"><span> </span> </a></li>
									<li><a href="#"><span> </span> </a></li>
									<div class="clear"> </div>
								</ul>
								<div class="clear"> </div>
							<div class="check-boxs">
								<div class="checkbox-grid-left">
								<p>
									<span class="col_checkbox">
											<input id="10" class="./css-checkbox10" type="checkbox">
											<label for="10" name="demo_lbl_10" class="css-label10"> </label>
									</span>
								</p>
								<p>
									<span class="col_checkbox">
											<input id="11" class="./css-checkbox11" type="checkbox">
											<label for="11" name="demo_lbl_11" class="css-label11"> </label>
									</span>
								</p>
								<p>
									<span class="col_checkbox">
											<input id="12" class="./css-checkbox12" type="checkbox">
											<label for="12" name="demo_lbl_12" class="css-label12"> </label>
									</span>
								</p>
							</div>
							<!---->
							<div class="clear"> </div>
							<div class="checkbox-grid-left">
								<p>
									<span class="col_checkbox">
											<input id="14" class="./css-checkbox14" type="checkbox">
											<label for="14" name="demo_lbl_14" class="css-label14"> </label>
									</span>
								</p>
								<p>
									<span class="col_checkbox">
											<input id="15" class="./css-checkbox15" type="checkbox">
											<label for="15" name="demo_lbl_15" class="css-label15"> </label>
									</span>
								</p>
								<p>
									<span class="col_checkbox">
											<input id="16" class="./css-checkbox16" type="checkbox">
											<label for="16" name="demo_lbl_16" class="css-label16"> </label>
									</span>
								</p>
							</div>
							<div class="clear"> </div>
							</div>
								<div class="clear"> </div>
							<!--//-->
							<div class="clear"> </div>
							</div>
							<div class="clear"> </div>
							<div class="buttons-section-grid1-bottom">
								<div class="meter">
									<p>Downloading..71%</p>
								</div>
							</div>
						</div>
						</div>
							<div class="small-btns">
								<ul>
									<li><input class="drk" type="button" value="Button" /></li>
									<li><input class="lit" type="button" value="Button" /></li>
									<li><input class="lits" type="button" value="Button" /></li>
									<li><input class="org" type="button" value="Button" /></li>
								</ul>
							</div>
							<div class="big-btns">
								<ul>
									<li><input class="big-drk" type="button" value="Button" /></li>
									<li><input class="big-lit" type="button" value="Button" /></li>
									<li><input class="big-lits" type="button" value="Button" /></li>
								</ul>
							</div>
							<!---start-social-icons---->
							<div class="social-icons-set">
								<ul>
									<li><a class="facebook" href="#"> </a></li>
									<li><a class="twitter" href="#"> </a></li>
									<li><a class="vimeo" href="#"> </a></li>
									<li><a class="rss" href="#"> </a></li>
									<li><a class="gplus" href="#"> </a></li>
									<li><a class="pin" href="#"> </a></li>
									<div class="clear"> </div>
								</ul>
								<div class="clear"> </div>
							</div>
							<div class="tooltips">
									<ul>
										<li><a href="#">Tooltip</a><span> </span></li>
										<li><a href="#">Tooltip</a><span> </span></li>
									</ul>
							</div>
							<!---//End-social-icons---->
							<div class="clear"> </div>
						</div>
			<div class="clear"> </div>
			<!----End-buttons-sectioin---->
			<!---start-grids-slider---->
			<div class="grids-slider">
				<div class="grids-slider-grid-row1">
					<div class="grids-slider-grid-row1-grid1" onclick="location.href='#';">
						<p>Featured store<span> </span></p>
					</div>
				<div class="grids-slider-grid-row1-slider">
					<!---slider-catption---->
						<ul class="bxslider">
						  <li><img src="./images/slider1.jpg" /><p><span>28 April,2013 <i> </i></span><label class="label1">Best story You</label><label class="label2">Have ever Heard</label></p></li>
						  <li><img src="./images/slider3.jpg" /><p><span>28 April,2013 <i> </i></span><label  class="label1">Best story You</label><label class="label2">Have ever Heard</label></p></li>
						  <li><img src="./images/slider1.jpg" /><p><span>28 April,2013 <i> </i></span><label  class="label1">Best story You</label><label class="label2">Have ever Heard</label></p></li>
						  <li><img src="./images/slider4.jpg" /><p><span>28 April,2013 <i> </i></span><label  class="label1">Best story You</label><label class="label2">Have ever Heard</label></p></li>
						</ul>
					<!---slider-catption---->
				</div>
				<div class="clear"> </div>
			</div>
			<div class="clear"> </div>
			<div class="grids-slider-grid-row2">
				<div class="grids-slider-grid-row2-grid1">
					<div class="grid-img">
					</div>
					<div class="grid-tags">
						<div class="grid-top-tags">
							<ul>
								<li><a href="#">23 April,2013</a></li>
								<li><a class="cam-icon" href="#"> </a></li>
								<div class="clear"> </div>
							</ul>
						</div>
						<div class="grid-top-tags-qt" onclick="location.href='#';">
							<p>World's Cheapest</p>
							<p>Computer</p>
						</div>
					</div>
				</div>
				<!---->
				<div class="grids-slider-grid-row2-grid2" onclick="location.href='#';">
					<p><a href="#">Saturday Career Workshops are back at ADC! See what high school Students created this week:<a href="#">http://bit.ly/Xx1EsL</a> </a></p>
					<span><a href="#">6 hours ago</a></span>
					<a class="twitter-icon" href="#"> </a>
					<div class="clear"> </div>
				</div>
				<!--//-->
				<div class="grids-slider-grid-row2-grid1">
					<div class="grid-img grid-img1">
					</div>
					<div class="grid-tags">
						<div class="grid-top-tags grid-top-tags1">
							<ul>
								<li><a href="#">23 April,2013</a></li>
								<li><a class="cam-icon cam-icon1" href="#"> </a></li>
								<div class="clear"> </div>
							</ul>
						</div>
						<div class="grid-top-tags-qt grid-top-tags-qt1" onclick="location.href='#';">
							<p>High speed slow</p>
							<p>Motion water</p>
							<p>Droplet</p>
						</div>
					</div>
				</div>
				<div class="clear"> </div>
			<div class="clear"> </div>
			<!---->
			<div class="grids-slider-grid-row3">
				<div class="grids-slider-grid-row2-grid1 grids-slider-grid-row3-grid1">
					<div class="grid-img2">
					</div>
					<div class="grid-tags">
						<div class="grid-top-tags">
							<ul>
								<li><a href="#">23 April,2013</a></li>
								<li><a class="cam-icon" href="#"> </a></li>
								<div class="clear"> </div>
							</ul>
						</div>
						<div class="grid-top-tags-qt" onclick="location.href='#';">
							<p>World's Cheapest</p>
							<p>Computer</p>
						</div>
					</div>
				</div>
			<div class="grids-slider-grid-row2-grid1 grids-slider-grid-row3-grid2">
					<div class="grid-img3">
					</div>
					<div class="grid-tags">
						<div class="grid-top-tags">
							<ul>
								<li><a href="#">23 April,2013</a></li>
								<li><a class="cam-icon" href="#"> </a></li>
								<div class="clear"> </div>
							</ul>
						</div>
						<div class="grid-top-tags-qt" onclick="location.href='#';">
							<p>World's Cheapest</p>
							<p>Computer</p>
						</div>
					</div>
				</div>
				<div class="grids-slider-grid-row1-grid1 grids-slider-grid-row3-grid3" onclick="location.href='#';">
						<p>View More Stories<span> </span></p>
					</div>
					</div>
			<!--//-->
			<!---End-grids-slider---->
		</div>
		<!---start-blog and tabs-section---->
		<div class="blog-tabs">
			<div class="blog-section">
				<div class="blog-artical">
					<div class="blog-artical-head">
						<img class="artical-img" src="./images/slider1.jpg" alt="">
							<ul class="artical-date">
								<li><a href="#">23 April,2013</a></li>
								<li><a class="text-icon" href="#"> </a></li>
								<div class="clear"> </div>
							</ul>
					</div>
					<div class="artical-info">
						<a href="#"><h4>What is lorem ipsum ?</h4></a>
						<p>It is a long established fact that a reader will be distracted by the readable content of a page 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
					</div>
					<div class="artical-related-info">
						<div class="artical-related-info-row">
							<ul class="artical-related-info-row-left">
								<li><a class="view" href="#"><span> </span>3,152</a></li>
								<li><a class="comment-icon" href="#"><span> </span>21 comments</a></li>
							</ul>
							<ul class="artical-related-info-row-right">
								<li><a class="articl-readmore" href="#">Read More</a></li>
							</ul>
							<div class="clear"> </div>
						</div>
					</div>
				</div>	
				<!---//Blog comments and news----->
			<div class="clear"> </div>
			<!---start-comment-section----->
			<div class="comment-section">
				<div class="comment-box">
					<div class="comment-people-pic">
						<a href="#"><img src="./images/comment-people1.png" alt=""></a>
					</div>
					<div class="comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Reply</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be Lorem Ipsum is that it has a more-or-less normal.</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="comment-box-replay">
					<div class="comment-box-replay-icon">
						<a href="#"><img src="./images/replay.png" alt="">
					</a></div><a href="#">
					</a><div class="comment-box-replay-box"><a href="#">
					</a><div class="comment-people-pic replay-pic"><a href="#">
						</a><a href="#"><img src="./images/comment-people1.png" alt=""></a>
					</div>
					<div class="comment-info replay-comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Reply</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader The point of using Lorem Ipsum is that it has a more-or-less normal </p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<div class="comment-box-replay">
					<div class="comment-box-replay-icon">
						<a href="#"><img src="./images/replay.png" alt="">
					</a></div><a href="#">
					</a><div class="comment-box-replay-box comment-box-replay-box-replay-to"><a href="#">
					</a><div class="comment-people-pic replay-pic"><a href="#">
						</a><a href="#"><img src="./images/comment-people1.png" alt=""></a>
					</div>
					<div class="comment-info replay-comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Reply</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long The point of using Lorem Ipsum is that it has a more-or-less normal </p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<div class="comment-box-replay">
					<div class="comment-box-replay-icon comment-box-replay-icon-right">
						<a href="#"><img src="./images/replay-right.png" alt="">
					</a></div><a href="#">
					</a><div class="comment-box-replay-box comment-box-replay-box-left"><a href="#">
					</a><div class="comment-people-pic replay-pic"><a href="#">
						</a><a href="#"><img src="./images/comment-people1.png" alt=""></a>
					</div>
					<div class="comment-info replay-comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Reply</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that The point of using Lorem Ipsum is that it has a more-or-less normal</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<div class="comment-box">
					<div class="comment-people-pic">
						<a href="#"><img src="./images/comment-people1.png" alt=""></a>
					</div>
					<div class="comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Reply</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a Lorem Ipsum is that it has a more-or-less normal </p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
		</div>
				</div>
				<!----->
				<div class="tabs-cal-social">
				<div class="tabs-right">
							<ul class="news-tabs">
							<li><a href="#tab1" class="active">Popular</a></li>
							<li><a href="#tab2">Recent</a></li>
							<div class="clear"> </div>
						</ul>
						<div id="tab1">
							<div class="latest-news-tab-grid frist-news-grid" onclick="location.href='#';">
								<div class="latest-news-tab-grid-pic">
									<img src="./images/tab-img1.jpg" alt="">
								</div>
								<div class="latest-news-tab-grid-info">
									<p>In pharetra pretium convallis. mi hendrerit varius.,</p>
								</div>
								<div class="clear"> </div>
							</div>
							<div class="latest-news-tab-grid frist-news-grid" onclick="location.href='#';">
								<div class="latest-news-tab-grid-pic">
									<img src="./images/tab-img2.jpg" alt="">
								</div>
								<div class="latest-news-tab-grid-info">
									<p>Mauris sollicitudin non mi hendrerit varius.,</p>
								</div>
								<div class="clear"> </div>
							</div>
							<div class="latest-news-tab-grid second-news-grid" onclick="location.href='#';">
								<div class="latest-news-tab-grid-pic">
									<img src="./images/tab-img1.jpg" alt="">
								</div>
								<div class="latest-news-tab-grid-info">
									<p> convallis. In pharetra non mi hendrerit varius.,</p>
								</div>
								<div class="clear"> </div>
							</div>
							<div class="latest-news-tab-grid frist-news-grid" onclick="location.href='#';">
								<div class="latest-news-tab-grid-pic">
									<img src="./images/tab-img3.jpg" alt="">
								</div>
								<div class="latest-news-tab-grid-info">
									<p>mi hendrerit varius.,Mauris sollicitudin ligula non </p>
								</div>
								<div class="clear"> </div>
							</div>
						</div>
						<div id="tab2" style="display: none;">
							<div class="latest-news-tab-grid second-news-grid" onclick="location.href='#';">
								<div class="latest-news-tab-grid-pic">
									<img src="./images/tab-img2.jpg" alt="">
								</div>
								<div class="latest-news-tab-grid-info">
									<p>In pharetra pretium convallis. mi hendrerit varius.,</p>
								</div>
								<div class="clear"> </div>
							</div>
							<div class="latest-news-tab-grid frist-news-grid" onclick="location.href='#';">
								<div class="latest-news-tab-grid-pic">
									<img src="./images/tab-img1.jpg" alt="">
								</div>
								<div class="latest-news-tab-grid-info">
									<p>In pharetra pretium convallis.hendrerit varius.,</p>
								</div>
								<div class="clear"> </div>
							</div>
							<div class="latest-news-tab-grid second-news-grid" onclick="location.href='#';">
								<div class="latest-news-tab-grid-pic">
									<img src="./images/tab-img3.jpg" alt="">
								</div>
								<div class="latest-news-tab-grid-info">
									<p>In pharetra pretium convallis. hendrerit varius.,</p>
								</div>
								<div class="clear"> </div>
							</div>
							<div class="latest-news-tab-grid frist-news-grid" onclick="location.href='#';">
								<div class="latest-news-tab-grid-pic">
									<img src="./images/tab-img2.jpg" alt="">
								</div>
								<div class="latest-news-tab-grid-info">
									<p>In pharetra pretium convallis.hendrerit varius.,</p>
								</div>
								<div class="clear"> </div>
							</div>
						</div>
						<!---tabs-script----->
						<script>
							// Wait until the DOM has loaded before querying the document
							$(document).ready(function(){
								$('ul.news-tabs').each(function(){
									// For each set of tabs, we want to keep track of
									// which tab is active and it's associated content
									var $active, $content, $links = $(this).find('a');
										// If the location.hash matches one of the links, use that as the active tab.
									// If no match is found, use the first link as the initial active tab.
									$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
									$active.addClass('active');
									$content = $($active.attr('href'));
									// Hide the remaining content
									$links.not($active).each(function () {
										$($(this).attr('href')).hide();
									});
									// Bind the click event handler
									$(this).on('click', 'a', function(e){
										// Make the old tab inactive.
										$active.removeClass('active');
										$content.hide();
										// Update the variables with the new link and content
										$active = $(this);
										$content = $($(this).attr('href'));
										// Make the tab active.
										$active.addClass('active');
										$content.show();
										// Prevent the anchor's default click action
										e.preventDefault();
									});
								});
							});
						</script>
						<!---//tabs-script----->
				</div>
				<!---//End-blog and tabs-section---->
				<!---start-calender---->
					<div class="column_right_grid calender">
                      <div class="cal1"><div class="clndr"><div class="clndr-controls"><div class="clndr-control-button"><p class="clndr-previous-button">previous</p></div><div class="month">December 2013</div><div class="clndr-control-button rightalign"><p class="clndr-next-button">next</p></div></div><table class="clndr-table" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td class="day past calendar-day-2013-12-01"><div class="day-contents">1</div></td><td class="day past calendar-day-2013-12-02"><div class="day-contents">2</div></td><td class="day past calendar-day-2013-12-03"><div class="day-contents">3</div></td><td class="day past calendar-day-2013-12-04"><div class="day-contents">4</div></td><td class="day past calendar-day-2013-12-05"><div class="day-contents">5</div></td><td class="day past calendar-day-2013-12-06"><div class="day-contents">6</div></td><td class="day past calendar-day-2013-12-07"><div class="day-contents">7</div></td></tr><tr><td class="day past calendar-day-2013-12-08"><div class="day-contents">8</div></td><td class="day past calendar-day-2013-12-09"><div class="day-contents">9</div></td><td class="day past event calendar-day-2013-12-10"><div class="day-contents">10</div></td><td class="day past event calendar-day-2013-12-11"><div class="day-contents">11</div></td><td class="day past event calendar-day-2013-12-12"><div class="day-contents">12</div></td><td class="day past event calendar-day-2013-12-13"><div class="day-contents">13</div></td><td class="day past event calendar-day-2013-12-14"><div class="day-contents">14</div></td></tr><tr><td class="day past calendar-day-2013-12-15"><div class="day-contents">15</div></td><td class="day past calendar-day-2013-12-16"><div class="day-contents">16</div></td><td class="day past calendar-day-2013-12-17"><div class="day-contents">17</div></td><td class="day past calendar-day-2013-12-18"><div class="day-contents">18</div></td><td class="day past calendar-day-2013-12-19"><div class="day-contents">19</div></td><td class="day past calendar-day-2013-12-20"><div class="day-contents">20</div></td><td class="day past event calendar-day-2013-12-21"><div class="day-contents">21</div></td></tr><tr><td class="day past event calendar-day-2013-12-22"><div class="day-contents">22</div></td><td class="day past event calendar-day-2013-12-23"><div class="day-contents">23</div></td><td class="day today calendar-day-2013-12-24"><div class="day-contents">24</div></td><td class="day calendar-day-2013-12-25"><div class="day-contents">25</div></td><td class="day calendar-day-2013-12-26"><div class="day-contents">26</div></td><td class="day calendar-day-2013-12-27"><div class="day-contents">27</div></td><td class="day calendar-day-2013-12-28"><div class="day-contents">28</div></td></tr><tr><td class="day calendar-day-2013-12-29"><div class="day-contents">29</div></td><td class="day calendar-day-2013-12-30"><div class="day-contents">30</div></td><td class="day calendar-day-2013-12-31"><div class="day-contents">31</div></td><td class="day adjacent-month next-month calendar-day-2014-01-01"><div class="day-contents">1</div></td><td class="day adjacent-month next-month calendar-day-2014-01-02"><div class="day-contents">2</div></td><td class="day adjacent-month next-month calendar-day-2014-01-03"><div class="day-contents">3</div></td><td class="day adjacent-month next-month calendar-day-2014-01-04"><div class="day-contents">4</div></td></tr></tbody></table></div></div>
				  </div>
				<!---//End-calender---->
				<!---start-contact-form--->
				<div class="contact-form">
					<form>
						<div class="text-box">
							<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
							<span>*</span>
						</div>
						<div class="text-box">
							<input type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
							<span>*</span>
						</div>
						<div class="text-box">
							<input type="text" value="Subject" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Subject';}">
							<span>*</span>
						</div>
						<div class="text-box textarea-box">
							<textarea rows="2" cols="70" onfocus="if(this.value == 'Your Message') this.value='';" onblur="if(this.value == '') this.value='Your Message';" >Your Message</textarea>
							<span>*</span>
						</div>
						<input type="submit" value="Send Message" />
					</form>
				</div>
				<!---End-contact-form--->
		</div>
		<!---start-related-tags-social-icons---->
		<div class="r-tags-social-icons">
			<div class="related-tags">
				<ul>
					<li><a href="#">Technology</a></li>
					<li><a href="#">Club</a></li>
					<li><a href="#">Bussiness</a></li>
					<li><a href="#">Graphic</a></li>
					<li><a href="#">Burger</a></li>
					<li><a href="#">Communication</a></li>
					<li><a href="#">Design</a></li>
					<li><a href="#">Flat</a></li>
					<li><a href="#">Magazine</a></li>
					<li><a href="#">Blog</a></li>
					<div class="clear"> </div>
				</ul>
			</div>
			<div class="big-social-icons">
				<ul>
					<li><a class="big-facebook" href="#"> <span>36,507</span></a></li>
					<li><a class="big-twitter" href="#"> <span>9,136</span></a></li>
					<li><a class="big-gplus" href="#"> <span>15,047</span></a></li>
				</ul>
			</div>
			<div class="clear"> </div>
		</div>
		<div class="clear"> </div>
		<!---//End-related-tags-social-icons---->	
		<!---start-big-apgenate---->
		<div class="big-pagenate">
			<ul class="pagenate-frist">
				<li><a class="frist" href="#"><span> </span>First</a></li>
			</ul>
			<ul class="pagenate-center">
				<li><a href="#">1</a></li>
			</ul>
			<ul class="pagenate-last">
				<li><a class="last1" href="#">Last <span> </span></a></li>
				<div class="clear"> </div>
			</ul>
			<div class="clear"> </div>
		</div>
			<div class="clear"> </div>
		<!---End-big-apgenate---->
		<!---start-copy-right---->
		<div class="copy-right">
			<p>Template By <a href="https://www.51qianduan.com/">51前端</a></p>
		</div>
		<!---END-copy-right---->
		</div>
		<!---//End-wrap---->



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


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

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

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

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