current position:Home>HTML final assignment - imitation mall personal Center website template (HTML + CSS + JavaScript)

HTML final assignment - imitation mall personal Center website template (HTML + CSS + JavaScript)

2021-08-22 22:54:41 @. code out the future

HTML Final assignment - Imitation mall personal Center website template (HTML+CSS+JavaScript)

Mall personal Center website template , A complete set of templates , Including registration 、 Sign in 、 Personal center home page 、 Real name authentication 、 The shopping cart 、 My growth value 、 Complaints 、 Self operated shops 、 My shopping voucher 、 Store collection 、 Security settings and other website template pages .

Effect demonstration

 Insert picture description here
 Insert picture description here
 Insert picture description here

 Insert picture description here

Code implementation

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/amazeui.min.css" />
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/amazeui.min.js"></script>
		<link rel="stylesheet" href="css/login.css" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script type="text/javascript" src="js/login.js" ></script>
		<title></title>
		<style> .bottomLine{
      border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top:8px; /*padding-bottom:10px;*/ } .bot{
      /*margin-top: 5px;*/ margin-bottom: 49px; /*text-align: center;*/ color: #7b6f5b; } </style>
	</head>
     
	<body>
	
		<div class="am-g" style="margin-top:30px;">
			<div style="width: 1200px;margin: 0 auto;">
			<div class="logo" >
				<img src="img/logo.png" />
			</div>
			<div style="float: right;margin-right: 60px;margin-top: 18px;">
				<span style="float: right;font-size: 12px;margin-left: 5px;color: #7d7d7d;"><span style="background-image: url(img/massageicon.png);width: 20px;height: 20px;margin-top:4px;float: left;background-repeat: no-repeat;margin-right: 8px;"></span> Suggestions for landing pages </span>
			</div>
			</div>
		</div>
		<div class="am-g content" style="margin-top: 43px;">
			<div style="width:1200px;margin:0 auto;position: relative;z-index: 999;">
				<div class="loginDiv " style="display: block;" id="login" >
						<div class="am-u-sm-12" style="padding-right: 0rem">
						<img src="img/erweima.png" style="float: right;height: 58px;" id="loginimg"/ >						
						</div>
					<div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;">
					<h4 style="font-weight: normal;"> Welcome to login </h4>
				 	<span class="left1"></span>	<input type="text" class="am-form-field" placeholder=" mailbox / cell-phone number / user name " style="padding-left: 50px;margin-top: 48px;font-size: 12px;"/>
				 </div>	
				 
				 <div class="am-u-sm-12" style="margin-top: 21px;padding-left: 30px;padding-right: 30px;">
				  <span class="left2"></span>	  <input type="password" class="am-form-field"  placeholder=" Please input a password "style="padding-left: 50px;font-size: 12px;"/>
				 </div>	
				 <div class="am-u-sm-12" style="margin-top: 12px;padding-left: 30px;padding-right: 30px;font-size: 12px;color: #757575;">
				    <input type="checkbox" style="margin-top:1px;vertical-align:middle;"/><span style="margin-bottom:-1px;margin-left: 10px;font-size: 12px;vertical-align: middle;"> automatic logon </span>
				 </div>	
				
				<div class="am-u-sm-12" style="margin-top: 45px;padding-left: 30px;padding-right: 30px;">
				<button type="button" class="am-btn am-btn-warning" style="width: 100%;border-radius: 5px;font-size: 16px;" > Sign in </button>	
				</div>
				<div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;">
					<p style="width: 100%;margin-top: 15px;font-size: 12px;color: #333333;"> Forget the login password  <span style="float: right;"> Free registration </span></p>
				</div>
				
				</div>
				<!-- Scan code page -->
				<div class="loginDiv" style="display: none;" id="erm" >
						<div class="am-u-sm-12" style="padding-right: 0rem">
						<img src="img/pc_2.png" style="float: right;" id="ermimg" />						
						</div>
					<div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;margin-top: 30px;text-align: center;">
					<h4 > Scan the mobile phone , Secure login </h4>
				</div>	
				 <div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;margin-top: 50px;text-align: center;">
				 <img src="img/aerweima.png" />
				 </div>	
				 
				 <div class="am-u-sm-12" style="margin-top: 50px;padding-left: 30px;padding-right: 30px;text-align: center;">
				  <p style="font-size: 14px;"> Please use the buyer's Web client to scan QR code to log in </p>
				    <p style="text-align: center;"><span style="background-image: url(img/Download-512.png);float: left;width: 20px;height: 20px;margin-top:5px;background-repeat: no-repeat;margin-left: 100px;"></span>
				<a style="float: left;font-size: 12px;">  Download and buy the client </a></p> 
				 </div>	
				<div class="am-u-sm-12" style="margin-top: 10px;padding-left: 30px;padding-right: 30px;margin-bottom: 100px;">
				</div>
				
				</div>
			</div>
		</div>
		<div class="am-g " style="margin-top: 81px;text-align: center;font-size: 12px;">
			<div class="bottomLine" style="margin:0 auto;width:700px;height: 35px;">
			<span style="float: left;word-spacing:0.52rem; text-align: center; width: 100%;"> About us  |  Contact us  |  Businesses enter  |  link  |  Site map  |  Mobile Mall  |  Sales alliance  |  Mall community  |  The enterprise culture  |  Help center  
			</span>
			</div>
	    </div>	
	    <div class="am-g" >
				<div class="bot ">
					<div style="margin:0 auto;width:700px;height: 30px;">
				<p style="font-size: 12px;float: left; line-height: 10px;"> &nbsp;2005-2016  Buy a net   copyright  , And all rights reserved   <span style="margin-left: 30px;"> Yes  Tel :4008125181 </span><span style="margin-left: 20px;">E-mai:[email protected]</span>  </p>
					</div>
					</div>
		</div>
		
	</body>

</html>


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

front end Zero basic 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


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

more HTML Final student assignment article

1.HTML The students finish their homework at the end of the term ~html+css+javascript Imitation Dingdang movie online website ( The function is all ready )

2.HTML Final student homework ~html+css+javascript Cat's eye movie online website ( The function is all ready )

3.HTML Final student homework (9 set )html+css+javascript Imitation of Jingdong 、 Tmall 、 clothing 、 Major e-commerce templates ( University graduation project )

HTML Final assignment ( download )

1.web Big homework for the last class at the front end ~html Student information management system template

2.web Big homework for the last class at the front end ~HTML School background user login interface template

3.web Big homework for the last class at the front end ,~ Millet official website vertical classification navigation menu

4.web Big homework for the last class at the front end ~HTML5 College Students' online check-in system response template

5.web Big homework for the last class at the front end ~ Self taught University official website HTML Templates

6.web Big homework for the last class at the front end ~ Xiaomi mall official website home page template

7.web Big homework for the last class at the front end - green IT Technology online education responsive template

8.web Big homework for the last class at the front end ~HTML Website template of education and training institutions

9.web Front end final homework html+css+javascript University Experimental Teaching Demonstration Center HTML Website template

10.web Big homework for the last class at the front end ~HTML5 Website template of responsive children's dance training school

11.web Big homework for the last class at the front end ~ Red education and training studio HTML Website template

[12.HTML Final assignment - Green fruit and vegetable mall shopping network template (HTML+CSS+JavaScript)] (https://blog.csdn.net/ruan365392777/article/details/118080654)

More 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/20210822225439778w.html

Random recommended