current position:Home>HTML5 final assignment: Mall website design - hammer proof mobile mall official website home page template (HTML + CSS + JavaScript) e-commerce web page HTML code

HTML5 final assignment: Mall website design - hammer proof mobile mall official website home page template (HTML + CSS + JavaScript) e-commerce web page HTML code

2021-08-22 22:58:13 @. code out the future

HTML5 Final homework : Mall website design —— Anti hammer mobile phone mall official website home page template HTML+CSS+JavaScript E-commerce website HTML Code Student web course design final assignment download The website of the mall is designed and made by college students

Towards the end of the term , You're still working on HTML Web design homework , The teacher's homework requirements are big ?HTML There is no way to start web homework ? The total number of pages required is too much ? No suitable template ? And so on and so forth . The problem you want to solve , In this blog post, you can basically meet your needs ~

original HTML+CSS+JS Page design , web College students web design homework source code , This is a good web page making , Smart picture , Very suitable for beginners to learn to use .

Introduction to works

1. Introduction to web works : Black mobile mall official website home page static template . millet , Homepage template of Huawei and other mobile digital product websites .ps: Single homepage Mall .

2. Web work editing : The code is simple student level html+css Layout making , After downloading the works, you can use any HTML Edit software ( for example :DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm All editors are available )

3. The layout of web works : The overall layout of the web page is LOGO、 Navigation 、 Main content layout . There are many layouts of sub pages , Interest content uses picture list layout , The score page inserts a table , Contact us to set the left alignment using the image alignment .

4. Technical aspects of web works : Use CSS Made a background picture of the web page 、 Color change effect of mouse passing and selected navigation 、 Underline, etc . The home page has made a message form , At the same time, it is easy to use JavaScript Made a form to judge ( The form cannot be empty when submitting )

One 、 Demonstration of works

 Insert picture description here

Two 、 Code directory

 Insert picture description here

3、 ... and 、 Code implementation

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title> Hammer official website template </title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!-- Introduce web page style -->
    <link href="css/public.css" rel="stylesheet"/>
    <link href="css/cz.css" rel="stylesheet"/>
    <!-- introduce iconfont-->
    <link rel="stylesheet" href="css/iconfont.css">
    <!-- introduce swiper-->
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>



    <!-- Introduce your own js-->
    <script src="js/index.js"></script>
</head>
<body>
<!-- The beginning of the page -->
    <div id="cz_page">
        <!-- Top -->
        <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=""> Online mall </a></li>
                    <li><a href=""> nuts Pro 2S</a></li>
                    <li><a href=""> nuts R1</a></li>
                    <li><a href="">  nuts TNT The workstation </a></li>
                    <li><a href="">Smartisan OS</a></li>
                    <li><a href=""> Joy cloud </a></li>
                    <li><a href=""> Forum </a></li>
                    <li><a href=""> Honors and awards </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=""> home page </a></li>
                    <li><a href=""> mobile phone </a></li>
                    <li><a href="">" footprint " series </a></li>
                    <li><a href=""> Official accessories </a></li>
                    <li><a href=""> Breathe freely </a></li>
                    <li><a href=""> Brand surrounding </a></li>
                    <li><a href=""> Only speakers </a></li>
                    <li><a href=""> service </a></li>
                    <li><a href=""> Enterprise group buying </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"> nuts Pro 2S The maximum deduction for receiving securities is 300 element </p>
            </div>
        </div>
        <!-- The main body of the page -->
        <div class="cz_body">
            <!-- Shuffling figure banner part -->
            <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>
                    <!--  If you need a pager  -->
                    <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>
            <!-- Hot goods section -->
            <section class="cz_hotGoods">
                <div class="g-goods">
                    <div class="g-top">
                        <h2> Hot items </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Next generation flagship phone    Hidden from the future " The computer "</a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Smooth breathing intelligent floor humidifier </a></p>
                                        <p><a href=""> Healthy without fog 、 High efficiency humidification 、 Ultra low noise </a></p>
                                    </div>
                                    <p class="goods-price"><span>998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold out </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <!-- Nuts and accessories -->
            <section class="cz_parts b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2> Nuts and accessories </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold out </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </section>
            <!-- Official selection of accessories -->
            <section class="cz_parts b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2> Official selection of accessories </h2>
                        <p>
                            <a href=""> Official selection of accessories </a>
                            <span>·</span>
                            <a href=""> More recommendations  ></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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold out </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </section>
            <!-- Purifier and accessories -->
            <section class="cz_clean b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2> Purifier and accessories </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold out </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </section>
            <!-- Brand surrounding -->
            <section class="cz_choice b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2> Brand surrounding </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold out </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </section>
            <!-- Brand selection -->
            <section class="cz_brand b-r m-top-25">
                <div class="phone-parts">
                    <div class="g-top">
                        <h2> Brand selection </h2>
                        <p>
                            <a href=""> Smart peripheral </a>
                            <span>·</span>
                            <a href=""> Quality life </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> nuts Pro 2S</a></p>
                                        <p><a href=""> Dual system    Unlimited screen </a></p>
                                    </div>
                                    <p class="goods-price"><span>1998.00</span></p>
                                    <div class="whole-link">
                                        <a href="" class="check-detail"> Check the details </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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
                                        <!-- Pager  -->
                                        <div class="swiper-pagination hotGoods-swiper-pagination"></div>
                                    </div>
                                    <div class="goods-link">
                                        <p><a href=""> Breathing smart air purifier  ·  The standard version </a></p>
                                        <p><a href=""> Super purification ability 、 Ultra low noise 、 Long life </a></p>
                                    </div>
                                    <p class="goods-price"><span>2998.00</span></p>
                                    <div class="whole-link">
                                        <a href="#" class="check-detail"> Check the details </a>
                                        <a href="#" class="sell-out"> It's sold 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>
            <!-- Forum selection -->
            <section class="cz_forum_choice b-r m-top-25">
                <div class="g-top">
                    <h2> Forum selection </h2>
                    <p> Go to the Forum  <span>></span></p>
                </div>
                <div class="form_intro">
                    <ul>
                        <li>
                            <div><img src="img/forumChoice/a.jpg" alt=""></div>
                            <p>[ Out of the ]  nuts  Pro 2S  Introverted Sao blue, amazing and dazzling </p>
                            <p> Introverted Sao lan , Amazing and dazzling </p>
                            <p> Read the whole passage  ></p>
                            <a href="" class="whole-link"></a>
                        </li>
                        <li>
                            <div><img src="img/forumChoice/b.jpg" alt=""></div>
                            <p>[ Out of the ]  nuts  Pro 2S</p>
                            <p> The brand-new dazzling blue and dazzling red are quite amazing </p>
                            <p> Read the whole passage  ></p>
                            <a href="" class="whole-link"></a>
                        </li>
                        <li>
                            <div><img src="img/forumChoice/c.jpg" alt=""></div>
                            <p>[ Out of the ]  Pure white nuts Pro2 Picture appreciation </p>
                            <p> So beautiful , Edward Chen </p>
                            <p> Read the whole passage  ></p>
                            <a href="" class="whole-link"></a>
                        </li>
                        <li>
                            <div><img src="img/forumChoice/d.jpg" alt=""></div>
                            <p>[ A collection ]  Excellent photography in August </p>
                            <p>8 The excellent works of June arrived as scheduled </p>
                            <p> Read the whole passage  ></p>
                            <a href="" class="whole-link"></a>
                        </li>
                    </ul>
                </div>
            </section>

        <!-- Web body end -->
        </div>

<!-- End of page -->
    </div>
<script> //banner----swiper initialization  var mySwiper = new Swiper ('.main-swiper-container', {
       autoplay:true, speed:3000, loop: true, effect : 'fade', fadeEffect: {
       crossFade: true, }, // Pager  pagination: {
       el: '.main-swiper-pagination', clickable:true, }, }); // Hot goods section  var hotGoodsSwiper=new Swiper ('.hotGoods-swiper-container', {
       autoplay:false, effect : 'fade', fadeEffect: {
       crossFade: true, }, // Pager  pagination: {
       el: '.hotGoods-swiper-pagination', clickable:true, }, }); // Search box effect  var oInp=document.getElementById("h-inp"), oPTxt=document.getElementById("h-inp-txt"), oSearCont=document.getElementById("cz-search");// Search box section  oInp.onfocus=function(){
       // Focus of attention  oPTxt.style.display="none"; } oInp.onblur=function(){
       // Lose focus  oPTxt.style.display="block"; } </script>
</body>
</html>



Four 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )

web front end Zero basis - Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )
Suitable for children's shoes from entry to advanced ~ send 1000 set HTML+CSS+JavaScript Template website
 Insert picture description here


5、 ... and 、 The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

*1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduates HTML Templates 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!

*3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

 Insert picture description here

6、 ... and 、 more HTML Final homework ( Download the finished product )

>>> Poke me >>> Click to enter 200 For example, the final assignment

200 Multiple cases HTML5 Final assessment big homework source code contain personal 、 food 、 company 、 School 、 tourism 、 Online retailers 、 Pets 、 Electrical appliances 、 The tea 、 Home Furnishing 、 The hotel 、 dance 、 Comic 、 star 、 clothing 、 sports 、 cosmetics 、 logistics 、 Environmental protection 、 Books 、 Wedding dress 、 military 、 game 、 festival 、 To give up smoking 、 The movie 、 Photography 、 Culture 、 hometown 、 flower 、 gift 、 automobile 、 other It can meet the web design needs of College Students' Web homework , You can download what you like !
 Insert picture description here
 Insert picture description here

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225811514b.html

Random recommended