當(dāng)前位置:首頁 > IT技術(shù) > 移動(dòng)平臺(tái) > 正文

HTML5響應(yīng)式手機(jī)模板:電商網(wǎng)站設(shè)計(jì)——歪秀商城手機(jī)端開發(fā)靜態(tài)頁面HTML+CSS+JavaScript 手機(jī)模板wap 手機(jī)網(wǎng)站模板 企業(yè)手機(jī)網(wǎng)站模板
2021-08-09 15:20:55

HTML5響應(yīng)式手機(jī)模板:電商網(wǎng)站設(shè)計(jì)——歪秀商城手機(jī)端開發(fā)靜態(tài)頁面HTML+CSS+JavaScript 手機(jī)模板wap 手機(jī)網(wǎng)站模板 企業(yè)手機(jī)網(wǎng)站模板

手機(jī)網(wǎng)站模板 手機(jī)模板 響應(yīng)式手機(jī)網(wǎng)站 html5手機(jī)網(wǎng)站模板 企業(yè)手機(jī)網(wǎng)站模板 公司手機(jī)網(wǎng)站模板

作品介紹

1.網(wǎng)頁作品簡介方面 :此文件夾:包含首頁,搜索頁面,購物車頁面,個(gè)人中心頁面,產(chǎn)品列表頁面模板下載。

2.網(wǎng)頁作品編輯方面:此作品為html5響應(yīng)式手機(jī)模板, html+css 布局制作,作品下載后可使用任意HTML編輯軟件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有編輯器均可使用)

?

?

一、作品演示

HTML5響應(yīng)式手機(jī)模板:電商網(wǎng)站設(shè)計(jì)——歪秀商城手機(jī)端開發(fā)靜態(tài)頁面HTML+CSS+JavaScript 手機(jī)模板wap 手機(jī)網(wǎng)站模板 企業(yè)手機(jī)網(wǎng)站模板_電商網(wǎng)頁HTML

二、代碼目錄

HTML5響應(yīng)式手機(jī)模板:電商網(wǎng)站設(shè)計(jì)——歪秀商城手機(jī)端開發(fā)靜態(tài)頁面HTML+CSS+JavaScript 手機(jī)模板wap 手機(jī)網(wǎng)站模板 企業(yè)手機(jī)網(wǎng)站模板_html5手機(jī)網(wǎng)站模板_02

三、代碼實(shí)現(xiàn)
<!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手機(jī),歪2手機(jī)。">
    <meta name="keywords" content="歪秀商城,歪秀手機(jī),歪1手機(jī),歪2手機(jī),歪3手機(jī),歪4手機(jī)">
    <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">更多&nbsp;&nbsp;&nbsp;<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 玫瑰金色 移動(dòng)聯(lián)通電信4G手機(jī).選擇下方的移動(dòng)、聯(lián)通、電信優(yōu)惠購,套餐有優(yōu)惠,還有話費(fèi)返還</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>移動(dòng)聯(lián)通電信4G手機(jī) 亮黑 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手機(jī) 金色 公開版(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>移動(dòng)聯(lián)通電信4G手機(jī) 玫瑰金 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)通公開版 銀色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待雙面玻璃材質(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)通公開版 香檳金 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待</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)通電信版 銀白色 移動(dòng)聯(lián)通電信4G手機(jī) 雙卡雙待購機(jī)送移動(dòng)電源、智能手環(huán)!數(shù)量有限!贈(zèng)完即止!</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>促銷活動(dòng)</h2>
        <a class="more" href="#">更多&nbsp;&nbsp;&nbsp;<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>索尼特價(jià)專區(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>雙核旗艦機(jī)</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旗艦機(jī)</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前端入門到高級(jí)(視頻+源碼+資料+面試)一整套 (教程)

web前端 零基礎(chǔ)-入門到高級(jí) (視頻+源碼+開發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程)
適合入門到高級(jí)的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站
HTML5響應(yīng)式手機(jī)模板:電商網(wǎng)站設(shè)計(jì)——歪秀商城手機(jī)端開發(fā)靜態(tài)頁面HTML+CSS+JavaScript 手機(jī)模板wap 手機(jī)網(wǎng)站模板 企業(yè)手機(jī)網(wǎng)站模板_響應(yīng)式手機(jī)網(wǎng)站_03


五、源碼獲取

? ~ 關(guān)注我,點(diǎn)贊博文~ 每天帶你漲知識(shí)!

?1.看到這里了就 [點(diǎn)贊+好評(píng)+收藏] 三連 支持下吧,你的「點(diǎn)贊,好評(píng),收藏」是我創(chuàng)作的動(dòng)力。

? 2.關(guān)注我 ~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者,一起探討 前端 Node 知識(shí),互相學(xué)習(xí)」!

?3.以上內(nèi)容技術(shù)相關(guān)問題可以相互學(xué)習(xí),可關(guān)注↓公Z號(hào) 獲取更多源碼 !

HTML5響應(yīng)式手機(jī)模板:電商網(wǎng)站設(shè)計(jì)——歪秀商城手機(jī)端開發(fā)靜態(tài)頁面HTML+CSS+JavaScript 手機(jī)模板wap 手機(jī)網(wǎng)站模板 企業(yè)手機(jī)網(wǎng)站模板_企業(yè)手機(jī)網(wǎng)站模板_04

?

?

本文摘自 :https://blog.51cto.com/u

開通會(huì)員,享受整站包年服務(wù)立即開通 >