小白牛必定掌握的前端小知识

**第一步：**找一个图片加载为背景：

	<style type="text/css">
	body {
	background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	background-repeat: no-repeat;
	background-size: 100% 1000px;

}

我设置的是一个渐变色的背景 然后设置的不平铺，占据屏幕的百分之百大小，设置了行高,不设置行高的话渐变色显示不出来。
**第二步：**设置一个div框架在页面中间 用于转登录中的账号和密码

#login-box{
	width: 30%;
	height: auto;
	border: 1px solid #000;
	margin:0 auto; 
	margin-top: 8%;
	text-align: center;
	background: #00000090;
	padding: 20px 50px;
	color: #fff;

}

设置高度自适应，用margin：0 auto；设置了居中，前间距为8%，text-align：center设置了内容居中
设置了一个div背景 background: #00000090;透明度为百分之九十；内容内间距为上下20px，左右50px;
字体颜色接近灰色;
第三步添加H标签，显示标题

登 录

**第四步**添加两个标签和文本域用一个div包住 内容各自为一个div

**第五步:**添加两个按钮 我就只是设置的两个botton按钮 没有实现功能 ,如果要跳转就用a标签实现跳转

**最后一步:**为了美化给他们设置上样式

#login-box .form .item{
	margin-top: 15px;
}
#login-box .form .item .icon{
  display: inline-block;
  width: 20px;
  height: 15px;
  background: url(./user.jpg);
  background-repeat: no-repeat;
}
#login-box .form .item input{
	width: 180px;
	font-size: 18px;
	border: 0;
	border-bottom: 2px solid #000;
	padding: 5px 10px;
	background:#ffffff00;
	color: #fff;
}
#login-box button{
	margin-top:15px;
	width:220px;
	height:30px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	background-image: linear-gradient(to right,#db3125 0%,#578bc3 100%);
	border:0;
	border-radius: 15px;
	font-family:"微软雅黑";
}

给按钮也设置一个样式 可以更好看 最后看成品:

附上源码:

}
#login-box{
width: 30%;
height: auto;
border: 1px solid #000;
margin:0 auto;
margin-top: 8%;
text-align: center;
background: #00000090;
padding: 20px 50px;
color: #fff;

}
#login-box .form .item{
margin-top: 15px;
}
#login-box .form .item .icon{
display: inline-block;
width: 20px;
height: 15px;
background: url(./user.jpg);
background-repeat: no-repeat;
}
#login-box .form .item input{
width: 180px;
font-size: 18px;
border: 0;
border-bottom: 2px solid #000;
padding: 5px 10px;
background:#ffffff00;
color: #fff;
}
#login-box button{
margin-top:15px;
width:220px;
height:30px;
font-size: 20px;
font-weight: 700;
color: #fff;
background-image: linear-gradient(to right,#db3125 0%,#578bc3 100%);
border:0;
border-radius: 15px;
font-family:“微软雅黑”;
}

登 录

账 号:

密 码:

登 录 注 册