current position：Home>HTML final student homework (9 sets) HTML + CSS + JavaScript imitating JD, tmall, clothing and major e-commerce templates (University graduation project)

HTML final student homework (9 sets) HTML + CSS + JavaScript imitating JD, tmall, clothing and major e-commerce templates (University graduation project)

2021-08-22 22:58:03 【@. code out the future】

web front end html+css+js Imitate Jingdong Mall / Tmall / The e-commerce platform has complete functions ( University graduation design thesis )

Imitation of Jingdong / Tmall / Susu / Shoes and clothing mall / Clothing mall / Ancient costume Mall / Home page of the mall / Shopping Mall html/ Mall template / Mall shopping / Chinese e-commerce / Shopping Mall html/ The whole Mall /b2c Templates / The whole station of the mall html Web template , Suitable for women 、 men's wear 、 Children's wear 、 shoes 、 Boots 、 Download the website template of Baobao online store mall . Quite a complete Mall html Templates .
Graduation project （ The paper ）- be based on HTML5 and CSS3.0 Design and implementation of Web site

List of articles

Preface

Copy the front page of Jingdong Mall HTML+CSS+JS, This page is for learning only ,
There are mainly ： Classified navigation , Picture carousel , Jingdong seckill , Find good goods , Brand headlines , Ranking List , Coiling Center , Enjoy quality , Love life , Home appliances, mobile phones , Computer digital ,3C motion , Love eating , Mother and baby home , Layout of books, cars and other modules .
Insert picture description here

One 、 The whole station of imitation clothing mall html Front end template ( The function is all ready )

Red clothing, shoes, bags, shopping malls, the whole station html Web template , Suitable for women 、 men's wear 、 Children's wear 、 shoes 、 Boots 、 Download the website template of Baobao online store mall . Quite a complete Mall html Templates .

1. Page introduction

Fully respond to ( In multiple test equipment ) , Flat design style , Full width layout , Large top-level menu , Large vertical menu , Sticky menu , Banner slide , Brand display , Popular categories , Special product groups , service , merry-go-round … ,jQuery enhance ,HTML file ,HTML5 and CSS3 Table design , List and grid views ( product ) ,jQuery Product picture magnifying glass , Blog , Blog grid and details , Contact us , About us , Sign in , Check out , Product page :4 Styles , Category pages :4 Styles , Compatible browser :IE9 +,Firefox,Safari,Opera,Chrome,Edge , Easy to customize

2. Effect display

Insert picture description here

3. File directory （ common 249 File ）

Insert picture description here

Two 、 Imitation clothing mall B2C Website HTML Templates ( The function is all ready )

A set of simple static templates for the front end of the shopping mall , Red style clothes B2C Shopping mall website template , Universal men's and women's clothing mall template

1. Page introduction

total 15+HTML page , 2 Unique home page , Use owl-carousel slider , Store grid style , Store list style , 3 Blog page , The layout of the response , Bootstrap4 , Fully compatible with all mainstream browsers , Cross browser optimization , HTML5 and CSS3 , W3 Verification mark , Beautiful and unique design

2. Effect display

Insert picture description here

3. File directory （ common 108 File ）

Insert picture description here

3、 ... and 、 Imitation Mall HTML Templates ( The function is all ready )

Electronic clothing shopping mall HTML Website template download , There is a concise website map at the bottom of the website . A complete set of malls HTML Templates ,3 There are two different styles of mall homepage , compatible IE9 Above browser

1. Page introduction

Shopping Directory , Shopping process , Account security , Contact customer service , Member introduction , Delivery method , Delivery service query , Bring it to your door , Logistics cost standard , Method of payment , UnionPay payment , Alipay pay , Wechat payment , After-sales service , After sales policy , Price protection , Chargeback description , Cancellation of order , Contact us , Businesses enter , Marketing services , About us , Advertising services, etc

2. Effect display

Insert picture description here

File directory （ common 363 File ）

Insert picture description here

Four 、 Imitation Jingdong effect demonstration ( Single page )

Very beautiful full static page, including the home page 、 register 、 Sign in 、 The shopping cart 、 Order details 、 Product list 、 Product details , User background, etc ..

![ Insert picture description here ](https://img-blog.csdnimg.cn/20201216095827630.gif#pic_center) # 5、 ... and 、 Imitation Su Su supermarket ( Single page ) ![ Insert picture description here ](https://img-blog.csdnimg.cn/20210518145528890.gif#pic_center)

6、 ... and 、 Source code display

html part 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> E-commerce online mall </title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/jsstyle.js"></script>
</head>

<body>
    <div id="top">
        <div id="top_main">
            <ul class="topu">
                <li>
                    <div class="xing"></div>
                    <a href=""> Collect e-commerce </a> </li>
                <li class="xuan">
                    <div class="erwei"></div>
                    <a href="" class="aa"> Focus on e-commerce 
                    <div class="erweitu"></div>
                    </a> </li>
                <li>
                    <div class="didian"></div>
                    <strong style="padding-left: 20px"> Beijing </strong><a href="" style="padding-left: 0px">[ Replace ]</a> </li>
            </ul>
            <div id="hello"> <span> Hello! , Welcome to e-commerce ！ <a href="">[ land ]</a><a href="">[ Free registration ]</a> </span> </div>
            <div class="topright">
                <ul>
                    <li>
                        <div class="cun"> <a href=""> My order </a> </div>
                    </li>
                    <li>
                        <div class="cun">
                            <div class="vip"></div>
                            <a href=""> Member clubs </a> </div>
                    </li>
                    <li>
                        <div class="cun">
                            <div class="bjd"></div>
                            <a href=""> Enterprise channel </a> </div>
                    </li>
                    <li class="hidetu">
                        <div class="cun"> <a href="" class="dong"> Mobile e-commerce </a>
                            <div class="phonetu"></div>
                            <div class="downjian11"></div>
                        </div>
   
                    </li>
                    <li class="kefu">
                        <div class="cun">
                            <div class="a1">
                                <div class="kefuhide"> <span> Customer service </span>
                                    <div class="downjian1"></div>
                                    <ul>
                                        <li><a href=""> Help center </a></li>
                                        <li><a href=""> After-sales service </a></li>
                                        <li><a href=""> Online Service </a></li>
                                        <li><a href=""> Complaint Center </a></li>
                                        <li><a href=""> Customer service email </a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="wangzhan">
                        <div class="cun"> <span> Website navigation </span>
                            <div class="downjian1"></div>
                        </div>
                        <div class="wangzhanhide">
                            <div class="tese"><span> Featured Columns </span></div>
                            <div class="tesemain"> <a href=""> E-commerce communication </a> <a href=""> Campus star </a> <a href=""> Video shopping </a> <a href=""> E-commerce community </a> <a href=""> Reading online </a> <a href=""> Installation master </a> <a href=""> Online retailers E card 　</a> <a href=""> Home improvement City </a> <a href=""> Go with it 　</a> <a href=""> I like 　</a> <a href=""> Game community </a> </div>
                            <div class="tese"><span> Enterprise service </span></div>
                            <div class="tesemain1"> <a href=""> Enterprise procurement </a> <a href=""> Office through train </a> </div>
                            <div class="tese"><span> Its website </span></div>
                            <div class="tesemain2"> <a href="">English Site</a> </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="serach">
        <div class="logo"> <img src="images/logo.png" alt="" />
            <div class="dongtu"></div>
        </div>
        <div class="sou">
            <div class="sousuo">
                <input type="text" class="kuang" value=" transboundary " style="color:#999;font-size:14px" />
                <div class="souzi"><a href=""> Search for </a></div>
            </div>
            <div class="reci"> <span> Hot search :</span> <a href="" style="color:red"> Campus star </a> <a href=""> When the cinema gets home </a> <a href="">JD Heating Festival </a> <a href=""> Watch coupon </a> <a href=""> Self operated full minus </a> <a href="">N3 Rush purchase </a> <a href=""> Book exchange </a> <a href="">12.12</a> </div>
        </div>
        <div class="myjd">
            <div class="mytu"></div>
            <a href=""> My e-commerce </a>
            <div class="jiantou"></div>
            <div class="myjdhide">
                <div class="hello"> <span> Hello! , please </span> <a href=""> Sign in </a> </div>
                <div class="hey">
                    <div class="heyleft">
                        <ul>
                            <li><a href=""> Pending orders </a></li>
                            <li><a href=""> Consultation reply </a></li>
                            <li><a href=""> Cut prices </a></li>
                            <li><a href=""> Repair, return and exchange </a></li>
                            <li><a href=""> Coupon </a></li>
                        </ul>
                    </div>
                    <div class="heyright">
                        <ul>
                            <li><a href=""> My attention ></a></li>
                            <li><a href=""> My Jingdou ></a></li>
                            <li><a href=""> My finances ></a></li>
                            <li><a href=""> My note ></a></li>
                        </ul>
                    </div>
                </div>
                <div class="hidebot">
                    <div class="bottop"> <span> Recently viewed products :</span> <a href=""> View browsing history ></a> </div>
                    <div class="botdown"> <span>「 Temporarily no data 」</span> </div>
                </div>
            </div>
        </div>
        <div class="gouwuche">
            <div class="chetu"></div>
            <a href=""> Go to shopping cart for settlement </a>
            <div class="jianleft"></div>
            <div class="num">
                <div class="numright"></div>
                <div class="numzi"><span>0</span></div>
            </div>
            <div class="hideche">
                <div class="kongche"></div>
                <span> There are no goods in the shopping cart , Hurry to buy ！</span> </div>
        </div>
        <div class="jubao"></div>
    </div>


    <div id="daohang">
        <div class="dhleft">
            <a href=""> All product categories </a>
            <div class="erjimenu">
                <ul>
                    <li class="li1">
                        <div class="mulu"> <a href=""> The book </a>、 <a href=""> Audio-visual </a>、 <a href=""> Digital goods </a>
                            <div class="jian"></div>
                            <div class="bai"></div>
                    </li>
                    <li class="li3">
                        <div class="mulu"> <a href=""> mobile phone </a>、 <a href=""> Digital </a>、 <a href=""> E-commerce communication </a>
                            <div class="jian"></div>
                            <div class="bai"></div>
                        </div>
                    </div>
                    <div class="dhright">
                        <ul>
                            <li><a href="" style="background: #A40000"> home page </a></li>
                            <li><a href=""> Clothing city </a></li>
                            <li><a href=""> food </a></li>
                            <li><a href=""> Group purchase </a></li>
                            <li><a href=""> Treasure Island </a></li>
                            <li><a href=""> Flash purchase </a></li>
                            <li><a href=""> Finance </a></li>
                        </ul>
                        <div class="dhtu">
                            <ul>
                                <li class="on"><img src="images/a3.png" alt="" />
                                    <div class="zeng"><span>4.2610%</span></div>
                                </li>
                                <li><img src="images/a4.png" alt="" /></li>
                            </ul>
                        </div>
                    </div>
                        <div class="xright">
                            <h3> Self operated e-commerce covers districts and counties </h3>
                            <span> E-commerce has spread to the whole country 1864 Districts and counties provide self delivery services , Support cod 、POS Machine swipe card and after-sales door-to-door service .</span> <a href=""> Check the details ></a> </div>
                    </div>
                    <div id="down">
                        <div class="down_top"> <a href=""> About us </a> <a href=""> Contact us </a> <a href=""> Businesses enter </a> <a href=""> Marketing center </a> <a href=""> Mobile e-commerce </a> <a href=""> link </a> <a href=""> Sales alliance </a> <a href=""> E-commerce community </a> <a href=""> E-commerce public welfare </a> <a href="" style="border-right:none">English Site</a>                            </div>
                    </div>

</body>
...  The complete source code is below 
</html>

js part 

$(document).ready(function () {
    
  $("#top #top_main .topright ul li .vip").hover(
    function () {
    
      $(this).css("background-position", "0px -15px");
    },

    function () {
    
      $(this).css("background-position", "0px 0px");
    }
  );

  $("#top #top_main .topright ul li").hover(
    function () {
    
      $(this).find(".phonetu").css("background-position", "-128px -399px");
    },

    function () {
    
      $(this).find(".phonetu").css("background-position", "-128px -360px");
    }
  );

  $("#serach .sou .kuang").click(function () {
    
    $(this).val("");
  });

  setInterval(auto, 2000);

  var n = 1;

  function auto() {
    
    var newn = n % 2;

    $("#daohang .dhright .dhtu ul li")
      .eq(newn)
      .addClass("on")
      .siblings()
      .removeClass("on");

    n++;
  }

  //  Big picture: effect of rotation area 

  $(".nav li").mouseover(function () {
    
    clearInterval(time);

    index = $(this).index();

    nowzt(index);
  });

  $(".nav li").mouseout(function () {
    
    time = setInterval(lubo, 3000);
  });

  $(".pic li").mouseover(function () {
    
    clearInterval(time);

    index = $(this).index();

    nowzt(index);
  });

  $(".pic li").mouseout(function () {
    
    time = setInterval(lubo, 3000);
  });

  // Clock rotation 

  var time = setInterval(lubo, 3000);

  // Indexes 

  index = 0;

  function lubo() {
    
    // Judging index   If index It's the last , Just assign it 0

    // result  =  Conditional expression ? really : false ;

    index = index == 5 ? 0 : ++index;

    // current state 

    nowzt(index);
  }

  function nowzt(index) {
    
    // Update wheel logo class

    $(".nav li").eq(index).addClass("on").siblings().removeClass("on");

    // Rotate pictures 

    $(".pic li").eq(index).fadeIn().siblings().hide();
  }

  //  The big picture rotation area is over 

  $("#main .mainleft .liulan .liuleft").hover(
    function () {
    
      $("#main .mainleft .liulan .liuleft .lefttu").css({
    
        "background-position": "1px -6px",
        "background-image": "url(images/15.png)",
      });

      $(this).css("background", "#F3F3F3");
    },

    function () {
    
      $("#main .mainleft .liulan .liuleft .lefttu").css({
    
        "background-position": "-83px -51px",
        "background-image": "url(images/16.png)",
      });

      $(this).css("background", "white");
    }
  );
  ...  The complete source code is below

css part 

@charset "utf-8";
* {
    
margin: 0px;
padding: 0px;
text-decoration: none;
list-style: none;
font-size: 12px;
font-family: Arial;
}

/* Top area */

#top {
    
width: 100%;
height: 30px;
background: #f7f7f7;
border-bottom: 1px solid #eeeeee;
position: relative;
z-index: 100;
}

#top #top_main {
    
width: 1210px;
height: 30px;
margin: 0 auto;
/*border: 1px solid blue;*/
}

#top #top_main .topu {
    
float: left;
/*border: 1px solid blue;*/
}

#top #top_main .topu li {
    
width: 82px;
height: 30px;
display: block;
float: left;
list-style: none;
font-size: 12px;
color: #666666;
line-height: 30px;
}

#top #top_main .topu li .xing {
    
width: 13px;
height: 13px;
background: url(../images/xing.png) no-repeat;
position: absolute;
top: 8px;
}

#top #top_main .topu li .erwei {
    
width: 13px;
height: 13px;
background: url(../images/erwei.png) no-repeat;
position: absolute;
top: 9px;
}

#top #top_main .topu li .didian {
    
width: 20px;
height: 20px;
background: url(../images/didian.png) no-repeat;
position: absolute;
top: 4px;
}

#top #top_main .topu li a {
    
color: #666666;
padding-left: 16px;
text-decoration: none;
}

#top #top_main .topu li a:hover {
    
color: #e4393c;
text-decoration: underline;
}

#top #top_main .topu .erweitu {
    
width: 116px;
height: 120px;
background: url(../images/erwei.png) no-repeat 0px -40px;
border: 1px solid #ccc;
position: absolute;
top: 30px;
left: 150px;
display: none;
z-index: 22;
}

#top #top_main .topu .aa {
    
display: block;
}

/* Move the mouse in to display the QR code */

#top #top_main .topu .xuan .aa:hover .erweitu {
    
display: block;
}

...  The complete source code is below

7、 ... and 、 Good web effect , How to send links to others ?

1.1 Solve the deployment online ~> Deploy online tools ( Use for free forever )

1. You don't need to buy a server to deploy online , Your connection is accessible all over the world , Here is a necessary artifact for programmers ~
Plugins are integrated with super easy-to-use plug-ins , Download and install for free , Simple and easy to understand , It's an artifact ~ If necessary, it can be found in the article ↓ Xiagong Z Number acquisition

2. Is to do your code effect well , Deploy online , Send links to others , You can let the other party click in through your connection , You can see the effect of your web page , Both computer and mobile terminals are OK ! ( Otherwise, people will send files when they see your web page , The experience is not very good ~)

1.1 Deployment process

Insert picture description here

1.2 wow ~ Deployment success

wow ~ Deployment success ! Deploy your written page online , People all over the world can access your web page through links ( Free forever )~

Insert picture description here

8、 ... and 、 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 ~
Insert picture description here

Nine 、* 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 graduation template 、 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

Ten 、* More confession source code

100 Paragraph confession source code demonstration address

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

The sidebar is recommended

guess what you like

Random recommended