HTML5响应式手机模板:电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板 手机网站模板 企业手机网站模板

手机网站模板 手机模板 响应式手机网站 html5手机网站模板 企业手机网站模板 公司手机网站模板

作品介绍


1.网页作品简介方面 :原始HTML+CSS+JS页面设计,HTML5响应式手机模板,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

2.网页作品编辑方面:此作品为html5响应式手机模板, html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)




文章目录


HTML5响应式手机模板:电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript..._html

二、代码目录


HTML5响应式手机模板:电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript..._js_02

三、代码实现


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/amazeui.min.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<header data-am-widget="header" class="am-header tb-header">
<div class="am-header-left am-header-nav">
<a href="#left-link" class=""><img src="images/logo.png" /> </a>
</div>
<a class="header-serach">
<input type="text" placeholder="寻找宝贝店铺"/>
<i class="am-icon-search"></i>
</a>
</header>
<div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0">
<ul class="am-slides">
<li><img src="images/banner.jpg" /></li>
<li><img src="images/banner1.jpg" /></li>
<li><img src="images/banner2.jpg" /></li>
</ul>
</div>
<div class="tb-nav">
<ul>
<li class="am-gallery-item">
<a href="">
<img src="images/tm.png" />
<p>天猫</p>
</a>
</li>
<li class="am-gallery-item">
<a href="">
<img src="images/jhs.png" />
<p>聚划算</p>
</a>
</li>
<li class="am-gallery-item">
<a href="">
<img src="images/dj.png" />
<p>到家</p>
</a>
</li>
<li class="am-gallery-item">
<a href="">
<img src="images/wm.png" />
<p>外卖</p>
</a>
</li>
<li class="am-gallery-item">
<a href="">
<img src="images/cz.png" />
<p>充值</p>
</a>
</li>
<li class="am-gallery-item">
<a href="">
<img src="images/lx.png" />
<p>旅行</p>
</a>
</li>
<li class="am-gallery-item">
<a href="">
<img src="images/jb.png" />
<p>金币</p>
</a>
</li>
<li class="am-gallery-item">
<a href="">
<img src="images/fl.png" />
<p>分类</p>
</a>
</li>
</ul>
</div>
<div class="tb-list">
<span><img src="images/tt.png" width="90%"></span>
<div id="divgundong">
<p><a href="">别那么早告别夏装,秋天的大部队还在路上!</a></p>
<p><a href="">胸小的女生比大胸妹更适合衬衫!</a></p>
<p><a href="">魅力帆布鞋,畅快的步伐,带你走过每个角落</a></p>
</div>
</div>
<h2 class="title">主题街</h2>
<ul data-am-widget="gallery" class="am-gallery am-avg-sm-4 am-avg-md-4 am-avg-lg-4 am-gallery-default zhuti" >
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/2.jpg" alt=""/>
</a>
</div>
</li>
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/3.jpg" alt=""/>
</a>
</div>
</li>
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/4.jpg" alt=""/>
</a>
</div>
</li>
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/5.jpg" alt=""/>
</a>
</div>
</li>
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/6.jpg" alt=""/>
</a>
</div>
</li>
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/7.jpg" alt=""/>
</a>
</div>
</li>
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/9.jpg" alt=""/>
</a>
</div>
</li>
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/10.jpg" alt=""/>
</a>
</div>
</li>

</ul>
<figure data-am-widget="figure" class="am am-figure am-figure-default " data-am-figure="{ pureview: 'true' }">
<img src="images/11.jpg" alt="开学季节"/>
</figure>
<h2 class="title">品牌推荐</h2>
<ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 am-avg-md-4 am-avg-lg-4 am-gallery-default" >
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/15.jpg" alt=""/>
</a>
</div>
</li>
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/14.jpg" alt=""/>
</a>
</div>
</li>
<li>
<div class="am-gallery-item">
<a href="" class="">
<img src="images/15.jpg" alt=""/>
</a>
</div>
</li>

</ul>
<figure data-am-widget="figure" class="am am-figure am-figure-default " data-am-figure="{ pureview: 'true' }">
<img src="images/16.jpg" alt="开学季节"/>
</figure>
<h3 class="text"><img src="images/tit.png"/></h3>
<ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-default product" data-am-gallery="{ pureview: true }" >
<li style="padding: 4px;">
<div class="am-gallery-item">
<a href="" class="">
<img src="images/t1.jpg" alt=""/>
<h3 class="am-gallery-title">极米 (XGIMI) H1 智能 家用 投影机(3D 高清 无屏电视 京东微联APP控制)</h3>
<div class="am-gallery-desc">¥4899.00</div>
</a>
</div>
</li>
<li style="padding: 4px;">
<div class="am-gallery-item">
<a href="" class="">
<img src="images/t2.jpg" alt=""/>
<h3 class="am-gallery-title">金正(NINTAUS)养生壶 煎药壶 中药壶 高硼硅玻璃电热水壶304不锈钢发热盘 1818E</h3>
<div class="am-gallery-desc">¥169.00</div>
</a>
</div>
</li>
<li style="padding: 4px;">
<div class="am-gallery-item">
<a href="" class="">
<img src="images/t3.jpg" alt=""/>
<h3 class="am-gallery-title">【新品】拉卡拉双卡号手环 iPhone秒变双卡双待 出国随意接打无漫游 双享号苹果皮 双卡号-灰色</h3>
<div class="am-gallery-desc">¥399.00</div>
</a>
</div>
</li>
<li style="padding: 4px;">
<div class="am-gallery-item">
<a href="" class="">
<img src="images/t4.jpg" alt=""/>
<h3 class="am-gallery-title">【京东超市】蓝月亮 深层洁净洗衣液(薰衣草)1kg/瓶 (新老包装随机发货)</h3>
<div class="am-gallery-desc">¥19.90</div>
</a>
</div>
</li>
</ul>
<div style="height: 55px;"></div>
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default sq-foot am-no-layout" id="">
<ul class="am-navbar-nav am-cf am-avg-sm-5">
<li>
<a href="index.html" class="curr">
<span class="am-icon-home"></span>
<span class="am-navbar-label">首页</span>
</a>
</li>
<li>
<a href="message.html" class="">
<span class="am-icon-comments"></span>
<span class="am-navbar-label">动态</span>
</a>
</li>
<li>
<a href="shopcart.html" class="">
<span class="am-icon-shopping-cart"></span>
<span class="am-navbar-label">购物车</span>
</a>
</li>
<li>
<a href="allorder.html" class="">
<span class="am-icon-file-text"></span>
<span class="am-navbar-label">订单</span>
</a>
</li>

<li>
<a href="member.html" class="">
<span class="am-icon-user"></span>
<span class="am-navbar-label">我的</span>
</a>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script>
var c, _ = Function;
with(o = document.getElementById("divgundong")) {
innerHTML += innerHTML;
onmouseover = _("c=1");
onmouseout = _("c=0");
}
(F = _("if(#%30||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%30?10:2400);".replace(/#/g, "o.scrollTop")))();
</script>

</body>
</html>