京东登录界面（不含js模块）

最新推荐文章于 2023-04-04 18:58:50 发布

螺旋式上升abc

最新推荐文章于 2023-04-04 18:58:50 发布

阅读量737

点赞数

分类专栏：前端文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_45037981/article/details/105027376

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我尽力了。。。还有很多js样式没改，有空再改了
需要图标的私我即可
在这里插入图片描述

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;
}

<!DOCTYPE html>
<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>
           	  	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           	  	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           	  	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           	  	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           	  	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           	  	<span class="forgot"><a href="#" class="forgotpwd">忘记密码</a></span>
                <button class="submitbutton">登&nbsp;&nbsp;&nbsp;录</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="#">QQ</a></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>

螺旋式上升abc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
京东登录界面（不含js模块）

我尽力了。。。还有很多js样式没改，有空再改了需要图标的私我即可html { height: 100%;}body{ background-image: url(img/背景图片.jpg); background-position: center; background-size: cover;}.head{ width: 347px; backgroun...
复制链接

扫一扫