current position：Home>2021 Jingdong Mall app mobile phone template HTML + CSS + JavaScript
2021 Jingdong Mall app mobile phone template HTML + CSS + JavaScript
2021-08-22 22:58:09 【@. code out the future】
2021 Jingdong Mall APP Mobile phone template HTML+CSS+JavaScript
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 ： A red life shopping mall , Mobile Jingdong Mall web page template . contain ： Home page 、 Sign in 、 classification 、 Search for 、 The shopping cart Wait a total 5 Mobile page html download
2. Web work editing ： This work is the subject matter of students' personal home page design , 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 ）
List of articles
- 2021 Jingdong Mall APP Mobile phone template HTML+CSS+JavaScript
- Introduction to works
- One 、 Demonstration of works
- Two 、 Code directory
- 3、 ... and 、 Code implementation
- Four 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )
- 5、 ... and 、 The source code for
- 6、 ... and 、 more HTML Final homework ( Download the finished product )
One 、 Demonstration of works
Two 、 Code directory
3、 ... and 、 Code implementation
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Latest version Bootstrap The core CSS file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Bootstrap topic file （ Generally, it is not necessary to introduce ） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Development environment version , Contains helpful command-line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script type="text/javascript" src="js/vue.js"></script>-->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/commodity.css"/>
<link rel="stylesheet" type="text/css" href="css/recommend.css"/>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- Head -->
<header :style="headerSyles">
<div class="icon textcenter">
<a href="#" class="colorwhite"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
</div>
<div class="seachbox">
<div class="seachinput bgwhite" @click="seach()">
<img :src="images.jdimg"/>
<span class="fs16 colordd">|</span>
<span class="glyphicon glyphicon-search fs16 colorcc" aria-hidden="true"></span>
<span class="color8B fs14"> Huawei tablet </span>
</div>
</div>
<div class="loginbox textcenter colorwhite"> Sign in </div>
</header>
<!-- Commodity layout -->
<section>
<!-- Fixed navigation -->
<div class="fixed">
<a href=""> Open Jingdong APP</a>
</div>
<!-- Top Icon -->
<a href="#app" class="Topping" v-if="top" @click="toTop()"></a>
<!-- Shuffling figure -->
<div @touchstart="ulTouchStart($event)" @touchend="ulTouchend($event)" class="bannerbox">
<ul :class="banner.clas" :style="ulstyls">
<li class="banneritm" v-for="(itm,index) in banner.images" >
<img :src="itm"/>
</li>
</ul>
<ul class="bannerctrlall">
<li class="bannerctrl" v-for="i in banner.images.length" v-if="i>0&&i<9" :class="i==banner.ActiveIndex? 'bgone':'bgtwo' ">
</li>
</ul>
</div>
<!-- Activity page -->
<div class="top">
<div class="boxleft">
<div class="img1">
<img src="img/bg/QQ Screenshot 20201111155136.png"/>
<p style="color: white;font-size: 10px;text-align: center;"> As low as 5 fold </p>
</div>
<div class="img2">
<img src="img/bg/QQ Screenshot 20201111155343.png"/>
<p style="color: white;font-size: 10px;text-align: center;"> full 300 reduce 60</p>
</div>
</div>
<div class="boxcenter">
<div class="box1">
<img src="img/bg/QQ Screenshot 20201111155307.png"/>
</div>
<div class="box2">
<img src="img/bg/QQ Screenshot 20201111155209.png"/>
</div>
</div>
<div class="boxright">
<div class="img1">
<img src="img/bg/QQ Screenshot 20201111155157.png"/>
<p style="color: white;font-size: 10px;text-align: center;"> As low as 5 fold </p>
</div>
<div class="img2">
<img src="img/bg/QQ Screenshot 20201111155148.png"/>
<p style="color: white;font-size: 10px;text-align: center;"> full 300 reduce 60</p>
</div>
</div>
</div>
<!-- Icon activity -->
<div @touchstart="menuTouchStart($event)" @touchmove="menuMove($event)" @touchend="menuTouchEnd($event)" class="menubox">
<div :style="menu.styles" :class="{
'tran':menu.istran}">
<div class="menu1">
<div v-for="itm in menu.menu1" class="menuitm">
<img :src="itm.img" alt="">
<div>{
{itm.name}}</div>
</div>
</div>
<div class="menu2">
<div v-for="itm in menu.menu2" class="menuitm">
<img :src="itm.img" alt="">
<div>{
{itm.name}}</div>
</div>
</div>
</div>
<ul class="menuPointarr">
<li :class=" menu.activeIndex==0?'menupointFA2C19':'menupointccc' "></li>
<li :class=" menu.activeIndex==1?'menupointFA2C19' : 'menupointccc' "></li>
</ul>
</div>
<!-- Jingdong seckill -->
<div class="jdms">
<div class="mstitle">
<span class="title"> Jingdong seckill </span>
<span class="cc">10
<img src="img/seckill/QQ Screenshot 20201114152331.png" alt="">
</span>
<span class="timerbox">
<span>{
{ms.timer.h}}</span>:
<span>{
{ms.timer.m}}</span>:
<span>{
{ms.timer.s}}</span>
</span>
<a class="msa" href="">
More seconds
<span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span>
</a>
</div>
<div @touchstart="mstouchstart($event)" @touchmove="mstouchmove($event)" class="mscontent">
<ul class="msul" :style="{ width : 15.3*ms.data.length+6+'vw', marginLeft : ms.ulMarginLeft+'px' }" >
<li class="msdataitm" v-for="(itm,index) in ms.data">
<img :src="itm.img"/>
<span class="sp1">{
{itm.vipprice}}</span>
<span class="sp2">{
{itm.price}}</span>
</li>
<li class="ckqb fs13">
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
Check all
</li>
</ul>
</div>
</div>
<!-- Exclusive activities for newcomers -->
<div class="newpeople">
<div><a href=""><img src="img/section/aba2bcb4855e6e52.png!q70.jpg"/></a></div>
<div><a href=""><img src="img/section/9c53e25651659d43.png!q70.jpg"/></a></div>
</div>
<a href="" class="vip"><img src="img/section/2bf122bb2e87d6e3.png"/></a>
<div class="hall">
<div class="hall-left">
<a href=""><img src="img/section/QQ Screenshot 20201113160128.png"/></a>
</div>
<div class="hall-right">
<a href=""><img src="img/section/QQ Screenshot 20201113160154.png"/></a>
<p> Clothing man Li Jian </p>
</div>
</div>
<!-- Commodity exhibition area -->
<img class="bgimg" src="//m.360buyimg.com/mobilecms/s750x80_jfs/t1/124338/21/18183/24646/5fac0045Ed3481758/7aa12fb11ff8cb86.png!q70.jpg.dpg"/>
<div class="commodity-top">
<div class="commoditybox">
<div class="font">
<span> Relive pure beauty </span>
<p> Fashion is inheritance </p>
</div>
<div class="img">
<a href=""><img src="img/section/56caed066247ed0c.jpg!q70.jpg"/></a>
<a href=""><img src="img/section/0940bc0bd50be004.jpg!q70.jpg"/></a>
</div>
</div>
<div class="commoditybox">
<div class="font">
<span> Selfie speaker </span>
<p> Featured computer host chassis </p>
</div>
<div class="img">
<a href=""><img src="img/section/1fdd2c6077a012a5.png!q70.jpg"/></a>
<a href=""><img src="img/section/d7396bd1cae85528.jpg!q70.jpg"/></a>
</div>
</div>
</div>
<div class="commodity-bottom">
<div class="bottombox">
<div class="topbox">
<a href="">
<strong> Haidun beauty </strong>
<p class="fs13"> Skin care preferred </p>
<img src="img/section/ab85a05887986f91.jpg!q70.jpg"/>
</a>
</div>
</div>
<div class="bottombox">
<div class="topbox">
<a href="">
<strong> Light and shadow world </strong>
<p class="fs13"> CD writer </p>
<img src="img/section/842c542135cb94bb.jpg!q70.jpg"/>
</a>
</div>
</div>
<div class="bottombox">
<div class="topbox">
<a href="">
<strong> Fashion </strong>
<p class="fs13"> You are the most precious </p>
<img src="img/section/30d977ebb9ed9f13.jpg!q70.jpg"/>
</a>
</div>
</div>
<div class="bottombox">
<div class="topbox">
<a href="">
<strong> Travel Series </strong>
<p class="fs13"> Travel wear </p>
<img src="img/section/7d3b49f2c9454a0f.jpg!q70.jpg"/>
</a>
</div>
</div>
</div>
<img class="bgimg" src="img/section/ae6aec5882f8bb0c.png!q70.jpg"/>
<div class="shopping">
<div class="shoppingbox">
<a href="">
<strong class="s1"> Interest free planet </strong>
<p> Coupon free purchase </p>
<img src="img/section/5ce20cdcNd9cdd972.jpg!q70.jpg"/>
</a>
</div>
<div class="shoppingbox">
<a href="">
<strong class="s2"> Daily special </strong>
<p>9 block 9 Crazy robbery </p>
<img src="img/section/b41fe7c9ac32f16f.jpg!q70.jpg"/>
</a>
</div>
<div class="shoppingbox">
<a href="">
<strong class="s3"> Brand flash purchase </strong>
<p> Huida brand good price </p>
<img src="img/section/8997a8bf07db66b7.png!q70.jpg"/>
</a>
</div>
<div class="shoppingbox">
<a href="">
<strong class="s4"> Jingdong live </strong>
<p> Look and buy </p>
<img src="img/section/90f1c44b1b1f6e2e.png!q70.jpg"/>
</a>
</div>
<div class="shoppingbox">
<a href="">
<strong class="s5"> Ranking List </strong>
<p> Exclusive shopping guide </p>
<img src="img/section/59f14a23N0594b89c.jpg!q70.jpg"/>
</a>
</div>
<div class="shoppingbox">
<a href="">
<strong class="s6"> Pat good things </strong>
<p>iPhone 5 Fold up </p>
<img src="img/section/c56b89c0946438ef.jpg!q70.jpg"/>
</a>
</div>
<div class="shoppingbox">
<a href="">
<strong class="s7"> New product launch </strong>
<p> Jingdong little magic cube </p>
<img src="img/section/6cef94529cd1cf09.png!q70.jpg"/>
</a>
</div>
<div class="shoppingbox">
<a href="">
<strong class="s8"> Find good goods </strong>
<p> Discover quality life </p>
<img src="img/section/64e76ed6c67568bf.png!q70.jpg"/>
</a>
</div>
</div>
<!-- Recommended for you -->
<img class="bgimg" src="img/recommend/cac00c52cb0b2fa4.png" style="margin: 5vw 0vw;"/>
<div class="recommend">
<div class="recommend-text1">
<img src="img/recommend/7e66817e68df6070.jpg"/>
<span class="font1"> Cloth wardrobe 25MM Steel pipe thickening and strengthening simple wardrobe assembly double large cloth wardrobe economic type Birds talk and trees grow luxuriantly 8 layer </span>
<span class="font2">￥ 409</span>
<span class="font3"> Look similar </span>
<p class="similar-product-info"></p>
</div>
<div class="recommend-text2">
<img src="img/recommend/064d0eb2424915f0.jpg!q70.dpg.webp"/>
<span class="font1"> Shou bin Wardrobe simple storage solid wood foot cloth wardrobe large wardrobe white 0.8 rice </span>
<span class="font2">￥ 455</span>
<span class="font3"> Look similar </span>
<p class="similar-product-info"></p>
</div>
<div class="recommend-text1">
<img src="img/recommend/271e5ce0718ce9f6.jpg!q70.dpg.webp"/>
<span class="font1"> Haitian Soy sauce oyster sauce cooking wine Gold label soy sauce 500ml*2+ Jinbiao oyster sauce 530g+ Ancient cooking wine 450ml Family comfort box Koi pie gift box </span>
<span class="font2">￥ 45.9</span>
<span class="font3"> Look similar </span>
<p class="similar-product-info"></p>
</div>
<div class="recommend-text2">
<img src="img/recommend/49f7a041e3a32003.jpg!q70.dpg.webp"/>
<span class="font1"> Braun （Broad line） Fleas, mites, Ascaris lumbricoides are treated with fleas, mites and Ascaris lumbricoides both internally and externally Cat drops 0.3ml Braun L Number /3 Support installation Apply to 2.5-7.5kg cat </span>
<span class="font2">￥ 99.9</span>
<span class="font3"> Look similar </span>
<p class="similar-product-info"></p>
</div>
<div class="recommend-text1">
<img src="img/recommend/595f0382524ca89c.jpg!q70.dpg.webp"/>
<span class="font1"> Maggie （mageline） Makeup and moisturizing cream （ Suitable for dry and neutral skin ） </span>
<span class="font2">￥ 398</span>
<span class="font3"> Look similar </span>
<p class="similar-product-info"></p>
</div>
<div class="recommend-text2">
<img src="img/recommend/d50b5da22d4e873f.jpg!q70.dpg.webp"/>
<span class="font1">ZEESEA Egypt's honey powder, powder, powder, light skin. 8g Beauty, oil control, concealer, no makeup. Good night, foundation, dry powder, makeup, gloss, and shading. </span>
<span class="font2">￥ 69.9</span>
<span class="font3"> Look similar </span>
<p class="similar-product-info"></p>
</div>
</div>
<!--<p v-for="i in 30"> I am the first {
{i}} Boxes </p>-->
</section>
<!-- Bottom menu bar -->
<footer>
<ul>
<li class="textcenter"><img src="img/footer/81328b0609c60a3c.png"/></li>
<li class="textcenter" @click="classification()"><img src="img/footer/4af32f42575509d8.png"/></li>
<li class="textcenter" @click="pleasantlysurprised()"><img src="img/footer/2467c20113c50451.png"/></li>
<li class="textcenter" @click="shoppingcart()"><img src="img/footer/f2fe0a88bf344736.png"/></li>
<li class="textcenter" @click="login()"><img src="img/footer/876c40f17d91ce44.png"/></li>
</ul>
</footer>
</div>
<script type="text/javascript" src="js/index.js"></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
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 !
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 !
copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225807396Q.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