作者: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(防止抄袭,原文地址不可删除)

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐