京东登录界面(不含js模块)

我尽力了。。。还有很多js样式没改,有空再改了
需要图标的私我即可
京东登录界面(不含js模块)_第1张图片

html {
     
    height: 100%;
}
body{
     
	background-image: url(img/背景图片.jpg);
	  background-position: center;
    background-size: cover;
}
.head{
     
	width: 347px;
	background-color: rgb(255,248,240);
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 35px;
}
.warn{
     
	color:rgb(153,153,153);
	font-size: 13px;
	justify-content: center;
}
.warnimg{
     
	display:block;
	margin-top: 2px;
	float: left
}
.whole{
     
	width: 382px;
	background-color: white;
}
.registerway{
     
	background-color: white;
	height: 20px;
	display: flex;
	padding-left: 60px;
	padding-top: 20px;
	padding-bottom: 20px;

}
.register{
     
	width: 92px;
	font-size: 22px;
	font-weight: 500;
	color:rgb(102,102,102);
	text-decoration: none;
	font-weight: 800;
	
}
.register2{
     
	font-size: 22px;
	color:rgb(102,102,102);
	text-decoration: none;
	font-weight: 800;
}
.register:hover{
     
	width: 90px;
	font-size: 22px;
	color: rgb(228,57,60);
	font-weight: 800;
}
.register2:hover{
     
	color:rgb(228,57,60);
	font-weight: 800;
}
.hr{
     
	background-color: rgb(244,244,244);
	height: 1px;
	border:none
}
.out1{
     
	margin-right: 70px;
}
.section3{
     


}
.user{
     
	width: 305px;
	height:40px;
	margin-top: 35px;
	margin-left: 37px;
}
.userphoto{
     
	width:38px;
	display: block;
	float: left;
}
.userinput{
     
	height: 33px;
	width: 263px;
}
.pwdphoto{
     
	width:38px;
	display: block;
	float: left;
}
.password{
     
	width: 305px;
	height:40px;
	margin-top: 20px;
	margin-left: 37px;
	margin-bottom: 15px;
}
.pwdinput{
     
	height: 33px;
	width: 263px;
}
.forgot{
     
	font-size: 12px;
	color:rgb(102,102,102);
}
.forgot:hover{
     
	color: red;
}
.forgotpwd{
     
    color:rgb(102,102,102);
	text-decoration: none;
}
.forgotpwd:hover{
     
	color: red;
	text-decoration: underline;
}
.submitbutton{
     
	text-align: center;
	background-color: red;
	width:300px;
	height: 36px;
	color: white;
	font-size: 23px;
	margin-left: 37px;
	margin-top: 15px;
	margin-bottom: 30px;
}
.section4{
     
	width: 360px;
	height: 50px;
	background-color: rgb(252,252,252);
	padding-top: 20px;
	padding-left: 8px;
}
.QQ{
     
	width: 30px;
	display: block;
	float: left;
}
.qqspan{
     
	float: left;
	font-size: 15px;
	margin-top: 6px;
}
.qqstyle{
     
	text-decoration: none;
	color: rgb(102,102,102);
}
.qqstyle:hover{
     
	text-decoration: underline;
	color: red;
}
.QQdiv{
     
	margin-left: 10px;
	float:left
}
.WX{
     
	width: 30px;
	display: block;
    float: left;
}
.wxspan{
     
	float: left;
	font-size: 15px;
	margin-top: 8px;
}
.wxstyle{
     
	text-decoration: none;
	color: rgb(102,102,102);
}
.wxstyle:hover{
     
	text-decoration: underline;
	color: red;
}
.wxdiv{
     
	margin-right: 110px;
	margin-left: 15px;
	float: left;
}
.QUICK{
     
	width: 30px;
	display: block;
    float: left;
}
.quickspan{
     
	float: left;
	font-size: 15px;
	margin-top: 6px;
}
.quickstyle{
     
	font-size: 14px;
	text-decoration: none;
	color: rgb(182,29,29);
}
.quickstyle:hover{
     
	text-decoration: underline;
	color: red;
}
.quickdiv{
     
	margin-left: 15px;
	float: left;
}

<html>
	<head>
		<meta charset="UTF-8">
		<title>京东登录注册title>
		<link rel="stylesheet" href="register.css" />
	head>
	<body>
		<script type="text/javascript">
           function number() {
      
           	 
           }


		script>
		<div class="whole">
			<section1>
				<div class="head">
					<span class="warn">
						<image class="warnimg" src="img/warn.png">image>
						京东不会以任何理由要求您转账汇款,谨防诈骗。
					span>
				div>
		    section1>
		    <section2>
		    	<div class="registerway">
		    		<div class="out1">
		    			<a href="#"  onclick="number()" class="register">扫码登录a>
		    		div class="out2">
		    		<div class="out2">
		    			<a href="#" class="register2">账号登录a>
		    		div>
		    	div>
		       <hr class="hr" />
           section2>
           <section3>
           	  <div class="section3">
           	  	<div class="user">
           	  		<image class="userphoto" src="img/用户图标.png">image>
           	  		<input type="text" placeholder="邮箱/用户名/登录手机" class="userinput"/>
           	  	div>
           	  	<div class="password">
           	  		<image class="pwdphoto" src="img/密码图标.png">image>
           	  		<input type="password" placeholder="密码" class="pwdinput"/>
           	  	div>
           	  	              
           	  	              
           	  	              
           	  	              
           	  	            
           	  	<span class="forgot"><a href="#" class="forgotpwd">忘记密码a>span>
                <button class="submitbutton">   button>
            
                
           	  div>
           section3>
                <section4>
           	      <div class="section4">
           	        <div class="QQdiv">
           	        	<image class="QQ" src="img/QQ.png">image><div class="qqspan"><a class="qqstyle" href="#">QQa>div>
           	        div>
           	      	<div class="wxdiv">
           	      		<image class="WX" src="img/微信.png">image><div class="wxspan"><a class="wxstyle" href="#">微信a>div>
           	      	div>	
                    <div class="quick">
                    	<image class="QUICK" src="img/跳转注册.png">image><div class="quickspan"><a class="quickstyle" href="#">立即注册a>div>
                    div>
           	      
           	      div>
                section4>
          
 		    div>
		 
			
	body>
html>

你可能感兴趣的:(前端,css3,html5)