编程技术

Document

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

文章目录

作者：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（防止抄袭，原文地址不可删除）