CSS作业练习--JD登陆框

最新推荐文章于 2022-04-09 16:06:32 发布

老王笔记

最新推荐文章于 2022-04-09 16:06:32 发布

阅读量1.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/JSWANGCHANG/article/details/100606434

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

作业，下面是京东官网登陆框；制作一个这样的页面；

HTML代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <!--css作业，实现JD登陆界面-->
  <title>京东-欢迎登陆</title>
  <link rel="stylesheet" href="	css/login.css">
 </head>
 <body>
		<div>
			<br>
			<img src="img/logo-201305-b.png" alt="">
			<br>
			<br>
		</div>
		<div>
			<!--将内容嵌套在表单中，用于提交-->
			<form action="www.jd.com" align="Center" method="post">
				<!--其他标签嵌套与table中-->
				<table border="0" align="Center"  height="400" width="350">
					<tr>
						<!--安全提示信息-->
						<td	id="alarm_info" colspan="2">
							京东不会以任何理由要求您转账汇款，谨防诈骗。
						</td>
					</tr>
					<tr>
						<td>
							<a href="#" id="scan_login">
								扫码登陆
							</a>
						</td>
						<td>
							<a href="#" id="account_login">
								账户登陆
							</a>
						</td>
					</tr>
					<tr>
						<td colspan="2"><hr></td>
					</tr>
					<tr>
						<td  colspan="2" align="right">
							<!--设置name, id， id用于CSS， name 用于提交给server-->
							<img src="img/login.jpg" alt="" id="img_login" 	valign="bottom">
							<input type="text" id="uname" name="uname" placeholder="邮箱/用户名/已验证手机" >
						</td>
					</tr>
					<tr>
						<td colspan="2" align="right" >
							<img src="img/password.jpg" alt="" id="img_pass" valign="bottom">
							<input type="password" id="upass" name="upass" placeholder="密码" width="370px" height="50px"> 
						</td>
					</tr>
					<tr>
						<td></td>
						<td align="right">
							<a id="forget_pass" href="https://aq.jd.com/process/findPwd?s=1"  target="_blank">
								忘记密码
							</a>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="right">
							<input type="submit" id="login" value="登&nbsp;&nbsp;&nbsp;&nbsp;陆" width="370px" height="50px">
						</td>
					</tr>
					<tr>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td align="center">
							<a  id="qq"  target="_blank"      href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=4969D2D4FE8133044197DF9A93AC8AFE22E320233CBC634D85484F3068927708B96F4E33305A68F035560EEB7E049769&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fqq%2Fcallback.action%3Fview%3Dnull%26uuid%3Dab78ac3cbd0f454ebf42e1b50cb8868f">
								<img id="img_qq" src="img/qq.jpg" alt="" valign="bottom">
								QQ
							</a>  &nbsp;&nbsp;|&nbsp;&nbsp;  
							<a  id="wechat"  target="_blank"   href="https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=9ED13D947AAF35FF13CBCC47ADABC54366424C9BF093F941587EAE2CFC80F5E32BC95A9AB0B0A25F035411E6F7E14F11&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3D1d65a232f4e3402d8c4036b0eacfcdd8&response_type=code&scope=snsapi_login#wechat_redirect">
							<img id="img_wechat" src="img/wechat.jpg" alt="" valign="bottom">
							微信
							</a>
						</td>
						<td align="right">
							<a id="register"  target="_blank"  href="https://reg.jd.com/p/regPage">
								<img id="img_arrow" src="img/arrow.jpg" alt="" valign="bottom">
								立即注册
							</a>
						</td>
					</tr>
				</table>
			</form>
		</div>
 </body>
</html>

CSS代码：


/*提示信息设置*/
#alarm_info{
	font-size:12px;
	color:#999;
	background-color:rgb(251,248,234);
}

/*扫码登陆和账户登陆设置*/
#scan_login{
	font-size:18px;
	color:#666;
	font-weight:bold ;
}

#account_login{
	font-size:18px;
	color:#666;
	font-weight:bold ;
}

a{
	text-decoration:none;
}

/*设置所有的链接，鼠标悬停，字体为红色*/
a:hover{
	color:#e4393c;
}


/*鼠标点击时，颜色为红色*/
#scan_login:visited{
	color:#e4393c;
}
#account_login:visited{
	color:#e4393c;
}


/*忘记密码设置*/
#forget_pass{
	color:#666;
	font-size:14px;
}
#forget_pass:hover{
	color:#e4393c;
}

/*群组选择器*/
/*qq 微信，立即注册的图标大小控制*/
#img_qq,#img_wechat,#img_arrow{
	height:25px;
	width:30px;
}



/*群组选择器，设置登录和密码框大小*/
#uname, #upass{
	width:254px;
	height:30px;
	line-height:18px;
}

#login{
	width:300px;
	height:30px;
	background-color:#e4393c;
	border:1px solid #e85356;
	color:#fff;
	font-size:18px;
}

/*设置文本框前面的小图标*/
#img_login, #img_pass{
	width:35px;
	height:35px;
}

作业效果：

取色和测量工具可以用： FastStone Capture

老王笔记

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS作业练习--JD登陆框

作业，下面是京东官网登陆框；制作一个这样的页面；HTML代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8">  <title>京东-欢迎登陆</title> &...
复制链接

扫一扫