sass实战dom-登陆界面_基于sass的登录页面设计与实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qczzc/article/details/130805095

文章目录

前言
一、效果图
二、开始编写
总结

前言

提示：这里主要是对其进行使用，如果有不熟悉的小伙欢迎进入sass专栏学习：

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果图

在这里插入图片描述
需求：1、整体登陆框上下左右居中
2、登陆按钮鼠标移动上去颜色饱和度减半
3、输入框的选中时的颜色是主题色

二、开始编写

0.整体布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
</head>
<body>
    <div class="content">
        <div class="innerDiv">
           <div class="h1">
                <h2>登陆后更精彩</h2>
           </div>
           <div class="input">
                <div>
                    <input type="email" placeholder=邮箱>
                </div>
                <div>
                    <input type="password" placeholder="密码">
                </div>
            </div>
            <div class="login">
                <button>登陆</button>
            </div>
            <div class="operation">
                <div>
                    <div class="rg"><span>注册</span></div>
                    <div class="wj"><span>忘记密码</span></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

以下代码在scss文件编写

1.整体布局样式

代码如下（示例）：

$backgroundColor:#6ee57c; /*页面背景颜色*/
$backgroundFormColor:#fff; /*表单字体颜色*/
$borderRadius:4px; /*圆角*/
$mainColor:#6ee57c; /*主题颜色*/
/*去除页面的内外边距*/
* {
    margin: 0;
    padding: 0;
}

.content {
    background-color: $backgroundColor;
    /*剧中处理*/
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    height: 100vh;/*vh页面高度的百分之几，这里指百分之100*/
    .innerDiv {
        width: 450px;
        height: 300px;
        background-color: $backgroundFormColor;
        .h1 {
        /*剧中处理*/
            position: relative;
            width: 300px;
            margin-left: 50%;
            left: -150px;
            
            margin-top: 40px;
            color: $mainColor;
        }
        .input {
            >div {
            /*剧中处理*/
                display: flex;
                justify-content: center;
                input {
                    width: 300px;
                    height: 30px;
                    margin-top: 20px;
                    padding-left: 10px;
                    border: #cecaca 1px solid;
                    border-radius: $borderRadius;
                }
                /*输入框选中时的颜色*/
                input:focus {
                    border-color: $mainColor;
                    outline: none;
                }
            }
        }
        .login {
        /*剧中处理*/
            display: flex;
            justify-content: center;
            button {
                background-color: $mainColor;
                border-radius: $borderRadius;
                border: none;
                color: #fff;
                margin-top: 20px;
                width: 310px;
                height: 30px;
            }
            /*登陆按钮选中时*/
            button:hover {
                background-color: #6ee57c81;
            }
        }
        .operation {
           /*剧中处理*/
            display: flex;
            justify-content: center;
            >div {
                margin-top: 20px;
                width: 300px;
                display: flex;
                color: rgb(112, 114, 116);
                .rg {
                    flex: 1;
                    text-align: left;
                }
                .wj {
                    flex: 1;
                    text-align: right;
                }
            }
        }
    }
}

2.编译成css文件

代码如下（示例）：

* {
  margin: 0;
  padding: 0;
}

.content {
  background-color: #6ee57c;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.content .innerDiv {
  width: 450px;
  height: 300px;
  background-color: #fff;
}
.content .innerDiv .h1 {
  position: relative;
  width: 300px;
  margin-left: 50%;
  left: -150px;
  margin-top: 40px;
  color: #6ee57c;
}
.content .innerDiv .input > div {
  display: flex;
  justify-content: center;
}
.content .innerDiv .input > div input {
  width: 300px;
  height: 30px;
  margin-top: 20px;
  padding-left: 10px;
  border: #cecaca 1px solid;
  border-radius: 4px;
}
.content .innerDiv .input > div input:focus {
  border-color: #6ee57c;
  outline: none;
}
.content .innerDiv .login {
  display: flex;
  justify-content: center;
}
.content .innerDiv .login button {
  background-color: #6ee57c;
  border-radius: 4px;
  border: none;
  color: #fff;
  margin-top: 20px;
  width: 310px;
  height: 30px;
}
.content .innerDiv .login button:hover {
  background-color: rgba(110, 229, 124, 0.5058823529);
}
.content .innerDiv .operation {
  display: flex;
  justify-content: center;
}
.content .innerDiv .operation > div {
  margin-top: 20px;
  width: 300px;
  display: flex;
  color: rgb(112, 114, 116);
}
.content .innerDiv .operation > div .rg {
  flex: 1;
  text-align: left;
}
.content .innerDiv .operation > div .wj {
  flex: 1;
  text-align: right;
}/*# sourceMappingURL=index.css.map */