总结：
不熟悉的标签及属性
no-repeat 不平铺
background: linear-gradient渐变
background-position:背景图片定位 x y坐标
border-radius：边框圆角
border-radius:50%；圆形
温习已背的标签以及熟悉
！dcotype-html声明
title标题
mata元消息
link外部样式
href文件地址
small小号字体
strong着重语气
text-indent首行缩进
margin外间距
padding内间距
实例
<!DOCTYPE html>
<html>
<head>
<title>登录界面</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
body{
background: #151517;
}
div{
background: rgba(185,184,187,0.4);
width: 500px;
height: 400px;
text-align:center;
margin: 100px auto;
border-radius:10px;
}
img{
width:80px;
height: 80px;
border-radius: 50%;
margin-top:50px;
}
input{
width: 300px;
height:40px;
margin-top:15px;
border-radius:6px;
border:none;
padding-left: 15px;
}
button{
border: none;
width: 200px;
height:35px;
border-radius: 6px;
background: #151517;
color:#fff;
margin-top:15px;
}
</style>
</head>
<body>
<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552483629728&di=4ba100a31f25acee76cd47526cbeb240&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201706%2F06%2F20170606042856_rHdnA.jpeg">
<form action="" method="">
<input type="text" name="" placeholder="请输入账号....."><br>
<input type="password" name="" placeholder="请输入密码....."><br>
<button>提交</button>
</form>
</div>
</body>
</html>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
