HTML5手机端通用网站模板源码

文章目录

1.设计来源
- [1.1 主界面](#1.1 主界面)
- [1.2 文章信息界面](#1.2 文章信息界面)
- [1.3 文章列表界面](#1.3 文章列表界面)
- [1.4 双列文章列表界面](#1.4 双列文章列表界面)
- [1.5 通用标签界面](#1.5 通用标签界面)
- [1.6 联系我界面](#1.6 联系我界面)
- [1.7 折叠框标签界面](#1.7 折叠框标签界面)
- [1.8 相关界面](#1.8 相关界面)
2.效果和源码
- [2.1 动态效果](#2.1 动态效果)
- [2.2 源代码](#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（防止抄袭，原文地址不可删除）