登录实现页面

最新推荐文章于 2024-01-14 17:39:02 发布

Xandx812

最新推荐文章于 2024-01-14 17:39:02 发布

阅读量183

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Xandx812/article/details/125375684

版权

这篇博客主要介绍了如何使用HTML和CSS创建一个登录页面，重点在于弹性布局（Flex）的应用，以及如何设置背景颜色的透明效果。通过一个包含用户名和密码输入框以及登录和重置按钮的示例，详细解释了页面布局和样式设置。

摘要由CSDN通过智能技术生成

一、主题：完成登录页面

二、知识点

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;