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

置顶 xcLeigh

于 2024-08-26 14:16:56 发布

阅读量388

点赞数 20

分类专栏：资源源码 HTML5实战案例文章标签： html5 前端 html

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/141560279

版权

HTML5实战案例同时被 2 个专栏收录

131 篇文章 108 订阅

订阅专栏

资源源码

116 篇文章 93 订阅

订阅专栏

文章目录

1.设计来源
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（防止抄袭，原文地址不可删除）

xcLeigh

关注

20
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
6
评论
HTML5手机端通用网站模板源码

HTML5手机端通用网站模板，手机端网站通用模板，模板源码，有列表，表单，表格，文章，列表，TAB，导航菜单等通用功能，便于扩展使用，内置十几个页面范例，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
复制链接

扫一扫