2020技能抽查第二题

最新推荐文章于 2022-11-19 09:59:21 发布

hanni_xie

最新推荐文章于 2022-11-19 09:59:21 发布

阅读量864

点赞数 2

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/hanni_xie/article/details/107076639

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

2020技能抽查第二题

- 题目分析

样式图。

**样式图**

题目分析

这题我是用盒子模型来做的，分为左右2个盒子，左浮动与右浮动就可以完美的把盒子的位置给摆好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1_2</title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			.box{
				width: 500px;
				height: 200px;
				margin: auto;
			}
			.left{
				width: 180px;
				height: 200px;
				float: left;
			}
			.right{
				width: 300px;
				height: 200px;
				float: right;
				border: 1px solid #000000;
			}
			.p1{
				font-family: "黑体";
				font-size: 20px;
			}
			a{
				text-decoration: none;
			}
			.p2{
				background-color: #F1F1F1;
			}
			.header{
				width: 300px;
				height: 50px;
				background-color: #EEE0E5;
				font-size: 16px;
				text-align: center;
				line-height: 50px;
			}
			.footer{
				text-align: center;
			}
			input{
				height: 20px;
				color: #AEAEAE;
			}
			button{
				width: 45px;
			}
			a{
				color: black;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">
				<p class="p1">手机扫描，安全登录</p>
				<center>
				<img src="../img/1_2pic.png" alt="二维码图片">
				</center>
				<p class="p2">请使用<a href="#">手机app</a>扫描登录</p>
			</div>
		    <div class="right">
		    	<div class="header">
		    		<p>会员登录</p>
		    	</div>
		    	<div class="footer">
		    		<br />
		    		<form>
		    		<p>用户名：<input type="text"  value="请输入用户名"></p><br />
		    		<p>密&nbsp;&nbsp;&nbsp;码：<input type="text"  value="请输入密码名"></p><br />
		    		<button><a href="new.html">登录</a></button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		    		<button>取消</button>
		    		</form>
		    	</div>
		    </div>
		</div>
		
	</body>
</html>

图片自己去把路径写对了就可以了
这里我给大家补充一些知识：
a{
text-decoration: none;
}
清除超链接的下划线
line-height: 50px;
和height:50px;高度相同时文字会垂直居中
空格有2种符号&nbsq,&emsp

hanni_xie

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2020技能抽查第二题

2020技能抽查第二题题目分析**样式图**题目分析这题我是用盒子模型来做的，分为左右2个盒子，左浮动与右浮动就可以完美的把盒子的位置给摆好` 1_2 手机扫描，安全登录请使用手机app扫描登录会员登录用户名：密   码
复制链接

扫一扫

专栏目录