10 芭比粉登录页

效果演示

一个简单的网页登录页面的样式。页面包括一个标题、一个副标题、一个表单区域和一个按钮，表单区域包括三个表单元素，分别是用户名、密码和确认密码，按钮包括一个链接。整个页面的样式非常简洁明了，美观大方，适合用于各种场景的登录页面。

Code

<div class="container">
    <div class="form_area">
        <p class="title">SIGN UP</p>
        <form action="">
            <div class="form_group">
                <label class="sub_title" for="name">Name</label>
                <input placeholder="Enter your full name" class="form_style" type="text">
            </div>
            <div class="form_group">
                <label class="sub_title" for="email">Email</label>
                <input placeholder="Enter your email" id="email" class="form_style" type="email">
            </div>
            <div class="form_group">
                <label class="sub_title" for="password">Password</label>
                <input placeholder="Enter your password" id="password" class="form_style" type="password">
            </div>
            <div>
                <button class="btn">SIGN UP</button>
                <p>Have an Account? <a class="link" href="">Login Here!</a></p><a class="link" href="">
                </a>
            </div><a class="link" href="">

            </a>
        </form>
    </div><a class="link" href="">
    </a>
</div>

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.form_area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #EDDCD9;
    height: auto;
    width: auto;
    border: 2px solid #264143;
    border-radius: 20px;
    box-shadow: 3px 4px 0px 1px #E99F4C;
}

.title {
    color: #264143;
    font-weight: 900;
    font-size: 1.5em;
    margin-top: 20px;
}

.sub_title {
    font-weight: 600;
    margin: 5px 0;
}

.form_group {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin: 10px;
}

.form_style {
    outline: none;
    border: 2px solid #264143;
    box-shadow: 3px 4px 0px 1px #E99F4C;
    width: 290px;
    padding: 12px 10px;
    border-radius: 4px;
    font-size: 15px;
}

.form_style:focus,
.btn:focus {
    transform: translateY(4px);
    box-shadow: 1px 2px 0px 0px #E99F4C;
}

.btn {
    padding: 15px;
    margin: 25px 0px;
    width: 290px;
    font-size: 15px;
    background: #DE5499;
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 3px 3px 0px 0px #E99F4C;
}

.btn:hover {
    opacity: .9;
}

.link {
    font-weight: 800;
    color: #264143;
    padding: 5px;
}

实现思路拆分

body {
  height: 100vh; /* 设置body的高度为视口高度 */
  display: flex; /* 设置display属性为flex */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: #e8e8e8; /* 设置背景颜色为#e8e8e8 */
}

这段代码设置了body的高度为视口高度，并将其显示为flex容器，水平居中和垂直居中。背景颜色为#e8e8e8。

.container {
  display: flex; /* 设置display属性为flex */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  flex-direction: column; /* 设置flex方向为column */
  text-align: center; /* 水平居中对齐文本 */
}

这段代码设置了容器的样式，将其显示为flex容器，垂直居中和水平居中，flex方向为column，文本水平居中对齐。

.form_area {
  display: flex; /* 设置display属性为flex */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 设置flex方向为column */
  background-color: #EDDCD9; /* 设置背景颜色为#EDDCD9 */
  height: auto; /* 设置高度为自动 */
  width: auto; /* 设置宽度为自动 */
  border: 2px solid #264143; /* 设置2像素的2像素实线边框 */
  border-radius: 20px; /* 设置20像素的圆角边框 */
  box-shadow: 3px 4px 0px 1px #E99F4C; /* 添加一个3像素4像素0像素1像素的盒阴影 */
}

这段代码设置了表单区域的样式，将其显示为flex容器，水平居中和垂直居中，flex方向为column，背景颜色为#EDDCD9，高度为自动，宽度为自动，添加了一个2像素的2像素实线边框，20像素的圆角边框，添加了一个3像素4像素0像素1像素的盒阴影。

.title {
  color: #264143; /* 设置标题颜色为#264143 */
  font-weight: 900; /* 设置字体加粗为900 */
  font-size: 1.5em; /* 设置字体大小为1.5em */
  margin-top: 20px; /* 添加上边距为20像素 */
}

这段代码设置了标题的样式，字体颜色为#264143，字体加粗为900，字体大小为1.5em，上边距为20像素。

.sub_title {
  font-weight: 600; /* 设置字体加粗为600 */
  margin: 5px 0; /* 添加上下边距为5像素 */
}

这段代码设置了副标题的样式，字体加粗为600，上下边距为5像素。

.form_group {
  display: flex; /* 设置display属性为flex */
  flex-direction: column; /* 设置flex方向为column */
  align-items: baseline; /* 垂直对齐为基线 */
  margin: 10px; /* 添加上下边距为10像素 */
}

这段代码设置了表单组的样式，将其显示为flex容器，flex方向为column，垂直对齐为基线，上下边距为10像素。

.form_style {
  outline: none; /* 去除表单元素的外边框 */
  border: 2px solid #264143; /* 设置2像素的2像素实线边框 */
  box-shadow: 3px 4px 0px 1px #E99F4C; /* 添加一个3像素4像素0像素1像素的盒阴影 */
  width: 290px; /* 设置表单元素的宽度为290像素 */
  padding: 12px 10px; /* 设置表单元素的内边距为上下各12像素，左右各10像素 */
  border-radius: 4px; /* 设置表单元素的圆角半径为4像素 */
  font-size: 15px; /* 设置表单元素的字体大小为15像素 */
}

这段代码设置了表单元素的样式，去除了外边框，添加了一个2像素的2像素实线边框，添加了一个3像素4像素0像素1像素的盒阴影，设置了宽度为290像素，内边距为上下各12像素，左右各10像素，圆角半径为4像素，字体大小为15像素。

.form_style:focus,
.btn:focus {
  transform: translateY(4px); /* 向上移动4像素 */
  box-shadow: 1px 2px 0px 0px #E99F4C; /* 修改盒阴影 */
}

这段代码设置了表单元素和按钮元素获得焦点时的样式，向上移动4像素，修改了盒阴影。

.btn {
  padding: 15px; /* 设置按钮的内边距为上下各15像素，左右各10像素 */
  margin: 25px 0px; /* 设置按钮的上下边距为25像素，左右边距为0像素 */
  width: 290px; /* 设置按钮的宽度为290像素 */
  font-size: 15px; /* 设置按钮的字体大小为15像素 */
  background: #DE5499; /* 设置按钮的背景颜色为#DE5499 */
  border-radius: 10px; /* 设置按钮的圆角半径为10像素 */
  font-weight: 800; /* 设置按钮的字体加粗为800 */
  box-shadow: 3px 3px 0px 0px #E99F4C; /* 添加一个3像素3像素0像素0像素的盒阴影 */
}

这段代码设置了按钮的样式，内边距为上下各15像素，左右各10像素，宽度为290像素，字体大小为15像素，背景颜色为#DE5499，圆角半径为10像素，字体加粗为800，添加了一个3像素3像素0像素0像素的盒阴影。

.btn:hover {
  opacity:.9; /* 按钮悬停时的透明度为0.9 */
}

这段代码设置了按钮悬停时的样式，透明度为0.9。

.link {
  font-weight: 800; /* 设置链接的字体加粗为800 */
  color: #264143; /* 设置链接的颜色为#264143 */
  padding: 5px; /* 设置链接的内边距为上下各5像素，左右各5像素 */
}

这段代码设置了链接的样式，字体加粗为800，颜色为#264143，内边距为上下各5像素，左右各5像素。