样式与特效（1）——居中写法

大梁来了

于 2024-07-18 01:05:57 发布

阅读量549

点赞数 11

分类专栏：特效与样式文章标签：前端

本文链接：https://blog.csdn.net/weixin_43435138/article/details/140485635

版权

特效与样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这节主要来扩充下CSS概念，总结复习自己不牢固的CSS，同时也扩充自己的前端系统开发知识面。完成一个自适应的登录页面。
首先在vscode里面建立一个自适应的模板页面!+TAB，也就是空的HTML标准模板。然后我们加上一个form表单

用户名:<input type=”text” name=”username” />

密码: <input type=”password” name= “password” />

</form>

标准版的form表单，提交的数据格式是键值对的方式，放入到HTML页面，再加入H5的特性 placeholder 默认的字眼 required 必填字段很多框架的必填字段生成都是依赖这个required 再加入俩个div模块

    <div class="login-container">

          <h1>登录</h1>

          <div class="login-form">

            <form action="login.php" method="post">

            登录名：  <input type="text" name="username" placeholder="登录名" required>

            密码 ： <input type="password" name="password" placeholder="密码" required>

              <button type="submit"> 提交</button>

            </form>

          </div>

    </div>

于是效果变成,十多年前第一次敲出HTML的场景:

那时候想的是实现功能就行，所以开始不断研究后端的相关逻辑。直到现在发现，这样是根本没人会看的，用户也不会给你钱，除了在你自己的电脑上登录后台，没有人会用这种功能，哪怕你后端功能再牛逼也不会有人用。
我在代码里面本意是登录是一个大模块，然后有个标题，然后form表单也一块。最起码是要放在浏览器的正中间，而现在排序是按照默认的排序，排在左边。最起码要将整个div模块里面的登录信息显示在屏幕正中央。目标1:实现模块的居中效果。最起码也是如下效果，基本登录都是居中或者能控制，绝对不是我们现在这样一直贴着最左边的。

实现方案有三种:

传统的布局模式:

  .login-container {

            background-color: rgb(129, 129, 200);

            width: 100%;

            /* 或者适当的宽度 */

            height: 100vh;

            /* 可选，视情况而定 */

            text-align: center;

            /* 水平居中 */

        }

实现了我们的居中效果，其实就是一个text-align:center.这个特性本来就是实现我们的内部模块的行业对齐的，基本实现我们需要的第一期目标。虽然不完美，但是可以实现了。

然后第二种，使用grid 网格容器定位。比传统的定位强大，可以直接定位到中央。对应的网格控制代码:

.login-container {

background-color: rgb(113, 113, 212);

display: grid;

place-items: center;

height: 100vh;

}

效果非常好，直接到了网页中央

第三种使用 display : flex 将其设为 flex 容器，然后使用 justify-content: center; 和 align-items: center; 分别在主轴和交叉轴上进行居中对齐。在当前自适应开发里面，普遍性的使用display:flex自适应的模式

.login-container {

display: flex;

justify-content: center;

/* 水平居中 */

align-items: center;

/* 可以设置一个容器高度，确保垂直方向居中效果 */

height: 100%;

background-color: #f7f7f7;

}

页面居中，然后背景颜色就不用管了，按照之前潦草的做法。我们这次设置了俩个模块，希望做出区分效果。也就是登录框里面和登录框之外是必须进行区分的。另外做个区分，background：white 和background-color：white的区别，前者强制性把背景板设置为白色后者仅仅是把背景板的颜色设置成了白色。所以如果是大的div 背景图不够的情况下，使用background-color 而如果是需要背景图强制覆盖使用background。

现在我们来实现第二个目标: 在登录模块的和外部的div明显区分出来，方便视觉的好看。很多登录都是这种效果，第一层div主要放背景板和各种高大上的背景图片。

首先我们定义下，整个页面的一些自动元素

body, html {

height: 100%;

margin: 0;

font-family: Arial, sans-serif;

}

我们清除下元素的边距，因为我们马上需要设置明显的框区分，为了防止系统里面原来的margin对我们造成影响，我们默认其为0。

.login-form {

background: white;

border-radius: 5px;

padding: 20px;