6.17知识点

一、主题：完成登录页面

二、知识点

1、弹性布局：

display: flex;
    align-items: center;
    justify-content: center;

2、透明度：

background-color: rgba(0, 0, 0, 0.1);

opacity: 0.8;

三、页面布局

1、建一个大div包括所有页面，在css里加背景图片，并居中。

2、在建两个小div，第一个div显示LOGIN IN并改颜色居中，第二个div显示用户名、密码、文本框和登录、重置按钮，然后改css样式，并居中。

<div class="d1">
    <div class="d1-s2">
		<div class="d1-s2-c1">
			<p style="font-weight: bold;color: white;font-size: 30px;">
                LOGIN IN
            </p>
		</div>
		<div class="d1-s2-c2">
			<p class="p1">
				<span style="color: white;">用户名：</span>
				<input type="text">
			</p>
			<p class="p2">
				<span style="color: white;">密码：</span>
				<input type="text">
			</p>
			<p class="p3">
				<button class="btn">登录</button>
				<button class="btn" style="margin-left: 20px;">重置</button>
			</p>
		</div>
	</div>
</div>

css样式：

/* 最大的div */
.d1{
	width: 100%;
	height: 500px;
	background: url("../img/bg.jpg") no-repeat center;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 登录边框*/
.d1-s2{
	border: 0px solid red;
	width: 500px;
	height: 300px;
	background-color: darkgray;
	background-color: rgba(0, 0, 0, 0.1);
}
.d1-s2-c1{
	text-align: center;
}
.d1-s2-c2{
	text-align: center;
}
.btn{
	border: 0px solid red;
	background-color: #7496D2;
	opacity: 0.8;
	color: white;
	width: 100px;
	height: 30px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.p2{
	margin-left: -15px;
}
.p3{
	margin-left: -30px;
}
/* 文本框 */
input{
	background-color: #B5AFC3;
	border: 0px solid red;
	width: 150px;
	height: 30px;
	opacity: 0.8;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

四、项目中的问题？

透明度不会？

解决：百度搜索。

background-color: rgba(0, 0, 0, 0.1);

opacity: 0.8;