前端_H5_仿eplie触屏版html5响应式手机wap网站模板资源-CSDN文库

共375个文件

png：333个

css：13个

html：12个

需积分: 7 88 浏览量 2022-03-13 10:55:41 上传评论收藏 1.71MB ZIP 举报

这个资源包是一个专门为移动设备设计的前端HTML5模板，名为"前端_H5_仿eplie触屏版html5响应式手机wap网站模板"。它主要用于创建适应不同屏幕尺寸的响应式网页，确保在智能手机和平板电脑等触屏设备上提供良好的用户体验。以下是基于这个模板的多个关键知识点： 1. **HTML5**：HTML5是超文本标记语言的最新版本，引入了许多新特性以提升网页的互动性和多媒体支持。例如，`<video>`和`<audio>`元素用于内嵌视频和音频，`<canvas>`用于图形绘制，以及`<section>`、`<article>`等语义化标签，帮助提高网页内容的可读性和可访问性。 2. **CSS**：层叠样式表（CSS）在该模板中扮演着至关重要的角色，负责定义网页的布局和视觉风格。响应式设计是CSS3的一个重要特性，通过媒体查询（@media queries）来调整不同设备上的布局，确保页面在不同屏幕尺寸下都能自适应。 3. **响应式设计**：响应式设计是现代网页开发的标准，它允许网页根据用户设备的屏幕大小和方向进行动态调整。这个模板使用了流式布局、弹性网格、相对单位（如em和rem）以及媒体查询，以实现灵活多变的界面布局。 4. **JavaScript**：虽然未直接提及，但JavaScript通常与HTML5和CSS一起用于构建交互式前端应用。在这个模板中，可能使用了JavaScript库或框架（如jQuery或React）来增强用户交互，例如滑动效果、动画和表单验证。 5. ** Typography.html**：这个文件可能包含各种字体、字号、行高和段落样式的示例，展示了如何在模板中应用和定制文字样式。 6. **singlePost.html**：这可能是博客文章的单独展示页面，包含文章标题、内容、作者信息和评论区等元素。 7. **portfolioTwoColumnsFilterable.html**：这可能是一个作品集页面，以两列布局展示项目，并具有过滤功能，允许用户按类别筛选内容。 8. **contact.html**：这个文件通常用于构建联系表单，可能包括输入字段（如姓名、电子邮件和消息）以及提交按钮，可能还集成了地图或联系方式显示。 9. **blog.html**：博客主页面，可能包含多篇文章的摘要、日期、作者信息和链接，引导用户阅读完整文章。 10. **portfolioOneColumn.html**和**portfolioTwoColumns.html**：这两个文件分别展示了单列和双列的作品集布局，适合展示设计师或艺术家的作品。 11. **index.html**：这是网站的主页，通常包含导航菜单、特色内容和介绍信息。 12. **faq.html**：常见问题解答页面，列出用户可能遇到的问题及其答案。这个模板为开发者提供了创建专业且响应式的手机网站的基础结构，可以快速启动一个新的项目，同时也能根据需求进行自定义和扩展。通过深入理解这些文件和相关技术，开发者可以创建出既美观又功能丰富的移动网站。

资源详情

资源评论

资源推荐

收起资源包目录

前端_H5_仿eplie触屏版html5响应式手机wap网站模板（375个子文件）

style.css 36KB

elements.css 22KB

hidpi.css 22KB

framework.css 6KB

orange.css 3KB

green.css 3KB

blue.css 3KB

pink.css 3KB

red.css 3KB

colorbox.css 1KB

skin.css 928B

responsive.css 911B

custom.css 751B

loading.gif 723B

typography.html 11KB

singlePost.html 8KB

portfolioTwoColumnsFilterable.html 7KB

contact.html 7KB

portfolioOneColumnFilterable.html 7KB

blog.html 7KB

portfolioTwoColumns.html 7KB

portfolioOneColumn.html 7KB

index.html 6KB

faq.html 6KB

singleProject.html 6KB

404.html 5KB

slide1.jpg 168KB

small-1-6.jpg 154KB

slide3.jpg 141KB

small-1-5.jpg 140KB

small-1-1.jpg 133KB

small-1-3.jpg 118KB

slide2.jpg 101KB

small-1-4.jpg 77KB

small-1-2.jpg 74KB

jquery.min.js 82KB

effects.jquery-ui.min.js 13KB

jquery.nivo-slider.min.js 12KB

jquery.colorbox.min.js 11KB

custom.js 7KB

contact.js 4KB

bgPat-1-x2.png 119KB

bgPat-1.png 38KB

commentAvatarBg.png 3KB

iconLocationBg16.png 3KB

iconCheckmarkBg16.png 3KB

alertBoxGoBg.png 3KB

iconCheckmarkBg16.png 3KB

iconEmailBg16.png 3KB

iconCameraBg16.png 3KB

mainLogo.png 3KB

iconGraphBg16.png 3KB

iconClockBg64.png 2KB

iconGlobeBg64.png 2KB

controlsBg-x2.png 2KB

iconClockBg32.png 2KB

iconGearBg64.png 2KB

iconGlobeBg32.png 2KB

iconDribbbleBg32.png 2KB

iconSearchBg64.png 2KB

iconRefreshBg64.png 2KB

iconHeartBg64.png 2KB

iconFlagBg64.png 2KB

iconHeartBg64.png 2KB

iconFlagBg64.png 2KB

iconGearBg32.png 2KB

iconAttachBg64.png 2KB

iconLinkBg64.png 2KB

iconInfoBg64.png 2KB

iconAttachBg64.png 2KB

iconLinkBg64.png 2KB

iconInfoBg64.png 2KB

iconCameraBg64.png 2KB

iconRssBg32.png 2KB

iconCameraBg64.png 2KB

portfolioDetailsButtonBg-x2.png 2KB

portfolioExpandButtonBg-x2.png 2KB

iconKeyBg64.png 2KB

iconGearBg32.png 2KB

iconRefreshBg32.png 2KB

iconKeyBg64.png 2KB

iconDollarBg64.png 2KB

controlsBg.png 2KB

iconGearBg32.png 2KB

iconRefreshBg32.png 2KB

iconRssBg32.png 2KB

共 375 条

<!DOCTYPE html> <html> <head> <title>仿eplie触屏版html5响应式手机wap网站模板下载样式特效-懒人模板【http://www.lanrenmb.com/HTML5/】</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="eplie, premium, mobile, template, HTML, Css" /> <meta name="Description" content="Premium mobile HTML/CSS template." /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />   <link rel="shortcut icon" href="images/common/favicon.ico" type="image/x-icon" />   <link href='http://222.178.203.72:19005/whst/63/=cnvmknZczbrcmzmds//../../fonts.googleapis.com/css@family=Droid+Sans_3A400,700' rel='stylesheet' type='text/css' />   <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 class="mainLogo" href="index.html"><img src="images/common/mainLogo.png" alt=""/></a> <a href="default.htm" class="mainMenuButton"></a> </div>  <ul class="mainMenuWrapper"> <li><a href="index.html">Home</a></li> <li class="currentPage"><a href="typography.html">About</a> </li> <li><a href="faq.html">FAQ Page</a></li> <li><a href="404.html">404 Page</a></li> <li><a href="portfolioOneColumn.html">Portfolio With One Column</a></li> <li><a href="portfolioTwoColumns.html">Portfolio With Two Columns</a></li> <li><a href="portfolioOneColumnFilterable.html">Filterable Portfolio With One Column</a></li> <li><a href="portfolioTwoColumnsFilterable.html">Filterable Portfolio With Two Columns</a></li> <li><a href="singleProject.html">Single Portfolio Project</a></li> <li><a href="blog.html">Blog</a> </li> <li><a href="singlePost.html">Single Post</a></li> <li><a href="contact.html">Contact</a></li> </ul>  </div>   <p class="topNotification"><span>We do not use cookies!</span><a href="default.htm" class="notificationButton"></a></p>   <div class="pageWrapper">  <div class="pageContentWrapper">  <h3 class="pageTitle">About "eplie"</h3>  <p>Welcome to "eplie"!</p> <p>If you are looking for a versatile mobile template that will work on all mobile devices not just smartphones, then you found the right one.</p> <p>"eplie" is not just another responsive template limited to certain screen sizes. This template has a liquid structure based on a {solid} CSS framework that will adapt to any screen, including retina displays.</p> <div class="textBreakBoth"></div> <h4>Columns:</h4>  <div class="columnWrapper oneHalf"> <h4>1/2</h4> <p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi opti.</p> </div> <div class="columnWrapper oneHalf lastColumn"> <h4>1/2</h4> <p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi opti.</p> </div>  <div class="clear"></div>  <div class="columnWrapper oneThird"> <h4>1/3</h4> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p> </div> <div class="columnWrapper oneThird"> <h4>1/3</h4> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p> </div> <div class="columnWrapper oneThird lastColumn"> <h4>1/3</h4> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui.</p> </div>  <div class="clear"></div> <div class="textBreakBottom"></div> <h4 class="blockTitle">Tables:</h4>  <table> <thead> <tr> <th>Number</th> <th>Product</th> <th>Price</th> <th>Availability</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Vero</td> <td>$32</td> <td><span class="singleIconWrapper iconCheckmarkLight"></span></td> </tr> <tr> <td>2</td> <td>Ipsum</td> <td>$87</td> <td><span class="singleIconWrapper iconCheckmarkLight"></span></td> </tr> <tr> <td>3</td> <td>Amet</td> <td>$99</td> <td><span class="singleIconWrapper iconCheckmarkLight"></span></td> </tr> <tr> <td>4</td> <td>Dolor</td> <td>$169</td> <td><span class="singleIconWrapper iconNoLight"></span></td> </tr> </tbody> </table>  <div class="textBreakBottom"></div> <h4 class="blockTitle">Quotes:</h4>  <div class="quoteWrapper"> <a href="default.htm" class="quoteAvatar"><img src="images/common/commentAvatarBg.png" alt=""></a> <blockquote> <p>"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <cite>- John Doe</cite></blockquote> </div>   <blockquote> <p>"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <cite>- John Doe</cite> </blockquote>  <div class="textBreakBoth"></div> <h4 class="blockTitle">Alert Boxes:</h4>  <div class="alertBox alertBoxWarning"> <p class="alertBoxContent">Ut enim ad mini ma veniam, quis nostrum exerci tationem ullam corporis suscipit labor iosam.</p> <a href="default.htm" class="alertBoxButton"></a> </div>   <div class="alertBox alertBoxStop"> <p class="alertBoxContent">Ut enim ad mini ma veniam, quis nostrum exerci tationem ullam corporis suscipit labor iosam.</p> <a href="default.htm" class="alertBoxButton"></a> </div>   <div class="alertBox alertBoxGo"> <p class="alertBoxContent">Ut enim ad mini ma veniam, quis nostrum exerci tationem ullam corporis suscipit labor iosam.</p> <a href="default.htm"