APP
HTML5響應(yīng)式手機模板：電商網(wǎng)站設(shè)計——歪秀商城手機端開發(fā)靜態(tài)頁面HTML+CSS+JavaScript 手機模板wap 手機網(wǎng)站模板 企業(yè)手機網(wǎng)站模板
四、web前端入門到高級(視頻+源碼+資料+面試)一整套 (教程)
五、源碼獲取
手機網(wǎng)站模板 手機模板 響應(yīng)式手機網(wǎng)站 html5手機網(wǎng)站模板 企業(yè)手機網(wǎng)站模板 公司手機網(wǎng)站模板
作品介紹1.網(wǎng)頁作品簡介方面 ：此文件夾：包含首頁，搜索頁面，購物車頁面，個人中心頁面，產(chǎn)品列表頁面模板下載。
2.網(wǎng)頁作品編輯方面：此作品為html5響應(yīng)式手機模板， html+css 布局制作，作品下載后可使用任意HTML編輯軟件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有編輯器均可使用）
?
文章目錄
?
一、作品演示
<!DOCTYPE html>
<html lang="en" class="page-home">
<head>
<meta charset="utf-8">
<title>歪秀商城</title>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<meta name="imagemode" content="force">
<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">
<meta name="description" content="歪秀商城、歪1手機，歪2手機。">
<meta name="keywords" content="歪秀商城,歪秀手機,歪1手機,歪2手機,歪3手機,歪4手機">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="touch-icon.png">
<link rel="stylesheet" type="text/css" href="themes/css/base.css">
<link rel="stylesheet" type="text/css" href="themes/css/home.css">
<script type="text/javascript" src="themes/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="themes/js/banner-he.js"></script>
<script type="text/javascript" src="themes/js/banner.js"></script>
</head>
<body>
<header id="ui-header">
<div class="ui-centre">
<section id="slider">
<div class="demo-item">
<div class="demo-block">
<div class="ui-slider" style="padding-top:49.25%">
<ul class="ui-slider-content" style="width: 300%">
<li><span style="background-image:url(themes/img/banner/banner9.png)"></span></li>
<li><span style="background-image:url(themes/img/banner/banner7.jpg)"></span></li>
<li><span style="background-image:url(themes/img/banner/banner8.jpg)"></span></li>
<li><span style="background-image:url(themes/img/banner/banner9.jpg)"></span></li>
</ul>
</div>
</div>
<script class="demo-script">
$(window).scroll(function () {
if ($(window).scrollTop() > 0) {
$("#headsearch").addClass("ui-form-color-nav");
}else if($(window).scrollTop() == 0){
$("#headsearch").removeClass("ui-form-color-nav");
}
});
(function (){
var slider = new fz.Scroll('.ui-slider', {
role: 'slider',
indicator: true,
autoplay: true,
interval: 5000
});
slider.on('beforeScrollStart', function(fromIndex, toIndex) {
console.log(fromIndex,toIndex)
});
slider.on('scrollEnd', function(cruPage) {
console.log(cruPage)
});
})();
</script>
</div>
</section>
<section id="ui-form">
<div class="ui-form-color " id="headsearch">
<div class="ui-form-logo fl">
<a href="#"><span class="" data-src="" style="background-image: url(themes/icon/logo1.png); background-size: contain; opacity: 1;"></span></a>
</div>
<div class="ui-form-input fl"><input type="text" placeholder="搜索商品名稱"></div>
</div>
</section>
</div>
</header>
<section class="category ui-border-b" style="margin-top:.6rem">
<ul class="clearfix">
<li>
<a data-refresh="" data-track="Flight" data-cat="flight" href="#">
<span style="background-image: url(themes/icon/ic1.png); background-size: contain; opacity: 1;" data-src="" class=""></span>
<strong>充值</strong>
</a>
</li>
<li>
<a data-refresh="" data-track="Hotel" data-cat="hotel" href="#">
<span style="background-image: url(themes/icon/ic2.png); background-size: contain; opacity: 1;" data-src="" class=""></span>
<strong>禮券</strong>
</a>
</li>
<li>
<a data-refresh="" data-track="Vacation" data-cat="vacation" href="#">
<span style="background-image: url(themes/icon/ic3.png); background-size: contain; opacity: 1;" data-src="" class=""></span>
<strong>積分</strong>
</a>
</li>
<li>
<a data-refresh="" data-track="Destination" data-cat="Destination" href="#">
<span style="background-image: url(themes/icon/ic4.png); background-size: contain; opacity: 1;" data-src="" class=""></span>
<strong>正品</strong>
</a>
</li>
<li>
<a data-refresh="" data-track="Ticket" data-cat="ticket" href="#">
<span style="background-image: url(themes/icon/ic5.png); background-size: contain; opacity: 1;" data-src="" class=""></span>
<strong>門票</strong>
</a>
</li>
<li>
<a data-refresh="" data-track="Visa" data-cat="visa" href="#">
<span style="background-image: url(themes/icon/ic6.png); background-size: contain; opacity: 1;" data-src="" class=""></span>
<strong>全球</strong>
</a>
</li>
<li>
<a data-refresh="" data-track="Train" data-cat="train" href="#">
<span style="background-image: url(themes/icon/ic7.png); background-size: contain; opacity: 1;" data-src="" class=""></span>
<strong>高鐵</strong>
</a>
</li>
<li>
<a data-refresh="" data-track="Member" data-cat="member" href="#">
<span style="background-image: url(themes/icon/ic9.png); background-size: contain; opacity: 1;" data-src="" class=""></span>
<strong>郵件</strong>
</a>
</li>
</ul>
</section>
<div class="divider ui-border-b"></div>
<section id="c" class="ui-header-cr ui-border-b">
<header class="ui-header-ti">
<h2>精選櫥窗</h2>
<a href="#" class="more">更多 <i class="ui-icon-arrow"></i></a>
</header>
<main class="ui-main-br">
<div class="ui-img">
<a href="#"><img src="themes/img/banner/banner5.jpg" width="100%"></a>
</div>
</main>
</section>
<div class="divider ui-border-b "></div>
<section id="V" class="ui-header-cr" style="margin-bottom:0; padding-bottom:0;">
<header class="ui-header-ti">
<h2>新品上架</h2>
<a href="#" class="more"></a>
</header>
<section class="clearfix around-other">
<ul>
<li class="ui-border-b clearfix">
<a href="#">
<div class="around-other-image fl">
<div class="around-other-thumbnail" style="background-size:cover; background-image:url(themes/img/pd/pd1.jpg); opacity:1;"></div>
</div>
<div class="around-other-info ">
<h3>Apple iPhone 6s</h3>
<div><span>Apple iPhone 6s (A1700) 64G 玫瑰金色 移動聯(lián)通電信4G手機.選擇下方的移動、聯(lián)通、電信優(yōu)惠購，套餐有優(yōu)惠，還有話費返還</span> <p class="around-other-price price"><span>￥</span> <strong>4788.00</strong></p></div>
</div>
</a>
</li>
<li class="ui-border-b">
<a href="#">
<div class="around-other-image fl">
<div class="around-other-thumbnail" style="background-size:cover; background-image:url(themes/img/pd/pd2.jpg); opacity:1;"></div>
</div>
<div class="around-other-info">
<h3>蘋果(Apple) iPhone 7</h3>
<div><span>移動聯(lián)通電信4G手機 亮黑 128G 標(biāo)配 電子發(fā)票送透明后殼+鋼化膜 蘋果產(chǎn)品激活后不支持七天無理由退換貨</span> <p class="around-other-price price"><span>￥</span> <strong>6288.00</strong></p></div>
</div>
</a>
</li>
<li class="ui-border-b">
<a href="#">
<div class="around-other-image fl">
<div class="around-other-thumbnail" style="background-size:cover; background-image:url(themes/img/pd/pd3.jpg); opacity:1;"></div>
</div>
<div class="around-other-info">
<h3>蘋果(Apple) iPhone 6s</h3>
<div><span>4G手機 金色 公開版(16G ROM)標(biāo)配蘋果產(chǎn)品拆封激活后不支持七天無理由退換貨 購買蘋果6S plus</span> <p class="around-other-price price"><span>￥</span> <strong>3988.00</strong></p></div>
</div>
</a>
</li>
<li class="ui-border-b clearfix">
<a href="#">
<div class="around-other-image fl">
<div class="around-other-thumbnail" style="background-size:cover; background-image:url(themes/img/pd/pd4.jpg); opacity:1;"></div>
</div>
<div class="around-other-info ">
<h3>蘋果(Apple) iPhone 7</h3>
<div><span>移動聯(lián)通電信4G手機 玫瑰金 128G 標(biāo)配原封未激活！激活后不支持七天無理由退換！蘋果7P搶購</span> <p class="around-other-price price"><span>￥</span> <strong>5888.00</strong></p></div>
</div>
</a>
</li>
<li class="ui-border-b">
<a href="#">
<div class="around-other-image fl">
<div class="around-other-thumbnail" style="background-size:cover; background-image:url(themes/img/pd/pd5.jpg); opacity:1;"></div>
</div>
<div class="around-other-info">
<h3>魅族 魅藍(lán)U20</h3>
<div><span>32GB 全網(wǎng)通公開版 銀色 移動聯(lián)通電信4G手機 雙卡雙待雙面玻璃材質(zhì)，金屬指紋全網(wǎng)通！ 魅族新品！</span> <p class="around-other-price price"><span>￥</span> <strong>1299.00</strong></p></div>
</div>
</a>
</li>
<li class="ui-border-b">
<a href="#">
<div class="around-other-image fl">
<div class="around-other-thumbnail" style="background-size:cover; background-image:url(themes/img/pd/pd6.jpg); opacity:1;"></div>
</div>
<div class="around-other-info">
<h3>魅族 MX6 </h3>
<div><span>4GB+32GB 全網(wǎng)通公開版 香檳金 移動聯(lián)通電信4G手機 雙卡雙待</span> <p class="around-other-price price"><span>￥</span> <strong>1999.00</strong></p></div>
</div>
</a>
</li>
<li class="ui-border-b">
<a href="#">
<div class="around-other-image fl">
<div class="around-other-thumbnail" style="background-size:cover; background-image:url(themes/img/pd/pd7.jpg); opacity:1;"></div>
</div>
<div class="around-other-info">
<h3>魅族 PRO 6 </h3>
<div><span>32GB 全網(wǎng)通電信版 銀白色 移動聯(lián)通電信4G手機 雙卡雙待購機送移動電源、智能手環(huán)！數(shù)量有限！贈完即止！</span> <p class="around-other-price price"><span>￥</span> <strong>2299.00</strong></p></div>
</div>
</a>
</li>
</ul>
</section>
</section>
<div class="divider ui-border-b "></div>
<section id="Cs" class="ui-header-cr clearfix">
<header class="ui-header-ti">
<h2>促銷活動</h2>
<a class="more" href="#">更多 <i class="ui-icon-arrow"></i></a>
</header>
<section class="destination">
<ul class="clearfix">
<li>
<a href="#">
<div class="destination-image"><span class="" data-src="" style="background-image: url(themes/img/pd/a1.jpg); opacity: 1;"></span></div>
<div class="destination-title">
<h3>索尼特價專區(qū)</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="destination-image"><span class="" data-src="" style="background-image: url(themes/img/pd/a2.jpg); opacity: 1;"></span></div>
<div class="destination-title">
<h3>雙核旗艦機</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="destination-image"><span class="" data-src="" style="background-image: url(themes/img/pd/a3.jpg); opacity: 1;"></span></div>
<div class="destination-title">
<h3>螞蟻花唄免息</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="destination-image"><span class="" data-src="" style="background-image: url(themes/img/pd/a4.jpg); opacity: 1;"></span></div>
<div class="destination-title">
<h3>360旗艦機</h3>
</div>
</a>
</li>
</ul>
</section>
</section>
<div class="" style="height:3.4rem; width:100%; overflow:hidden;"></div>
<footer id="" class="ui-footer ui-border-t">
<ul class="clearfix">
<li>
<a href="index.html" class="on"><i class="ui-icon-home"></i><p>首頁</p></a>
</li>
<li>
<a href="search.html"><i class="ui-icon-search" style="font-size:42px;"></i><p>搜索</p></a>
</li>
<li>
<a href="cart.html"><i class="ui-icon-cart"></i><p>購物車</p></a>
</li>
<li>
<a href="user.html"><i class="ui-icon-personal"></i><p>我的</p></a>
</li>
</ul>
</footer>
</body>
</html>
四、web前端入門到高級(視頻+源碼+資料+面試)一整套 (教程)
web前端 零基礎(chǔ)-入門到高級 (視頻+源碼+開發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程)
適合入門到高級的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站
五、源碼獲取
? ~ 關(guān)注我，點贊博文~ 每天帶你漲知識!
?1.看到這里了就 [點贊+好評+收藏] 三連 支持下吧，你的「點贊，好評，收藏」是我創(chuàng)作的動力。
? 2.關(guān)注我 ~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！
?3.以上內(nèi)容技術(shù)相關(guān)問題可以相互學(xué)習(xí)，可關(guān)注↓公Z號 獲取更多源碼 !
?
?
本文摘自 ：https://blog.51cto.com/u
