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
- web front end html+css+js Imitate Jingdong Mall / Tmall / The e-commerce platform has complete functions ( University graduation design thesis )
- Preface
- One 、 The whole station of imitation clothing mall html Front end template ( The function is all ready )
- Two 、 Imitation clothing mall B2C Website HTML Templates ( The function is all ready )
- 3、 ... and 、 Imitation Mall HTML Templates ( The function is all ready )
- Four 、 Imitation Jingdong effect demonstration ( Single page )
- 6、 ... and 、 Source code display
- 7、 ... and 、 Good web effect , How to send links to others ?
- 8、 ... and 、 front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )
- Nine 、* The source code for
- Ten 、* More confession source code
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 .
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
3. File directory ( common 249 File )
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
3. File directory ( common 108 File )
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
File directory ( common 363 File )
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 ..
 # 5、 ... and 、 Imitation Su Su supermarket ( Single page ) 
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
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 )~
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 ~
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 !
Ten 、* More confession source code
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
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich