灰色寬屏風格的防錘子手機整站網站源碼下載



13 51 18



模板描述:灰色寬屏風格 防錘子手機 整站網站,灰色寬屏風格的防錘子手機整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/public.css" rel="stylesheet"/>
<link href="css/cz.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/swiper.min.css">

2. 引入JS

<script src="js/swiper.min.js"></script>
<script src="js/index.js"></script>

3. HTML代碼

<!--網頁開頭-->
    <div id="cz_page">
        <!--頂部-->
        <div class="cz_top">
            <h1><a href="cz.html"><img src="img/top/logo.png" alt=""></a></h1>
            <div class="top_list">
                <ul>
                    <li><a href="">在線商城</a></li>
                    <li><a href="">堅果Pro 2S</a></li>
                    <li><a href="">堅果R1</a></li>
                    <li><a href=""> 堅果TNT工作站</a></li>
                    <li><a href="">Smartisan OS</a></li>
                    <li><a href="">歡喜云</a></li>
                    <li><a href="">論壇</a></li>
                    <li><a href="">榮譽與獎項</a></li>
                </ul>
            </div>
            <div class="top_sign">
                <p><i class="iconfont icon-denglu"></i></p>
                <p><i class="iconfont icon-gouwuche"></i></p>
            </div>
        </div>
        <div class="cz_head_nav">
            <div class="h-list">
                <ul>
                    <li class="f-bold"><a class="c-black" href="">首頁</a></li>
                    <li><a href="">手機</a></li>
                    <li><a href="">"足跡"系列</a></li>
                    <li><a href="">官方配件</a></li>
                    <li><a href="">暢呼吸</a></li>
                    <li><a href="">品牌周邊</a></li>
                    <li><a href="">只能音箱</a></li>
                    <li><a href="">服務</a></li>
                    <li><a href="">企業團購</a></li>
                </ul>
            </div>
            <div class="h-sear" id="cz-search">
                <input type="text" id="h-inp">
                <i class="iconfont icon-xiazai17"></i>
                <p id="h-inp-txt">堅果Pro 2S領劵最高減300元</p>
            </div>
        </div>
        <!--網頁主體-->
        <div class="cz_body">
            <!--輪播圖banner部分-->
            <section class="cz_banner">
                <div class="swiper-container main-swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><a href=""><img src="img/banner/a.jpg" alt=""></a></div>
                        <div class="swiper-slide"><a href=""><img src="img/banner/b.jpg" alt=""></a></div>
                    </div>
                    <!-- 如果需要分頁器 -->
                    <div class="swiper-pagination main-swiper-pagination"></div>
                </div>
            </section>
            <!--introduce-->
            <section class="cz_intro">
                <div class="cz_phone">
                    <ul>
                        <li><img src="./img/phone/a.jpg" alt=""><a href=""></a></li>
                        <li><img src="./img/phone/b.jpg" alt=""><a href=""></a></li>
                        <li><img src="./img/phone/c.jpg" alt=""><a href=""></a></li>
                        <li><img src="./img/phone/d.jpg" alt=""><a href=""></a></li>
                    </ul>
                </div>
            </section>
            <!--熱門商品部分-->
            <section class="cz_hotGoods">
                <div class="g-goods">
                    <div class="g-top">
                        <h2>熱門商品</h2>
                        <p>
                            <i class="iconfont icon-icon--"></i>
                            <i class="iconfont icon-icon--1"></i>
                        </p>
                    </div>
                    <div class="g-list">
                        <ul>
                            <li>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="./img/hotGoods/b.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="./img/hotGoods/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="./img/hotGoods/c.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="./img/hotGoods/d.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/a.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/c.jpg" alt=""></a></div>
                                          </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">次世代旗艦手機  內藏來自未來的"電腦"</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/e.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/f.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能落地式加濕器</a></p>
                                        <p><a href="">健康無霧、高效加濕、超低噪音</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <!--堅果及其配件-->
            <section class="cz_parts b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2>堅果及其配件</h2>
                    </div>
                    <table>
                        <tr>
                            <td colspan="2">
                                <div class="p-pic">
                                    <img src="img/phoneParts/a.jpg" alt="brand">
                                    <a href="" class="a-shadow"></a>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/b.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/c.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/d.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/c.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/hotGoods/c.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//phoneParts/d.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//phoneParts/e.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//phoneParts/f.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//phoneParts/g.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </section>
            <!--官方精選配件部分-->
            <section class="cz_parts b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2>官方精選配件</h2>
                        <p>
                            <a href="">官方精選配件</a>
                            <span>·</span>
                            <a href="">更多推薦 ></a>
                        </p>
                    </div>
                    <table>
                        <tr>
                            <td colspan="2">
                                <div class="p-pic">
                                    <img src="img/officialParts/a.jpg" alt="brand">
                                    <a href="" class="a-shadow"></a>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/officialParts/b.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/officialParts/d.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/officialParts/c.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//officialParts/d.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//officialParts/e.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//officialParts/f.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//officialParts/g.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </section>
            <!--凈化器及配件-->
            <section class="cz_clean b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2>凈化器及配件</h2>
                    </div>
                    <table>
                        <tr>
                            <td colspan="2">
                                <div class="p-pic">
                                    <img src="img/cleanParts/a.jpg" alt="brand">
                                    <a href="" class="a-shadow"></a>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/cleanParts/d.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/cleanParts/c.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/cleanParts/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/cleanParts/c.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//cleanParts/d.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//cleanParts/e.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//cleanParts/f.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img//cleanParts/g.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </section>
            <!--品牌周邊-->
            <section class="cz_choice  b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2>品牌周邊</h2>
                    </div>
                    <table>
                        <tr>
                            <td colspan="2">
                                <div class="p-pic">
                                    <img src="img/brandNear/a.jpg" alt="brand">
                                    <a href="" class="a-shadow"></a>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/c.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/b.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/a.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/b.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/d.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/c.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/c.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/g.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/d.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/d.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/e.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/a.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/f.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/f.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/c.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/b.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/f.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/c.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/g.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/g.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/b.jpg" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandNear/e.jpg" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </section>
            <!--品牌精選-->
            <section class="cz_brand b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2>品牌精選</h2>
                        <p>
                            <a href="">智能周邊</a>
                            <span>·</span>
                            <a href="">品質生活</a>
                        </p>
                    </div>
                    <table>
                        <tr>
                            <td colspan="2">
                                <div class="p-pic">
                                    <img src="img/brandChoice/a.jpg" alt="brand">
                                    <a href="" class="a-shadow"></a>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandChoice/b.webp" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandChoice/c.webp" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandChoice/e.webp" alt=""></a></div>
                                            <div class="swiper-slide"><a href=""><img src="img/brandChoice/f.webp" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">堅果Pro 2S</a></p>
                                        <p><a href="">雙系統  無限屏</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail">查看詳情</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandChoice/d.webp" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandChoice/e.webp" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandChoice/f.webp" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="goodscon">
                                    <div class="swiper-container hotGoods-swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide"><a href=""><img src="img/brandChoice/g.webp" alt=""></a></div>
                                        </div>
                                        <!--分頁器 -->
                                        <div class="swiper-pagination  hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href="">暢呼吸智能空氣凈化器 · 標準版</a></p>
                                        <p><a href="">超強凈化能力、超低噪音、超長壽命</a></p>
                                    </div>
                                    <p class="goods-price">¥<span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail">查看詳情</a>
                                        <a href="#" class="sell-out">已售罄</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </section>
            <!--introduce2-->
            <section class="cz_intro2 b-r m-top-25">
                <div class="cz_phone">
                    <ul>
                        <li><img src="img/intro2/a.jpg" alt=""><a href=""></a></li>
                        <li><img src="img/intro2/b.jpg" alt=""><a href=""></a></li>
                        <li><img src="img/intro2/c.jpg" alt=""><a href=""></a></li>
                        <li><img src="img/intro2/d.jpg" alt=""><a href=""></a></li>
                    </ul>
                </div>
            </section>
            <!--論壇精選-->
            <section class="cz_forum_choice b-r m-top-25">
                <div class="g-top">
                    <h2>論壇精選</h2>
                    <p>前往論壇 <span>></span></p>
                </div>
                <div class="form_intro">
                    <ul>
                        <li>
                            <div><img src="img/forumChoice/a.jpg" alt=""></div>
                            <p>[開箱] 堅果 Pro 2S 內斂騷藍驚艷炫光</p>
                            <p>內斂騷藍,驚艷炫光</p>
                            <p>閱讀全文 ></p>
                            <a href="" class="whole-link"></a>
                        </li>
                        <li>
                            <div><img src="img/forumChoice/b.jpg" alt=""></div>
                            <p>[開箱] 堅果 Pro 2S</p>
                            <p>全新的炫光藍急炫光紅色相當驚艷</p>
                            <p>閱讀全文 ></p>
                            <a href="" class="whole-link"></a>
                        </li>
                        <li>
                            <div><img src="img/forumChoice/c.jpg" alt=""></div>
                            <p>[開箱] 純白色堅果Pro2圖賞</p>
                            <p>優美如斯,冰清玉潔</p>
                            <p>閱讀全文 ></p>
                            <a href="" class="whole-link"></a>
                        </li>
                        <li>
                            <div><img src="img/forumChoice/d.jpg" alt=""></div>
                            <p>[合輯] 八月優秀攝影作品</p>
                            <p>8月的優秀作品如期而至</p>
                            <p>閱讀全文 ></p>
                            <a href="" class="whole-link"></a>
                        </li>
                    </ul>
                </div>
            </section>
        <!--網頁身體結束-->
        </div>
<!--網頁結束-->
    </div>
<script>
    //banner----swiper初始化
    var mySwiper = new Swiper ('.main-swiper-container', {
        autoplay:true,
        speed:3000,
        loop: true,
        effect : 'fade',
        fadeEffect: {
            crossFade: true,
        },
        //分頁器
        pagination: {
            el: '.main-swiper-pagination',
            clickable:true,
        },
    });
    //熱門商品部分
    var hotGoodsSwiper=new Swiper ('.hotGoods-swiper-container', {
        autoplay:false,
        effect : 'fade',
        fadeEffect: {
            crossFade: true,
        },
        //分頁器
        pagination: {
            el: '.hotGoods-swiper-pagination',
            clickable:true,
        },
    });
    //搜索框效果
    var oInp=document.getElementById("h-inp"),
        oPTxt=document.getElementById("h-inp-txt"),
        oSearCont=document.getElementById("cz-search");//搜索框部分
    oInp.onfocus=function(){    //獲得焦點
        oPTxt.style.display="none";
    }
    oInp.onblur=function(){ //失去焦點
        oPTxt.style.display="block";
    }
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 pc 電腦 電商 網店 商城 普通自適應 html+css自適應 html+css響應式 灰色 簡潔 簡約 簡單 寬屏 全屏 滿屏 電器 數碼電器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 老快3走势图 多乐开奖结果查询 美容院这样开才赚钱 下载 竞足混合投注什么意思 安徽扑克麻将官方网站 贵阳一元捉鸡麻将群 想赚钱可又没地方去 免税店如何赚钱 秦时明月 如何赚钱 双色球机选号码 孙尚香末日机甲赚钱 排列三在线计划 888集团am登录口新网止 大富豪棋牌游戏安卓 老快3网址 自己开环评公司赚钱吗6