我天，太好看了吧！还是响应式的手机也能用，一款超棒的宣传网站，都能当公司主页了。快来学习学习吧！

最新推荐文章于 2024-11-05 15:26:40 发布
最新推荐文章于 2024-11-05 15:26:40 发布
阅读量365 收藏 3
点赞数 3
分类专栏： 精品html模板 单页html模板 html模板 文章标签： 学习 javascript 模板 html 个人博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqhxmdq/article/details/137047732
版权

《你给我做个公司宣传页，明天下班交，没问题吧？》《你去把唐僧师徒除掉》

大家不知道有没有接到过这些离谱的任务？老板，你咋不让我上天呢？

这个时候，就应该祭出程序员的大杀器！我们来“参考参考”！

最近发现一款超好看的纯html模板，高端大气上档次，低调奢华有内涵。稍微改改，做个公司主页也未尝不可。废话不多说，大家先上眼一看。

上面的是电脑端，换成手机端响应式的是这个样子的。

怎么样？是不是超级好看？

关键的是，它还有很多动态效果。

比如：

这里，鼠标悬停会有变色效果。

这里是一个轮播图，下面还有一个页面计时的组件。

尽显高端！

而且主要是单页html，用来学习或者，“参考”是再合适不过的了。

比如上面那些悬停，好看的样式，时钟等功能，竟然只用了一个316行的html文件。

下面附出代码，大家可以研究学习一下。

<!DOCTYPE html>
<html>
<head>
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script src="js/jquery-1.11.0.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
<!--start-smoth-scrolling-->
<!--start-count-->
<link rel="stylesheet" href="css/jquery.countdown.css" />
<script src="js/jquery.countdown.js"></script>
<script src="js/script.js"></script>
<!--end-count-->
</head>
<body>
<!--start-banner-->
	<div class="banner" id="home">
			<div class="header">
				<div class="container">
					<div class="head">
						<div class="header-left">
							<a href="index.html"><h1>Blinds</h1></a>
						</div>
						<div class="header-right">
							<p>+8 (800) 555-55-55</p>
							<p><a href="mailto:example@email.com">contact@shtormarket.com</a></p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>	
			<div class="banner-top">
				<div class="banner-bottom">
					<h2>Suspendisse rutrum commodo diam</h2>
				</div>
				<div class="b-btn">
					<a href="#" class="hvr-sweep-to-right">Read more</a>
				</div>
			</div>
	</div>	
	<!--end-banner-->
	<!--start-about-->
	<div class="about">
		<div class="container">
			<div class="about-top">
				<h3>Fusce sollicitudin condimentum?</h3>
				<div class="about-bottom">
					<div class="about-bottom-text">
						<div class="col-md-4 about-bottom-grid">
							<span class="one"> </span>
							<h4>Vestibulum egestas libero</h4>
							<label> </label>
							<p>Fusce eros ante, mattis non dolor non, accumsan condimentum tellus rutrum augue et.</p>
						</div>
						<div class="col-md-4 about-bottom-grid">
							<span class="two active"> </span>
							<h4>Vestibulum egestas libero</h4>
							<label> </label>
							<p>Fusce eros ante, mattis non dolor non, accumsan condimentum tellus rutrum augue et.</p>
						</div>
						<div class="col-md-4 about-bottom-grid">
							<span class="tre"> </span>
							<h4>Vestibulum egestas libero</h4>
							<label> </label>
							<p>Fusce eros ante, mattis non dolor non, accumsan condimentum tellus rutrum augue et.</p>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="about-bottom-text">
						<div class="col-md-4 about-bottom-grid">
							<span class="fvr"> </span>
							<h4>Vestibulum egestas libero</h4>
							<label> </label>
							<p>Fusce eros ante, mattis non dolor non, accumsan condimentum tellus rutrum augue et.</p>
						</div>
						<div class="col-md-4 about-bottom-grid">
							<span class="fve"> </span>
							<h4>Vestibulum egestas libero</h4>
							<label> </label>
							<p>Fusce eros ante, mattis non dolor non, accumsan condimentum tellus rutrum augue et.</p>
						</div>
						<div class="col-md-4 about-bottom-grid">
							<span class="six"> </span>
							<h4>Vestibulum egestas libero</h4>
							<label> </label>
							<p>Fusce eros ante, mattis non dolor non, accumsan condimentum tellus rutrum augue et.</p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--end-about-->
	<!--start-gallery-->
	<div class="gallery">
		<div class="container">
			<div class="gallery-top">
				<h3>Class aptent taciti</h3>
			</div>
			<div class="gallery-bottom">
				 <ul id="flexiselDemo3">
						<li>						 	
							<img src="images/g-1.jpg" alt="" />																								 
						 </li>
						 <li>						 	
							<img src="images/g-2.jpg" alt="" />																								 
						 </li>
						 <li>						 	
							<img src="images/g-3.jpg" alt="" />																								 
						 </li>
					 </ul>	 
			</div>
		</div>
	</div>
	<!--end-gallery-->
	<!--Slider-Starts-Here-->
				 <script type="text/javascript">
					$(window).load(function() {
						
						$("#flexiselDemo3").flexisel({
							visibleItems: 3,
							animationSpeed: 1000,
							autoPlay: true,
							autoPlaySpeed: 3000,    		
							pauseOnHover: true,
							enableResponsiveBreakpoints: true,
							responsiveBreakpoints: { 
								portrait: { 
									changePoint:480,
									visibleItems: 1
								}, 
								landscape: { 
									changePoint:640,
									visibleItems: 2
								},
								tablet: { 
									changePoint:768,
									visibleItems: 3
								}
							}
						});
						
					});
				    </script>
				    <script type="text/javascript" src="js/jquery.flexisel.js"></script>

			<!--End-slider-script-->
	<!--start-sale-->
    <div class="copyrights">Collect from <a href="http://www.xxxxxx.com/"  title="网站模板">网站模板</a></div>
	<div class="sale">
		<div class="container">
			<div class="sale-main">
				<div class="col-md-6 sale-left">
					<h3>Bibendum!</h3>
					<p>Donec consectetur massa a arcu aliquet elementum eu</p>
					<div class="sale-btn">
						<a href="#" class="hvr-sweep-to-right">Discount 20%!</a>
					</div>
					<div class="count">
						<div id="counter"> </div>
					</div>
				</div>
				<div class="col-md-6 sale-right">
					<div class="sale-one">
						<p>Pellentesque ultricies tincidunt felis nec auctor nulla suscipit vitae</p>
						<div class="sale-bottom">
							<div class="col-md-6 sale-bottom-left">
								<input type="text" value="First Name" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'First Name';}"/>
								<input type="text" value="Last Name" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Last Name';}"/>
								<input type="text" value="Email" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Email';}"/>
							</div>
							<div class="col-md-6 sale-bottom-right">
								<textarea value="Your Message" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Your Message';}">Your Message</textarea>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>	
	<!--end-sale-->	
	<!--start-work-->	
	<div class="work">
		<div class="container">
			<div class="work-top">
				<h3>Work</h3>
				<div class="work-bottom">
					<div class="col-md-4 work-left">
						<div class="work-one wrk">
							<h4>01</h4>
							<p>Vestibulum auctor</p>
						</div>
						<div class="work-one">
							<h4>02</h4>
							<p>Aliquam rutrum augue et risus molestie</p>
						</div>
						<div class="work-one">
							<h4>03</h4>
							<p>Nam non bibendum eros. Sed in rhoncus Praesent</p>
						</div>
					</div>
					<div class="col-md-4 work-middle">
						<img src="images/work-1.png" alt="" />
					</div>
					<div class="col-md-4 work-right">
						<div class="work-one wrk">
							<h4>04</h4>
							<p>Etiam tincidunt ex</p>
						</div>
						<div class="work-one">
							<h4>05</h4>
							<p>Nunc porta eros non nunc vulputate in aliquam.</p>
						</div>
						<div class="work-one">
							<h4>06</h4>
							<p>Mauris bibendum eget</p>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>	
			</div>
		</div>
	</div>
	<!--end-work-->		
	<!--start-testimonial-->
	<div class="testimonial">
		<div class="container">
			<div class="testimonial-top">
				<h3>Testimonials</h3>
				    <div class="testimonial-bottom">
						<div class="col-md-4 testimonial-one">
							<img src="images/t-1.png" alt="" />
							<h4>John Doe</h4>
							<p> Morbi interdum turpis leo, quis pulvinar mauris pulvinar ut. Integer quis elementum arcu, vel euismod felis Morbi ultrices!.</p>
						</div>
						<div class="col-md-4 testimonial-one">
							<img src="images/t-2.png" alt="" />
							<h4>Christine Heal</h4>
							<p> Morbi interdum turpis leo, quis pulvinar mauris pulvinar ut. Integer quis elementum arcu, vel euismod felis Morbi ultrices!.</p>
						</div>
						<div class="col-md-4 testimonial-one">
							<img src="images/t-3.png" alt="" />
							<h4>Abraham Doe</h4>
							<p> Morbi interdum turpis leo, quis pulvinar mauris pulvinar ut. Integer quis elementum arcu, vel euismod felis Morbi ultrices!.</p>
						</div>
						<div class="clearfix"></div>
					</div>
			</div>
		</div>
	</div>
	<!--end-testimonial-->			
	<!--start-footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-main">
				<div class="col-md-6 footer-left">
					<a href="index.html"><h3>Blinds</h3></a>
					<p>Address:<span>756 gt globel Place,</span>
					   <span>CD-Road,M 07 435</span></p>
				</div>
				<div class="col-md-6 footer-right">
					<p>Donec consectetur?</p>
					<div class="ftr">
						<label>+8 (800) 555-555-55</label>
						<ul>
							<li><a href="#"><span class="sky"> </span></a></li>
							<li><a href="#"><span class="twit"> </span></a></li>
							<li><a href="#"><span class="fb"> </span></a></li>
						</ul>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="footer-bottom">
				<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.xxxxxx.com/" target="_blank" title="xxxxxx">xxxxxx</a> <a href="http://xxxxxx.com" target="_blank">xxxxxx</a> - Collect from <a href="http://www.xxxxxx.com/" title="xxxxxx" target="_blank">xxxxxx</a> <a href="http://xxxxxx.com" target="_blank">xxxxxx</a></p>
			</div>
		</div>
		<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="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	</div>
	<!--end-footer-->			
</body>
</html>

这里面还有一些css和js文件，也用到了jquery的一些内容。

大家有兴趣可以下载下来玩一下。

地址就在这里：

https://download.csdn.net/download/qqhxmdq/89036087

改改文字，换换图片。

《哎呀，老板，你这个需求嘛。。。嘶。。。至少得三天！》

yeah~

愉快的摸鱼吧！

锁住子锁不住
关注
专栏目录
HTML5响应式手机模板：MUI手机app前端页面开发框架模板HTML+CSS+JavaScript
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
08-05 1776
HTML5响应式手机模板：MUI手机app前端页面开发框架模板HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 html5手机网站模板 企业手机网站模板 公司手机网站模板 作品介绍 1.网页作品简介方面 ：MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K。MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件 。 主要功能有：下拉刷新、侧滑导航、滑动触发操作菜单等 2.网页作品编辑
浏览器主页推荐大全 | Speedceo、青柠起始页、万花筒
热门推荐
speed小周
03-23 1万+
由于浏览器主页轻便又好用，越来越多人都在浏览器主页，特别是对那些不能固定使用一台电脑的人来说，浏览器主页简直就是最好的选择，换了一台电脑，只需要打开网址，输入账号就可以立马获取一个和自己使用习惯相关的浏览器。 今天分享三款浏览器主页，如果大家发现有更好用的浏览器主页也可以在评论告诉我，毕竟独乐乐不如众乐乐。 1.Speedceo Speedceo浏览器主页就像大家看到的下图一样简洁、干净、没有热点资讯推送，就给人感觉很干净。 我喜欢用Speedceo的主要原因是，它的书签功能很好用，只要记住它的网址就相当
HTML5响应式设计创意手机模板.zip
05-25
HTML5响应式设计创意手机模板，页面简洁，自适应屏幕分辨率大小，兼容PC端和手机移动端，全套模板，包括首页、图片展示、联系我们、jQuery特性、版式功能等手机模板页面。
利用 HBuilderX 设置公司简介页面
听风者i的博客
10-01 3114
利用 HBuilderX 设置公司简介页面
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-13 1万+
HTML5期末大作业：动漫网页主题设计——卡通漫画教育首页HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品
什么牌子的开放式运动耳机好用？五大红榜超值机型力荐！
2301_82242069的博客
07-12 530
鉴于此，作为拥有四年数码产品评测经验的博主，我特地对市面上几款主流的开放式运动耳机进行了深入体验，旨在为大家呈现一系列真实、客观的评测，解析其优劣，并为大家提供实用的购买建议。最后，采用人体工学设计，可以增加耳机在佩戴时的稳定度，进一步减轻佩戴压力。所以，碰到蓝牙5.0或5.2的耳机时，别犹豫，直接选更高版本的，保证你享受超棒的连接和音质体验。此外，南卡为了确保耳机具备符合开放式音乐体验的佩戴结构，进行了深入的研究，分析了10000多份亚洲人耳廓样本，制作了数十代模型，对耳机曲线进行多轮优化。
开放式耳机怎么选性价比高？2024五大新晋爆卖机型精选！
2301_82242069的博客
06-11 1099
最后，采用人体工学设计，可以增加耳机在佩戴时的稳定度，进一步减轻佩戴压力。所以，碰到蓝牙5.0或5.2的耳机时，别犹豫，直接选更高版本的，保证你享受超棒的连接和音质体验。此外，南卡为了确保耳机具备符合开放式音乐体验的佩戴结构，进行了深入的研究，分析了10000多份亚洲人耳廓样本，制作了数十代模型，对耳机曲线进行多轮优化。舒适度方面，还特地精心融入多达23个“舒适”人体工学创新点，耳机呈31度倾斜角度，使得耳机、耳挂的形态曲线和耳轮、耳后根的结构自然贴合，减轻对单一点的压力，极大提高稳定性和舒适性。
iOS常用三方库、插件、知名技术博客、常用开发工具使用介绍等等，大家可以一次性下载了！
xiaoQ的IT人生
09-29 1万+
iOS-LibraryCollections(Github地址) Objective-C版 持续更新。。。 iOS开发常用三方库、插件、知名博客等等，大家可以一览无余了，期待大家和我们一起共同维护，同时也期望大家随时能提出宝贵的意见。 重点说明：此库完全在TimLiu-iOS（大概16-7-9日fork）的基础上面更新，因我没能得到权限跟原作者一起维护他的那个优秀的三方库，同时我也有不
超棒好看的bootstrap网站模板是一款基于HTML5+CSS3实现的动画效果极强整站模板下载。.zip
02-19
超棒好看的bootstrap网站模板是一款基于HTML5+CSS3实现的动画效果极强整站模板下载。.zip超棒好看的bootstrap网站模板是一款基于HTML5+CSS3实现的动画效果极强整站模板下载。.zip
超棒好看的bootstrap网站模板是一款基于HTML5+CSS3实现的动画效果极强整站模板下载.rar
08-05
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，使创建响应式、移动优先的网页变得更加便捷。这款“超棒好看的bootstrap网站模板”充分利用了Bootstrap的强大功能，结合HTML5和CSS3...
另外一款超棒的响应式布局jQuery插件 – Freetile.js
08-06
响应式布局在现代网页设计中扮演着至关重要的角色，它能确保网站在不同设备和屏幕尺寸上都能呈现出良好的用户体验。Freetile.js是一款优秀的jQuery插件，专为实现灵活、可自定义的响应式布局而设计。这款插件能够...
超棒的响应式布局jQuery插件Freetile.js
12-09
我们曾经介绍过俩款知名的响应式布局插：isotope和masonary，今天我们这里再介绍一款相当不错的响应式布局插件 –Freetile.js，使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢！ 主要特性 Freetie来自于...
嵌入式通信协议：UART简明学习笔记
weixin_73867577的博客
10-31 836
学习UART串口的简明学习笔记
C 学习（4）
search7的博客
11-05 623
C语言学习，每个模块来自工作中的？？？
ORB-SLAM2源码学习：ORBextractor.cc：IC_Angle 利用灰度质心法求解关键点方向角
2301_76831056的博客
11-01 691
IC_Angle 利用灰度质心法求解关键点方向角并在computeOrientation函数中被调用计算图像中所有特征点的方向。
SPI通信详解-学习笔记
qq_45059758的博客
11-04 482
SPI通信
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
最新发布
ceshiren_com的博客
11-05 471
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
diffusion model 学习笔记
wubing's 博客
11-01 988
郎之万公式: 描述了粒子做随机布朗运动 (粒子位置随时间变化的关系), 是一种 SDE, 描述了 由梯度力(即.即我们在无条件模型 DDPM 估计的噪声中添加一个微小的扰动(. 基本上,在采样一半时,基本上预测的。输出的是噪声的估计, 这个估计的噪声。通过上面的公式，我们可以知道，当知道。),就可以作为条件模型的噪声估计.首先,假设我们已经有了一个训练好的。: 每一步中保留的原始信号的比例。的计算有各种不同的方法，). 已经接近于真实的。)影响的系统的时间演化.也就是,我们训练的网络。
SAP ABAP开发学习——接口中间件（PI）
m0_64077397的博客
11-04 189
左侧的红圈表示没有被生成。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

锁住子锁不住

老少爷们向前冲！！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值