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>密 码:<input type="text" value="请输入密码名"></p><br />
<button><a href="new.html">登录</a></button>
<button>取消</button>
</form>
</div>
</div>
</div>
</body>
</html>
图片自己去把路径写对了就可以了
这里我给大家补充一些知识:
a{
text-decoration: none;
}
清除超链接的下划线
line-height: 50px;
和height:50px;高度相同时文字会垂直居中
空格有2种符号&nbsq,&emsp