文章目录
- 1.设计来源
- 1.1 主界面
- 1.2 文章信息界面
- 1.3 文章列表界面
- 1.4 双列文章列表界面
- 1.5 通用标签界面
- 1.6 联系我界面
- 1.7 折叠框标签界面
- 1.8 相关界面
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
- 万套模板，程序开发，在线开发，在线沟通
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/141560279
HTML5手机端通用网站模板，手机端网站通用模板，模板源码，有列表，表单，表格，文章，列表，TAB，导航菜单等通用功能，便于扩展使用，内置十几个页面范例，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
1.设计来源
1.1 主界面
1.2 文章信息界面
1.3 文章列表界面
1.4 双列文章列表界面
1.5 通用标签界面
1.6 联系我界面
1.7 折叠框标签界面
1.8 相关界面
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的手机端通用网站。
HTML5手机端通用网站模板
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!DOCTYPE html>
<html>
<head>
<title>H5手机端通用网站</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="H5手机端通用网站" />
<meta name="Description" content="H5手机端通用网站" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="shortcut icon" href="images/favicon.png" type="image/png" />
<link href="css/framework.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/colorbox.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/elements.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/responsive.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/hidpi.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/skin.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/effects.jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo-slider.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div class="websiteWrapper">
<div class="headerOuterWrapper">
<div class="headerWrapper"> <a href="" class="mainLogo"><img src="images/mainLogo.png" alt=""/></a> </div>
</div>
<div class="sliderOuterWrapper">
<div class="sliderWrapper">
<div class="mainSlider" id="mainSlider"> <a href=""><img src="images/slide-1.jpg" alt="" /></a> <a href=""><img src="images/slide-2.jpg" alt="" /></a><a href=""><img src="images/slide-3.jpg" alt="" /></a> </div>
</div>
</div>
<div class="mainMenuOuterWrapper">
<ul class="mainMenuWrapper">
<li data-background="#649ae1" class="menuUser" style="z-index: 100; background-color: rgb(100, 154, 225);"><a href="typography.html">关于我们</a> </li>
<li data-background="#b3cfc1" class="menuBulb" style="z-index: 90; background-color: rgb(179, 207, 193);"><a href="faq.html">FAQ 页面</a></li>
<li data-background="#ec6f5a" class="menuFire" style="z-index: 80; background-color: rgb(236, 111, 90);"><a href="404.html">404 页面</a></li>
<li data-background="#f7c65f" class="menuStack" style="z-index: 70; background-color: rgb(247, 198, 95);"><a href="portfolioOneColumn.html">单列产品展示</a></li>
<li data-background="#a992e2" class="menuStack" style="z-index: 60; background-color: rgb(169, 146, 226);"><a href="portfolioTwoColumns.html">双列产品展示</a></li>
<li data-background="#75d4cb" class="menuStack" style="z-index: 50; background-color: rgb(117, 212, 203);"><a href="portfolioOneColumnFilterable.html">单列案例展示</a></li>
<li data-background="#80a697" class="menuStack" style="z-index: 40; background-color: rgb(128, 166, 151);"><a href="portfolioTwoColumnsFilterable.html">双列案例展示</a></li>
<li data-background="#dbd48b" class="menuPhoto" style="z-index: 30; background-color: rgb(219, 212, 139);"><a href="singleProject.html">产品内页</a></li>
<li data-background="#dc6e6e" class="menuPen" style="z-index: 20; background-color: rgb(220, 110, 110);"><a href="blog.html">新闻中心</a> </li>
<li data-background="#c47acb" class="menuNote" style="z-index: 10; background-color: rgb(196, 122, 203);"><a href="singlePost.html">新闻内页</a></li>
<li data-background="#a3cc9d" class="menuMail" style="z-index: 0; background-color: rgb(163, 204, 157);"><a href="contact.html">联系我们</a></li>
</ul>
</div>
<div class="pageWrapper homePageWrapper"> </div>
<div class="footerWrapper">
<div class="copyrightWrapper">
<!-- copyright starts -->
<span class="copyright">通用网站 @ CopyRight 2024
<a href="https://blog.csdn.net/weixin_43151418" target="_blank">xcLeigh</a> |
<a href="https://item.taobao.com/item.htm?id=805108173963" target="_blank">欣晨软件服务</a></span> <!-- copyright ends -->
</div>
</div>
</div>
<div class="preloader"></div>
</body>
</html>
源码下载
HTML5手机端通用网站模板（源码） 点击下载
万套模板，程序开发，在线开发，在线沟通
- 专业后端大佬在线沟通需求开发
- 专业前端大佬在线沟通需求开发
- 专业网站整套大佬在线沟通需求开发
- 专业毕业设计大佬在线沟通需求开发
- 专业大作业大佬在线沟通需求开发
- 【优惠活动】专属定制，程序在线开发
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/141560279（防止抄袭，原文地址不可删除）
