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

最新推荐文章于 2024-06-21 15:32:23 发布
最新推荐文章于 2024-06-21 15:32:23 发布
阅读量316 收藏 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~

愉快的摸鱼吧！

锁住子锁不住
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
浏览器主页推荐大全 | Speedceo、青柠起始页、万花筒
speed小周
03-23 1万+
由于浏览器主页轻便又好用，越来越多人都在浏览器主页，特别是对那些不能固定使用一台电脑的人来说，浏览器主页简直就是最好的选择，换了一台电脑，只需要打开网址，输入账号就可以立马获取一个和自己使用习惯相关的浏览器。 今天分享三款浏览器主页，如果大家发现有更好用的浏览器主页也可以在评论告诉我，毕竟独乐乐不如众乐乐。 1.Speedceo Speedceo浏览器主页就像大家看到的下图一样简洁、干净、没有热点资讯推送，就给人感觉很干净。 我喜欢用Speedceo的主要原因是，它的书签功能很好用，只要记住它的网址就相当
适合做首页的网站： http://www.netvibes.com/
weixin_34032792的博客
12-21 333
比google ig好用！
开放式耳机怎么选性价比高？2024五大新晋爆卖机型精选！
2301_82242069的博客
06-11 941
最后，采用人体工学设计，可以增加耳机在佩戴时的稳定度，进一步减轻佩戴压力。所以，碰到蓝牙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）的基础上面更新，因我没能得到权限跟原作者一起维护他的那个优秀的三方库，同时我也有不
我不生产代码，只是代码的搬运工！超级多的 ——> 第三方
热门推荐
YST的博客
10-24 2万+
我不生产代码，只是代码的搬运工！无意间看到一篇博客里面全是第三方，简直“丧心病狂”，能看到怀疑人生。总有一款适合你. ————————————————&gt; 在掘金上又看到一篇（这篇做了整理 有一些很少用到的蓝牙 陀螺仪 图表等）：https://juejin.im/entry/589591c08d6d81005838f860 1、通过CocoaPods安装 项目名称 项目信息 AFNe...
100多个经典常用的网站模板大全实例演示和下载
二当家的
06-30 1万+
推荐模板 /Template11-07 二当家的网站后台模板源码08-29 黑色技术微博客响应式模板08-22 html5绿色通用的APP页面下载08-07 绿色大气的教育培训手机模板08-06 在线自学平台课程展示模板08-06 设计超棒的奢侈品商城模板08-02 英盛网在线教育培训机构手机版出炉07-31 淘宝开放平台bootstrap响应式模板07-28 杭州边卓信息技术公司官网模板07-2
哪款蓝牙耳机适合运动佩戴？四款高配置蓝牙耳机盘点
jintan986的博客
03-16 162
随着各大厂商的智能手机都逐渐取消了耳机孔，使得越来越多的人们开始使用上了蓝牙耳机，但是市面上如此多的蓝牙耳机，难免让人选择上有些左右为难，因此，今天就给大家推荐几款高配置的蓝牙耳机！ 一、南卡A2主动降噪蓝牙耳机（399） 推荐指数：☆☆☆☆☆ Nank南卡耳机一直凭借着超棒的降噪效果和极高的音质水准，深受用户喜爱，南卡虽然没有太多的宣传但是在数码圈内还是受到了极高的关注，那是因为南卡在耳机硬件设备上一直有着超高的水准。 南卡作为有好多年音频研发经验的资深品牌，对待音质非常严苛，致力于打造无损音
适合学生党的蓝牙耳机有哪些？性价比高的四款蓝牙耳机盘点
somepig456的博客
04-11 95
在我们的生活中，蓝牙耳机真的是随处可见。无论是听网课、打电话还是打游戏，蓝牙耳机都能帮我们营造一个只属于自己的空间。随着科学技术的不断进步，蓝牙耳机可谓是越来越先进了，在音质、续航能力、延迟度上都得到了很大的提升。下面我就为大家推荐四款还不错的蓝牙耳机。 款式一：南卡A2降噪蓝牙耳机 参考价格：399 充电接口：type-C Nank南卡耳机一直凭借着超棒的降噪效果和极高的音质水准，深受用户喜爱，南卡虽然没有太多的宣传但是在数码圈内还是受到了极高的关注，那是因为南卡在耳机硬件设备上一直.
以人为本的机器学习：谷歌人工智能产品设计概述 By 机器之心2017年7月17日 12:13 取代了手动编程，机器学习（ML）是一种帮助计算机发现数据中的模式和关系的科学。对于创建个人的和动态的经历
周红伟讲AI
07-19 503
以人为本的机器学习：谷歌人工智能产品设计概述 By 机器之心2017年7月17日 12:13 取代了手动编程，机器学习（ML）是一种帮助计算机发现数据中的模式和关系的科学。对于创建个人的和动态的经历来说，它是一种强有力的工具。从 Netflix 的推荐系统到自动驾驶车辆，它已经在驱动生活中的很多事物。但随着构建机器学习的经历越来越多，如何设计用户体验（User Experience
超棒好看的bootstrap网站模板是一款基于HTML5+CSS3实现的动画效果极强整站模板下载。.zip
02-19
超棒好看的bootstrap网站模板是一款基于HTML5+CSS3实现的动画效果极强整站模板下载。.zip超棒好看的bootstrap网站模板是一款基于HTML5+CSS3实现的动画效果极强整站模板下载。.zip
超棒的响应式布局jQuery插件Freetile.js
12-09
我们曾经介绍过俩款知名的响应式布局插：isotope和masonary，今天我们这里再介绍一款相当不错的响应式布局插件 –Freetile.js，使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢！ 主要特性 Freetie来自于...
超棒好看的bootstrap网站模板是一款基于HTML5+CSS3实现的动画效果极强整站模板下载.rar
08-05
超棒好看的bootstrap网站模板是一款基于HTML5+CSS3实现的动画效果极强整站模板下载.rar
另外一款超棒的响应式布局jQuery插件 – Freetile.js
08-06
NULL 博文链接：https://justcoding.iteye.com/blog/2074425
十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维
limengshi138392的博客
06-15 1138
十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维
充电学习—7、BC1.2 PD协议
wangyongh的博客
06-18 460
PD（portable device，便携式设备）中有个检测VBUS是否有效的电路，电路有个参考值，高于这个值认为VBUS有效，参考值不固定，一般在0.8V~4V之间。首先将PD+即设备的DP拉高至0.6V，然后检测PD-即设备DM的电压，如果小于规定的参考电压，则端口是数据口SDP；首先将PD-拉高至0.6V，然后检测PD+的电压，如果小于参考电压，则端口是CDP；PD快充充电时，DCP协议识别过程，首次检测和二次检测符合BC1.2规定，初始VBUS是5V，识别出DCP之后将VBUS提高至9V。
论文学习_Teams of LLM Agents can Exploit Zero-Day Vulnerabilities
kitsch0x97的博客
06-19 836
研究背景LLM 代理变得越来越复杂，尤其是在网络安全领域。研究表明，当给出漏洞描述和具体问题时，LLM 代理可以有效利用已经存在的漏洞。然而，这些代理在处理零日漏洞时仍然表现不佳。研究内容论文展示了 LLM 代理团队如何实现零日漏洞的有效利用。之前的 LLM 代理在单独使用时很难探索许多不同的漏洞和长期规划。为了解决这个问题，论文引入和 HPTSA 系统，这是一个具有可以启动子代理的规划代理的代理系统。规划代理探索系统并确定要调用哪些子代理，从而解决尝试不同漏洞时的长期规划问题。实验结果。
2024年7月JLPT日语N1真题试卷和答案解析，《Navi日语社》小程序在线答题考试，你的专属考试助手，日语学习神器！
最新发布
工作姬
06-21 294
掌握日语，从日语社小程序开始。这款小程序专为日语学习者设计，提供全面的JLPT备考资源，包括日语N1至N5等级考试的历年真题和2024年最新题目。无论你是日语新手还是备考高手，都能在这里找到适合自己的学习路径。日语社小程序——日语学习的得力助手，助你轻松备考，高效提升。-日语能力考试（JLPT）：覆盖N1至N5各级别真题。-日语备考复习：个性化学习计划，智能错题集。-学习指导：树先生日语团队的专业支持。-便捷操作：随时随地，手机端轻松学习。-日语刷题必备：随时随地，高效复习。
能给我一些学习算法的超棒的网站吗
02-12
当然可以！以下是一些推荐的学习算法的网站： 1. Coursera：提供了各种机器学习课程，从入门到高级。 2. Kaggle：一个数据科学和机器学习竞赛平台，可以帮助您提高...希望这些网站能帮助您在学习算法方面取得进展！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

锁住子锁不住

老少爷们向前冲！！！

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

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

打赏作者

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

抵扣说明：

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

余额充值