【免费】手机仿海王星辰网上药店_HTML手机电脑网站_网页源码移动端前端_H5模板

共77个文件

png：45个

css：9个

js：8个

网站前端

网页模板

html

需积分: 0 186 浏览量更新于2023-08-02 收藏 374KB ZIP 举报

该压缩包文件“手机仿海王星辰网上药店_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip”包含了构建一个类似于海王星辰网上药店的移动和桌面网站所需的前端资源。这个项目是基于HTML、CSS和JavaScript技术栈，采用H5（HTML5）标准和响应式设计，确保在不同设备上自适应显示。 1. **HTML5（HyperText Markup Language 5）**: HTML5是目前Web开发中最常用的语言版本，它引入了许多新特性，如语义化标签（如<header>、<nav>、<section>等），媒体元素（<video>、<audio>），离线存储（Application Cache），以及增强的表单控制。在这个项目中，HTML5将用于构建网页结构，使内容更易于理解和解析。 2. **响应式设计**: 响应式设计允许网页根据用户的设备屏幕大小和方向自动调整布局。这通常通过使用媒体查询（Media Queries）实现，使得设计师可以定义不同断点下的样式规则。在海王星辰药店的网页源码中，响应式设计确保用户无论在手机还是电脑上都能获得良好的浏览体验。 3. **CSS（Cascading Style Sheets）**: CSS用于定义网页的外观和布局。在这个项目中，CSS将被用来控制元素的颜色、字体、布局和其他视觉属性，并结合HTML5的特性实现响应式布局。可能使用到的技术有Flexbox或Grid布局，它们为创建复杂的弹性布局提供了简便的方法。 4. **JavaScript**: JavaScript是网页的动态语言，用于实现交互性功能，如表单验证、动态内容加载和用户反馈。在这个源码中，JavaScript可能被用来处理页面上的事件（如点击按钮）、与服务器通信（Ajax请求）以及提供用户体验上的增强。 5. **网页模板**: 网页模板是一种预先设计好的布局，开发者可以在此基础上进行修改以适应特定项目需求。这个项目提供的H5模板，可能是包含多个预定义页面（如首页、产品列表、购物车等）的结构，方便快速搭建网站。 6. **移动端前端**: 移动端前端开发主要关注手机和平板等移动设备的用户体验。在这个源码中，所有的设计和代码都将优化以适应小屏幕设备，包括触摸交互和性能优化。 7. **自适应设计**: 自适应设计与响应式设计相似，但更专注于根据设备的特定特性（如屏幕分辨率、操作系统等）调整内容。在这个项目中，自适应设计意味着网站不仅会根据屏幕尺寸变化，还会根据设备的特性提供定制化的用户体验。这个压缩包包含了一个完整的前端解决方案，适用于创建一个仿海王星辰网上药店的多平台网站。开发者可以通过研究和修改这些源码，学习和应用HTML5、CSS和JavaScript的最佳实践，同时了解如何构建响应式和自适应的网页。

收起资源包目录

手机仿海王星辰网上药店_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip （77个子文件）

手机仿海王星辰网上药店

category

1006-000-000.html 9KB

all.html 30KB

1006-1032-000.html 8KB

default.htm 18KB

html5

user.js 5KB

spin.min.js 4KB

common.js 34KB

strCut.js 2KB

view.js 31KB

jquery-1.6.2.min.js 89KB

zepto.min.js 27KB

products

1006-1032-2427.html 25KB

user

css

all_html5.css 2KB

search_html5.css 6KB

base2013.css 22KB

hotel.css 11KB

extend.css 2KB

base.css 85KB

index.css 11KB

airline.css 11KB

index.html 18KB

images

touch2013

icon2b.png 25KB

icon.png 14KB

html5

b_arrow.png 540B

m365-_08.png 3KB

succ-img.png 3KB

down.png 3KB

ad_3.jpg 46KB

logo_new.png 3KB

ad_1.jpg 8KB

header_bg.png 1KB

m365-_06.png 3KB

m365-_27.png 3KB

arrow.png 3KB

m365-_13.png 3KB

categorys.png 3KB

m365-_16.png 4KB

m365-_19.png 3KB

icon_check.png 283B

m365-_12.png 3KB

cart.png 4KB

search.png 3KB

m365-_28.png 3KB

pagination.png 3KB

m365-_24.png 3KB

back.png 3KB

m365-_22.png 3KB

top.png 3KB

m365-_10.png 3KB

new

ico_price_up.png 137B

icon_suc.png 1KB

ico_arr_up.png 262B

icon_concern.png 438B

more.png 347B

ico_price_down.png 141B

right1.png 255B

left.png 254B

icon_search.png 823B

right.png 3KB

icon_pop_star2.png 372B

rechang_bg.png 140B

ad_2.jpg 40KB

m365-_17.png 3KB

page.png 3KB

m365-_23.png 3KB

default_220x220.gif 3KB

m365-_02.png 3KB

sort.png 3KB

m365-_03.png 3KB

cart3.png 2KB

product

22349.html.bak 20KB

22349.html 20KB

images

html5

default_220x220.gif 3KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html> <head> <title>仿海王星辰网上药店触屏版手机wap健康购物网站模板全部分类-懒人模板【http//www.lanrenmb.com/shenghuofuwu/jiankang/】</title> <meta name="author" content="m.star365.com"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" type="text/css" href="../css/base2013.css" /> <link rel="stylesheet" type="text/css" href="../css/all_html5.css" /> <script type="text/javascript" src="../js/html5/view.js"></script> <script type="text/javascript"> var _winLocation = window.location.href; //获得当前页面的路径，根据路径规则进行逐页替换 var _isWebKit = '__proto__' in {}; //是否是webkit内核 if (_isWebKit) {//如果是webkit内核，则分模块使用zepto //要使用zeptojs的路径列表，可以做为分模块替换的开关 var _locationList = new Array(); //活动模块 _locationList.push('../activity/proActList'); _locationList.push('../activity/proActWareList'); _locationList.push('../activity/list'); //商品分类模块 _locationList.push('./'); //首页相关 _locationList.push('../hotbrand.html'); //商品筛选相关 _locationList.push('../ware/expandSort.action'); _locationList.push('../ware/categoryFilter.action'); _locationList.push('../search'); _locationList.push('../pay/'); //支付 _locationList.push('../order/'); //订单 var _needReplace = false; //如果当前路径符合要使用的路径规则，则进行替换 for (var i = 0; i < _locationList.length; i++) { if (_winLocation.indexOf(_locationList[i]) != -1) { _needReplace = true; break; } } //如果是首页的话，则使用zepto var _tmp = _winLocation.replace(/(^http:\/\/)|(\/*$)/g, ''); if (_tmp.indexOf('/') < 0 || (_tmp.split('/').length <= 2 && _tmp.indexOf('/index') >= 0)) { _needReplace = true; } //如果是商品详情页的话，则使用zepto var _dlocationList = new Array(); _dlocationList.push(/\/product\/([0-9]+)\.html/); _dlocationList.push(/\/detail\/([0-9]+)\.html/); _dlocationList.push(/\/orderComment\/([0-9]+)\.html/); _dlocationList.push(/\/consultations\/([0-9]+)\.html/); _dlocationList.push(/\/consultations\/([0-9]+)-([0-9]+)\.html/); _dlocationList.push(/\/comments\/([0-9]+)\.html/); for (var i = 0, len = _dlocationList.length; i < len; i++) { if (_dlocationList[i].test(_winLocation)) { _needReplace = true; break; } } if (_needReplace) { document.write('<script src="../js/zepto.min.js"><\/script>'); document.write('<script type="text/javascript">window.jQuery=window.Zepto;<\/script>'); } else { document.write('<script src="../js/jquery-1.6.2.min.js"><\/script>'); } } else {//如果是非webkit内核直接使用jquery document.write('<script src="../js/jquery-1.6.2.min.js"><\/script>'); } </script> <script type="text/javascript" src="../js/html5/common.js"></script> <script type="text/javascript" src="../js/html5/spin.min.js"></script> </head> <body id="body"> <a name="top"></a> <header> <div class="new-header"> <a class="new-a-back" href="javascript:pageBack();"><span>返回</span></a> <h2>商品分类</h2> <a class="new-a-hw" id="btnHwkey" href="javascript:void(0)"><span>海王键</span></a> </div> <div id="hwkey" style="display: none" class="new-hw-tab"> <div class="new-tbl-type"> <a class="new-tbl-cell" href="../index.html"> <span class="icon">首页</span> <p style="color: #6e6e6e;">首页</p> </a> <a class="new-tbl-cell" href="all.html"> <span class="icon2">分类搜索</span> <p style="color: #6e6e6e;">分类搜索</p> </a> <a class="new-tbl-cell" id="html5_cart" href="javascript:void(0)"> <span class="icon3">购物车</span> <p style="color: #6e6e6e;">购物车</p> </a> <a class="new-tbl-cell" href="../user/home"> <span class="icon4">我的账户</span> <p style="color: #6e6e6e;" class="on">我的账户</p> </a> </div> </div> </header> <div class="new-ct"> <div class="new-category"> <ul class="new-category-lst"> <li class="new-category-li"> <a class="new-category-a" id="1782" href="javascript:void(0)">药品</a> <ul style="display: none" id="category1782" class="new-category2-lst"> <li class="new-category2-li"> <a class="new-category2-a" href="1782-1783-000.html"> <span class="new-bar"></span>儿童用药 </a> <a class="new-category2-a" href="1782-2384-000.html"> <span class="new-bar"></span>减肥用药 </a> <a class="new-category2-a" href="1782-1784-000.html"> <span class="new-bar"></span>妇科用药 </a> </li> <li class="new-category2-li"> <a class="new-category2-a" href="1782-1787-000.html"> <span class="new-bar"></span>感冒用药 </a> <a class="new-category2-a" href="1782-1804-000.html"> <span class="new-bar"></span>肌肤健康 </a> <a class="new-category2-a" href="1782-1807-000.html"> <span class="new-bar"></span>眼科用药 </a> </li> <li class="new-category2-li"> <a class="new-category2-a" href="1782-2128-000.html"> <span class="new-bar"></span>耳鼻用药 </a> <a class="new-category2-a" href="1782-2223-000.html"> <span class="new-bar"></span>口腔用药 </a> <a class="new-category2-a" href="1782-1806-000.html"> <span class="new-bar"></span>胃肠用药 </a> </li> <li class="new-category2-li"> <a class="new-category2-a" href="1782-1788-000.html"> <span class="new-bar"></span>呼吸系统 </a> <a class="new-category2-a" href="1782-1790-000.html"> <span class="new-bar"></span>筋骨疼痛 </a> <a class="new-category2-a" href="1782-1809-000.html"> <span class="new-bar"></span>心脑血管 </a> </li> <li class="new-category2-li"> <a class="new-category2-a" href="1782-2137-000.html"> <span class="new-bar"></span>男科用药 </a> <a class="new-category2-a" href="1782-1794-000.html">