HTML蓝色实用形式淘宝详情页企业网站模板代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 43 15



模板描述:蓝色 实用形式 淘宝详情页。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用淘宝详情页行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<link href='http://fonts.googleapis.comcss?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/jquery.desoslide.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script src="js/jquery.desoslide.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代码

<!-- banner -->
	<div class="address-info">
		<div class="container">
			<div class="address-info-text">
				<p><i class="fa fa-map-marker" aria-hidden="true"></i>  7th Street, Melbourne City, Australia.</p>
			</div>
		</div>
	</div>
	<div class="header">
		<div class="container">
			<nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<h1><a class="navbar-brand" href="index.html">Proprietorship</a></h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<nav class="cl-effect-13" id="cl-effect-13">
						<ul class="nav navbar-nav">
							<li class="active"><a href="index.html">Home</a></li>
							<li><a href="about.html">About</a></li>
							<li><a href="gallery.html">Gallery</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Short Codes <b class="caret"></b></a>
								<ul class="dropdown-menu agile_short_dropdown">
									<li><a href="icons.html">Icons</a></li>
									<li><a href="typography.html">Typography</a></li>
								</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</nav>
				</div>
			</nav>
		</div>
	</div>
	<div class="banner">
		<div class="container">
		<div class="slider">
						<div class="callbacks_container">
							<ul class="rslides callbacks callbacks1" id="slider4">
								<li>
									<div class="agileits_w3layouts_banner_info">
										<div class="col-md-4 w3-agile-bann">
											<ul>
												<li><i class="fa fa-cog" aria-hidden="true"></i>molestie maximus ultrices</li>
												<li><i class="fa fa-external-link" aria-hidden="true"></i>elementum sodales urna</li>
												<li><i class="fa fa-area-chart" aria-hidden="true"></i>rhoncus in mattis pretium</li>
												<li><i class="fa fa-university" aria-hidden="true"></i>Proin dolor tellus, vitae</li>
												<li><i class="fa fa-users" aria-hidden="true"></i>Curabitur diam lorem, ultricies</li>
											</ul>
										</div>
										<div class="col-md-8 w3-agileits-bann">
											<h3>Lorem ipsum dolor sit amet </h3>
											<p>Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper bibendum.<p>
										</div>
										<div class="clearfix"></div>
									</div>
								</li>
								<li>
									<div class="agileits_w3layouts_banner_info">
										<div class="col-md-4 w3-agile-bann">
											<ul>
												<li><i class="fa fa-cog" aria-hidden="true"></i>molestie maximus ultrices</li>
												<li><i class="fa fa-external-link" aria-hidden="true"></i>elementum sodales urna</li>
												<li><i class="fa fa-university" aria-hidden="true"></i>Proin dolor tellus, vitae</li>
												<li><i class="fa fa-users" aria-hidden="true"></i>Curabitur diam lorem, ultricies</li>
												<li><i class="fa fa-area-chart" aria-hidden="true"></i>rhoncus in mattis pretium</li>
											</ul>
										</div>
										<div class="col-md-8 w3-agileits-bann">
											<h3>Mauris ut metus sit amet magna </h3>
											<p>Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper bibendum.<p>
										</div>
										<div class="clearfix"></div>
									</div>
								</li>
								<li>
									<div class="agileits_w3layouts_banner_info">
										<div class="col-md-4 w3-agile-bann">
											<ul>
												<li><i class="fa fa-external-link" aria-hidden="true"></i>elementum sodales urna</li>
												<li><i class="fa fa-area-chart" aria-hidden="true"></i>rhoncus in mattis pretium</li>
												<li><i class="fa fa-university" aria-hidden="true"></i>Proin dolor tellus, vitae</li>
												<li><i class="fa fa-users" aria-hidden="true"></i>Curabitur diam lorem, ultricies</li>
												<li><i class="fa fa-cog" aria-hidden="true"></i>molestie maximus ultrices</li>
											</ul>
										</div>
										<div class="col-md-8 w3-agileits-bann">
											<h3>Vehicula eleifend in in urna </h3>
											<p>Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper bibendum.<p>
										</div>
										<div class="clearfix"></div>
									</div>
								</li>
								<li>
									<div class="agileits_w3layouts_banner_info">
										<div class="col-md-4 w3-agile-bann">
											<ul>
												<li><i class="fa fa-university" aria-hidden="true"></i>Proin dolor tellus, vitae</li>
												<li><i class="fa fa-users" aria-hidden="true"></i>Curabitur diam lorem, ultricies</li>
												<li><i class="fa fa-cog" aria-hidden="true"></i>molestie maximus ultrices</li>
												<li><i class="fa fa-external-link" aria-hidden="true"></i>elementum sodales urna</li>
												<li><i class="fa fa-area-chart" aria-hidden="true"></i>rhoncus in mattis pretium</li>
											</ul>
										</div>
										<div class="col-md-8 w3-agileits-bann">
											<h3>Sed condimentum dolor velit </h3>
											<p>Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper bibendum.<p>
										</div>
										<div class="clearfix"></div>
									</div>
								</li>
							</ul>
						</div>
						<div class="clearfix"> </div>
						<script>
							// You can also use "$(window).load(function() {"
							$(function () {
							  // Slideshow 4
							  $("#slider4").responsiveSlides({
								auto: true,
								pager:true,
								nav:false,
								speed: 500,
								namespace: "callbacks",
								before: function () {
								  $('.events').append("<li>before event fired.</li>");
								},
								after: function () {
								  $('.events').append("<li>after event fired.</li>");
								}
							  });
							});
						 </script>
						<!--banner Slider starts Here-->
			</div>
		</div>
	</div>
<!-- //banner -->
<!-- agileinfo -->
<div class="agileinfo-services">
		<div class="container">
			<h2 class="w3l_head w3l_head1">Welcome</h2>
			<p class="w3ls-p">Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper  bibendum.</p>
			<div class="w3_agileits_services_grids">
				<div class="col-md-4 w3_agileits_services_grid">
					<div class="w3_agileits_services_grid_agile">
						<div class="w3_agileits_services_grid_1">
							<i class="fa fa-question-circle" aria-hidden="true"></i>
						</div>
						<h3>Semper rutrum</h3>
						<p>Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper  bibendum.</p>
					</div>
				</div>
				<div class="col-md-4 w3_agileits_services_grid">
					<div class="w3_agileits_services_grid_agile">
						<div class="w3_agileits_services_grid_1">
							<i class="fa fa-envelope" aria-hidden="true"></i>
						</div>
						<h3>Condimentum </h3>
						<p>Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper  bibendum.</p>
					</div>
				</div>
				<div class="col-md-4 w3_agileits_services_grid">
					<div class="w3_agileits_services_grid_agile">
						<div class="w3_agileits_services_grid_1">
							<i class="fa fa-user" aria-hidden="true"></i>
						</div>
						<h3>Rutrum ipsum</h3>
						<p>Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper  bibendum.</p>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //agileinfo -->
	<!-- services-bottom -->
	<div class="services-bottom">
	<div class="col-md-5 wthree_services_bottom_right">
			<section class="slider">
				<div class="flexslider">
					<ul class="slides">
						<li>
							<div class="w3_agile_services_bottom_right_grid">
								<p class="w3layouts_head_slide"> Velit tempor</p>
							</div>
						</li>
						<li>
							<div class="w3_agile_services_bottom_right_grid1">
								<p class="w3layouts_head_slide"> Tempus commodo</p>
							</div>
						</li>
						<li>
							<div class="w3_agile_services_bottom_right_grid2">
								<p class="w3layouts_head_slide"> Efficitur odio</p>
							</div>
						</li>
					</ul>
				</div>
			</section>
		</div>
		<div class="col-md-7 wthree_services_bottom_left">
			<div class="wthree_services_bottom_left_grid">
				<div class="col-md-6 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/g1.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Velit tempor</h3>
						</div>
					</div>
				</div>
				<div class="col-md-6 w3_agileits_services_bottom_r_grid">
					<h4>Ultrices lorem</h4>
					<p>Praesent vulputate ipsum a velit tempor convallis. 
						Phasellus ultrices lorem eget erat tempus commodo efficitur odio.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="wthree_services_bottom_left_grid">
				<div class="col-md-6 w3_agileits_services_bottom_r_grid">
					<h4>Vulputate ipsum</h4>
					<p>Praesent vulputate ipsum a velit tempor convallis. 
						Phasellus ultrices lorem eget erat tempus commodo efficitur odio.</p>
				</div>
				<div class="col-md-6 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/g2.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
								<h3>Velit tempor</h3>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="clearfix"> </div>
	</div>
<!-- //services-bottom -->
	<!-- services -->
	<div class="banner-bottom">
	<div class="container">
			<h3 class="w3l_head w3l_head1">Our Services</h3>
			<p class="w3ls-p">Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper  bibendum.</p>
	<div class="ser-bottom">
	<div class="col-md-4 col-sm-4 agileits_banner_bottom_left">
		<div class="agileinfo_banner_bottom_pos">
			<div class="w3_agileits_banner_bottom_pos_grid">
				<div class="col-xs-4 wthree_banner_bottom_grid_left">
					<div class="agile_banner_bottom_grid_left_grid hvr-radial-out">
						<i class="fa fa-laptop" aria-hidden="true"></i>
					</div>
				</div>
				<div class="col-xs-8 wthree_banner_bottom_grid_right">	
					<h4>Morbi viverra</h4>
					<p>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="col-md-4 col-sm-4 agileits_banner_bottom_left">
		<div class="agileinfo_banner_bottom_pos">
			<div class="w3_agileits_banner_bottom_pos_grid">
				<div class="col-xs-4 wthree_banner_bottom_grid_left">
					<div class="agile_banner_bottom_grid_left_grid hvr-radial-out">
						<i class="fa fa-pencil" aria-hidden="true"></i>
					</div>
				</div>
				<div class="col-xs-8 wthree_banner_bottom_grid_right">	
					<h4>Eu iaculis</h4>
					<p>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="col-md-4 col-sm-4 agileits_banner_bottom_left">
		<div class="agileinfo_banner_bottom_pos">
			<div class="w3_agileits_banner_bottom_pos_grid">
				<div class="col-xs-4 wthree_banner_bottom_grid_left">
					<div class="agile_banner_bottom_grid_left_grid hvr-radial-out">
						<i class="fa fa-mobile" aria-hidden="true"></i>
					</div>
				</div>
				<div class="col-xs-8 wthree_banner_bottom_grid_right">	
					<h4>Commodo felis</h4>
					<p>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="col-md-4 col-sm-4 agileits_banner_bottom_left">
		<div class="agileinfo_banner_bottom_pos">
			<div class="w3_agileits_banner_bottom_pos_grid">
				<div class="col-xs-4 wthree_banner_bottom_grid_left">
					<div class="agile_banner_bottom_grid_left_grid hvr-radial-out">
						<i class="fa fa-download" aria-hidden="true"></i>
					</div>
				</div>
				<div class="col-xs-8 wthree_banner_bottom_grid_right">	
					<h4>Viverra lacus</h4>
					<p>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="col-md-4 col-sm-4 agileits_banner_bottom_left">
		<div class="agileinfo_banner_bottom_pos">
			<div class="w3_agileits_banner_bottom_pos_grid">
				<div class="col-xs-4 wthree_banner_bottom_grid_left">
					<div class="agile_banner_bottom_grid_left_grid hvr-radial-out">
						<i class="fa fa-clock-o" aria-hidden="true"></i>
					</div>
				</div>
				<div class="col-xs-8 wthree_banner_bottom_grid_right">	
					<h4>Felis semper</h4>
					<p>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="col-md-4 col-sm-4 agileits_banner_bottom_left">
		<div class="agileinfo_banner_bottom_pos">
			<div class="w3_agileits_banner_bottom_pos_grid">
				<div class="col-xs-4 wthree_banner_bottom_grid_left">
					<div class="agile_banner_bottom_grid_left_grid hvr-radial-out">
						<i class="fa fa-smile-o" aria-hidden="true"></i>
					</div>
				</div>
				<div class="col-xs-8 wthree_banner_bottom_grid_right">	
					<h4>Iaculis lectus</h4>
					<p>Morbi viverra lacus commodo felis semper, eu iaculis lectus feugiat.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="clearfix"> </div>
	</div>
	</div>
</div>
	<!-- //services -->
	<!-- news -->
	<div class="news"> 
		<div class="container">
			<h3 class="w3l_head w3l_head1">Recent News</h3>
			<p class="w3ls-p">Donec semper rutrum ipsum et bibendum. Sed condimentum dolor velit semper rutrum ipsum et velit semper  bibendum.</p>
			<div class="new-agileinfo">
				<div class="col-md-4 news-left">
					<ul id="demo1_thumbs" class="list-inline"> 
						<li><a href="images/g6.jpg"><img src="images/i2.jpg" alt="" data-desoslide-caption="<h3>Maecenas </h3> <br>Eligendi optio nam libero tempore cum soluta ">
							<div class="news-w3text">
								<h4>Maecenas aliqua</h4>
								<h6><i class="fa fa-calendar" aria-hidden="true"></i> 05 / 09 / 2016</h6>	
								<p>Integer viverra eleifend neque, duis vulputate tempus laoreet. </p>
							</div> 
						</a></li>
						<li><a href="images/g9.jpg"><img src="images/i1.jpg" alt="" data-desoslide-caption="<h3>Facere  </h3> <br>Nam libero tempore cum soluta nobis est eligendi ">
							<div class="news-w3text">
								<h4>Facere possimus</h4>
								<h6><i class="fa fa-calendar" aria-hidden="true"></i> 05 / 09 / 2016</h6>	
								<p>Aliquam erat volutpat. Duis vulputate tempus laoreet.</p>
							</div>   
						</a></li>
						<li><a href="images/g8.jpg"><img src="images/i3.jpg" alt="" data-desoslide-caption="<h3>Nulla </h3> <br>Nam libero tempore cum soluta nobis est eligendi ">
							<div class="news-w3text">
								<h4>Nulla molestie</h4>
								<h6><i class="fa fa-calendar" aria-hidden="true"></i> 05 / 09 / 2016</h6>	
								<p>Aliquam erat volutpat. Duis vulputate tempus laoreet.</p>
							</div> 
						</a></li>
						<li><a href="images/g7.jpg"><img src="images/i4.jpg" alt="" data-desoslide-caption="<h3>Duis </h3> <br>Eligendi optio nam libero tempore cum soluta nobis est ">
							<div class="news-w3text">
								<h4>Duis accumsan</h4>
								<h6><i class="fa fa-calendar" aria-hidden="true"></i> 05 / 09 / 2016</h6>	
								<p>Integer viverra eleifend neque, duis vulputate tempus laoreet. </p>
							</div> 
						</a></li> 
					</ul>
				</div>
				<div id="demo1_main_image" class="col-md-8  news-right"></div>
				<div class="clearfix"></div>
			</div>    
			<script src="js/jquery.desoslide.js"></script> 
			<script>
			$('#demo1_thumbs').desoSlide({
				main: {
					container: '#demo1_main_image',
					cssClass: 'img-responsive'
				},
				 effect: 'sideFade',
				caption: true
			});
			</script> 
		</div>
	</div>
	<!-- //news --> 
	<!-- footer -->
	<div class="footer-top">
		<div class="container">
			<div class="col-md-3 w3ls-footer-top">
				<h3>QUICK LINKS</h3>
					<ul>
						<li><a href="index.html">Home</a></li>
						<li><a href="about.html">About</a></li>
						<li><a href="gallery.html">Gallery</a></li>
						<li><a href="icons.html">Short Codes</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
			</div>
			<div class="col-md-4 wthree-footer-top">
				<h3>SUPPORT</h3>
					<ul>
					<li><span class="glyphicon glyphicon-home" aria-hidden="true"></span> 7th Street, Melbourne City, Australia.</li>
					<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> (4584) 5689 0254 128</li>
				</ul>
			</div>
			<div class="col-md-5 w3l-footer-top">
				<h3>NEWSLETTER</h3>
				<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit reprehenderit qui in ea.</p>
					<form action="#" method="post" class="newsletter">
						<input class="email" type="email" placeholder="Your email..." required="">
						<input type="submit" class="submit"  value="">
					</form>
			</div>
				<div class="clearfix"></div>
			<div class="footer-w3layouts">
				<div class="agile-copy">
					<p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://www.51qianduan.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
				</div>
				<div class="agileits-social">
					<ul>
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#"><i class="fa fa-rss"></i></a></li>
						<li><a href="#"><i class="fa fa-vk"></i></a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
<!-- //footer -->
<!-- for bootstrap working -->
<!-- //for bootstrap working -->



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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