HTML5好看的通用网站模板源码

xcLeigh2024-05-24 22:00

文章目录

  • 1.设计来源
    • [1.1 主界面](#1.1 主界面)
    • [1.2 模板菜单1 界面](#1.2 模板菜单1 界面)
    • [1.3 模板菜单2 界面](#1.3 模板菜单2 界面)
    • [1.4 模板菜单3 界面](#1.4 模板菜单3 界面)
    • [1.5 下拉菜单1 界面](#1.5 下拉菜单1 界面)
    • [1.6 下拉菜单2 界面](#1.6 下拉菜单2 界面)
    • [1.7 模板菜单4 界面](#1.7 模板菜单4 界面)
    • [1.8 模板菜单5 界面](#1.8 模板菜单5 界面)
    • [1.9 界面底部](#1.9 界面底部)
  • 2.效果和源码
    • [2.1 动态效果](#2.1 动态效果)
    • [2.2 源码目录](#2.2 源码目录)
    • [2.3 源代码](#2.3 源代码)
  • 源码下载

作者：xcLeigh

文章地址：https://blog.csdn.net/weixin_43151418/article/details/139151226

HTML5好看的通用网站模板源码，大作业网站源码，毕业设计网站源码，通用模板，网站源码，布局规整，色彩鲜明，导航菜单，轮播图（可自定义内容），图文结合，滚动信息，信息表单，描点跳转，整体风格简洁，内容丰富，各种风格都有，兼容性强，支持手机端，电脑端，代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1.设计来源

1.1 主界面

主界面，头部是导航菜单（有个下拉菜单案列，见下效果图），头部左侧是系统名称，头部右侧是分享操作。下面内容是一个大的轮播（自动播放，图+文字+卡片），可根据自己的需求，自定义内容。
点击下拉菜单出现两个菜单，可根据自己需求配置


轮播图1，轮播图片，文字内容，根据自己的需求可要可不要


轮播图2，轮播图片，文字内容，根据自己的需求可要可不要


轮播图3，轮播图片，文字内容，根据自己的需求可要可不要


轮播图4，轮播图片，文字内容，根据自己的需求可要可不要


轮播图5，轮播图片，文字内容，根据自己的需求可要可不要

1.2 模板菜单1 界面

模板菜单1 界面，菜单内容风格一种，头部是模板的标题（跟首页导航相呼应），相关描述，相关操作，可根据自己的需求，自定义内容。具体效果如下图。

1.3 模板菜单2 界面

模板菜单2 界面，菜单内容风格一种，头部是模板的标题（跟首页导航相呼应），相关描述，相关操作，可根据自己的需求，自定义内容。具体效果如下图。

1.4 模板菜单3 界面

模板菜单3 界面，菜单内容风格一种，头部是模板的标题（跟首页导航相呼应），相关描述，相关操作，可根据自己的需求，自定义内容。具体效果如下图。

1.5 下拉菜单1 界面

下拉菜单1 界面，菜单内容风格一种，头部是模板的标题（跟首页导航相呼应），相关描述，相关操作，可根据自己的需求，自定义内容。具体效果如下图。

1.6 下拉菜单2 界面

下拉菜单2 界面，菜单内容风格一种，头部是模板的标题（跟首页导航相呼应），相关描述，相关操作，可根据自己的需求，自定义内容。具体效果如下图。

1.7 模板菜单4 界面

模板菜单4 界面，菜单内容风格一种，头部是模板的标题（跟首页导航相呼应），相关描述，相关操作，可根据自己的需求，自定义内容。具体效果如下图。

1.8 模板菜单5 界面

模板菜单5 界面，菜单内容风格一种，头部是模板的标题（跟首页导航相呼应），相关描述，相关操作，可根据自己的需求，自定义内容。具体效果如下图。

1.9 界面底部

界面底部，上面的是提交邮箱或者表单订阅信息；中间的是站内导航或者站外导航，自定义；下面的是网站版权信息，可根据自己的需求，自定义内容。具体效果如下图。

2.效果和源码

2.1 动态效果

这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的个人网站主页。

HTML5好看的通用网站模板源码

2.2 源码目录

2.3 源代码

这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html lang="en">
<head>
<title>网站模板-标题</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="keywords" content="网站模板" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> 
</head>

<body>
<div class="header">
	<nav class="navbar navbar-default">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<h1><a href="index.html">模板标题</a></h1>
		</div>
		<div class="top-nav-text">
			<ul class="social_agileinfo">
				<li><a href="#" class="w3_facebook"><i class="fa fa-weixin"></i></a></li>
				<li><a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a></li>
				<li><a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a></li>
				<li><a href="#" class="w3_google"><i class="fa fa-qq"></i></a></li>
			</ul>
		</div>
		<!-- navbar-header -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a class="hvr-underline-from-center active" href="index.html">首页</a></li>
				<li><a href="#about" class="hvr-underline-from-center scroll">模板菜单1</a></li>
				<li><a href="#services" class="hvr-underline-from-center scroll">模板菜单2</a></li>
				<li><a href="#team" class="hvr-underline-from-center scroll">模板菜单3</a></li>
				<li><a href="#" data-toggle="dropdown"><span data-hover="dropdown">下拉菜单</span><span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#packages" class="scroll"><span data-hover="Popular Packages">下拉菜单1</span></a></li>
						<li><a href="#offers" class="scroll"><span data-hover="Recent Trips">下拉菜单2</span></a></li>
					</ul>
				</li>	
				<li><a href="#testimonials" class="hvr-underline-from-center scroll">模板菜单4</a></li>
				<li><a href="#contact" class="hvr-underline-from-center scroll">模板菜单5</a>
			</ul>
		</div>

		<div class="clearfix"> </div>	
	</nav>
</div>
<section class="slider">
	<div class="callbacks_container">
		<ul class="rslides" id="slider">
			<li>
				<div class="w3layouts-banner-top w3layouts-banner-top1">
					<div class="banner-dott">
					<div class="container">
						<div class="slider-info">
								<h2>内容标题</h2>
								<h4>轮播图1内容描述</h4>
								<div class="w3ls-button">
									<a href="#" data-toggle="modal" data-target="#myModal">查看更多</a>
								</div>
								<div class="bannergrids">
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-cloud" aria-hidden="true"></i>
											<p>1 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-folder" aria-hidden="true"></i>
											<p>2 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-gitlab" aria-hidden="true"></i>
											<p>3 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
						</div>
					</div>
					</div>
				</div>
			</li>
			<li>
				<div class="w3layouts-banner-top">
					<div class="banner-dott">
					<div class="container">
						<div class="slider-info">
								<h3>内容标题</h3>
								<h4>轮播图2内容描述</h4>
								<div class="w3ls-button">
									<a href="#" data-toggle="modal" data-target="#myModal">查看更多</a>
								</div>
								<div class="bannergrids">
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-cloud" aria-hidden="true"></i>
											<p>1 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-folder" aria-hidden="true"></i>
											<p>2 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-gitlab" aria-hidden="true"></i>
											<p>3 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
						</div>
					</div>
					</div>
				</div>
			</li>
			<li>
				<div class="w3layouts-banner-top w3layouts-banner-top3">
					<div class="banner-dott">
					<div class="container">
						<div class="slider-info">
								<h3>内容标题</h3>
								<h4>轮播图3内容描述</h4>
								<div class="w3ls-button">
									<a href="#" data-toggle="modal" data-target="#myModal">查看更多</a>
								</div>
								<div class="bannergrids">
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-cloud" aria-hidden="true"></i>
											<p>1 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-folder" aria-hidden="true"></i>
											<p>2 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-gitlab" aria-hidden="true"></i>
											<p>3 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
						</div>
					</div>
					</div>
				</div>
			</li>
			<li>
				<div class="w3layouts-banner-top w3layouts-banner-top2">
					<div class="banner-dott">
					<div class="container">
						<div class="slider-info">
								<h3>内容标题</h3>
								<h4>轮播图4内容描述</h4>
								<div class="w3ls-button">
									<a href="#" data-toggle="modal" data-target="#myModal">查看更多</a>
								</div>
								<div class="bannergrids">
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-cloud" aria-hidden="true"></i>
											<p>1 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-folder" aria-hidden="true"></i>
											<p>2 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-gitlab" aria-hidden="true"></i>
											<p>3 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
						</div>
					</div>
					</div>
				</div>
			</li>
			
			<li>
				<div class="w3layouts-banner-top w3layouts-banner-top4">
					<div class="banner-dott">
					<div class="container">
						<div class="slider-info">
								<h3>内容标题</h3>
								<h4>轮播图5内容描述</h4>
								<div class="w3ls-button">
									<a href="#" data-toggle="modal" data-target="#myModal">查看更多</a>
								</div>
								<div class="bannergrids">
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-cloud" aria-hidden="true"></i>
											<p>1 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-folder" aria-hidden="true"></i>
											<p>2 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="col-md-4">
										<div class="grid1">
											<i class="fa fa-gitlab" aria-hidden="true"></i>
											<p>3 这里写详细的内容描述，根据自己的需求写。</p>
										</div>
									</div>
									<div class="clearfix"></div>
								</div>
						</div>
					</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="clearfix"></div>
</section>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script src="js/myself.js"></script>
</body>
</html>

源码下载

HTML5好看的通用网站模板（源码） 点击下载

--------------- 业精于勤，荒于嬉 ---------------


--------------- 行成于思，毁于随 ---------------

💢 关注博主 带你实现畅游前后端

🏰 加入社区 带你体验马航不孤单

💯 神秘个人简介 带你体验不一样得介绍

💘 为爱表白 为你那个TA，体验别致的浪漫惊喜

🎀 酷炫邀请函 带你体验高大上得邀请

① 🉑提供云服务部署 （有自己的阿里云）；

② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；

如🈶合作请联系我，期待您的联系。

注 ：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏 ，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/139151226（防止抄袭，原文地址不可删除）

相关推荐
ok!ko1 小时前
设计模式之原型模式(通俗易懂--代码辅助理解【Java版】）
java·设计模式·原型模式
正小安1 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
2402_857589361 小时前
“衣依”服装销售平台：Spring Boot框架的设计与实现
java·spring boot·后端
吾爱星辰2 小时前
Kotlin 处理字符串和正则表达式（二十一）
java·开发语言·jvm·正则表达式·kotlin
哎呦没2 小时前
大学生就业招聘：Spring Boot系统的架构分析
java·spring boot·后端
_.Switch3 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光3 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   3 小时前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   3 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
编程、小哥哥3 小时前
netty之Netty与SpringBoot整合
java·spring boot·spring
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02安卓系列机型永久去除data分区加密 详细步骤解析032024年高教社杯数学建模国赛C题超详细解题思路分析04CTF网络安全大赛简单的web抓包题目：HEADache05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07pve(Proxmox VE)安装i225v网卡驱动08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10RAG 实践- Ollama+RagFlow 部署本地知识库