文章目录
作者: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>
源码下载
万套模板,程序开发,在线开发,在线沟通
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA,体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署(有自己的阿里云);
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务;
如🈶合作请联系我,期待您的联系。
注:本文撰写于CSDN平台,作者:xcLeigh(所有权归作者所有),https://blog.csdn.net/weixin_43151418,如果相关下载没有跳转,请查看这个地址,相关链接没有跳转,皆是抄袭本文,转载请备注本文原地址。
亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 🈶 问题请 留言(评论),博主看见后一定及时给您答复,💌💌💌
原文地址:https://blog.csdn.net/weixin_43151418/article/details/141560279(防止抄袭,原文地址不可删除)