我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

Html登录页面设计

一、页面效果展示

code.juejin.cn/pen/7140047…

二、主要代码解释

1.首先是当前的页面设计为三个区域，分别为上方的登录标识，中间的表单输入框，以及下方的登录按钮，其中的设计主要为样式的设计

2.先是整个页面的边距以及大小设计 margin: 0; padding: 0;,大小为 height: 100%;

3.设计整个页面背景以及其他信息设计container {height: 100%; background-image: linear-gradient(to right, #fbc2eb, #a6c1ee); ,其中的linear-gradient(下方有特别说明),

4.登录框的设计样式展示

login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

登录按钮的设计样式

.btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }

三、linear-gradient 解释说明

linear-gradient是通过渐变的角度来控制渐变的方向。渐变角度值是渐变线与渐变容器中心点向上垂直线之间的夹角。

可以通过下面两种方法来定义这个角度

• 使用关键词：to top、to bottom、to left、to right、to top right、to top left、to bottom right和to bottom left（这些值会被转换为指定的角度值）
• 使用带单位数字定义角度，比如45deg、1turn等

如果省略角度值的设置，那默认是to bottom（对应180deg或者.5turn）

linear-gradient中的顶角关键词

在使用顶角关键词时需要注意，如果你想要一个red至blue的渐变，方向是 to top right，如下图所示：

顶角关键字并不意味着渐变线穿过右上角，而是渐变线首先通过元素中心点并且与顶点垂直相交，与中心点垂直线构成指定的夹角。