北京网站设计十年乐云seo,中关村在线电脑官网,个人网站注册步骤图解,网站系统的设计与实现效果演示 实现了一个简单的登录表单的样式#xff0c;包括背景颜色、边框、字体颜色、字体大小、字体粗细、输入框样式、提交按钮样式等。当用户在输入框中输入内容时#xff0c;输入框下方的提示文字会动态地变化#xff0c;以提示用户输入正确的信息。当用户点击提交按钮时…
效果演示 实现了一个简单的登录表单的样式包括背景颜色、边框、字体颜色、字体大小、字体粗细、输入框样式、提交按钮样式等。当用户在输入框中输入内容时输入框下方的提示文字会动态地变化以提示用户输入正确的信息。当用户点击提交按钮时会触发一个事件例如提交表单数据到服务器。 Code
div classformdiv classtitleWelcome/divdiv classsubtitleLets create your account!/divdiv classinput-container ic1input placeholder typetext classinput idfirstnamediv classcut/divlabel classiLabel forfirstnameFirst name/label/divdiv classinput-container ic2input placeholder typetext classinput idlastnamediv classcut/divlabel classiLabel forlastnameLast name/label/divdiv classinput-container ic2input placeholder typetext classinput idemaildiv classcut cut-short/divlabel classiLabel foremailEmail/label/divbutton classsubmit typetextsubmit/button
/divbody {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #e8e8e8;
}.form {background-color: #15172b;border-radius: 20px;box-sizing: border-box;height: 500px;padding: 20px;width: 320px;
}.title {color: #eee;font-family: sans-serif;font-size: 36px;font-weight: 600;margin-top: 30px;
}.subtitle {color: #eee;font-family: sans-serif;font-size: 16px;font-weight: 600;margin-top: 10px;
}.input-container {height: 50px;position: relative;width: 100%;
}.ic1 {margin-top: 40px;
}.ic2 {margin-top: 30px;
}.input {background-color: #303245;border-radius: 12px;border: 0;box-sizing: border-box;color: #eee;font-size: 18px;height: 100%;outline: 0;padding: 4px 20px 0;width: 100%;
}.cut {background-color: #15172b;border-radius: 10px;height: 20px;left: 20px;position: absolute;top: -20px;transform: translateY(0);transition: transform 200ms;width: 76px;
}.cut-short {width: 50px;
}.iLabel {color: #65657b;font-family: sans-serif;left: 20px;line-height: 14px;pointer-events: none;position: absolute;transform-origin: 0 50%;transition: transform 200ms, color 200ms;top: 20px;
}.input:focus~.cut {transform: translateY(8px);
}.input:focus~.iLabel {transform: translateY(-30px) translateX(10px) scale(0.75);
}.input:not(:focus)~.iLabel {color: #808097;
}.input:focus~.iLabel {color: #dc2f55;
}.submit {background-color: #08d;border-radius: 12px;border: 0;box-sizing: border-box;color: #eee;cursor: pointer;font-size: 18px;height: 50px;margin-top: 38px;text-align: center;width: 100%;
}.submit:active {background-color: #06b;
}实现思路拆分
body {height: 100vh; /* 设置整个页面的高度为视口高度 */display: flex; /* 设置元素的显示方式为flex布局 */justify-content: center; /* 设置主轴上的对齐方式为居中对齐 */align-items: center; /* 设置交叉轴上的对齐方式为居中对齐 */background-color: #e8e8e8; /* 设置背景颜色为灰色 */
}这段代码设置了整个页面的样式包括高度、显示方式、对齐方式和背景颜色。
.form {background-color: #15172b; /* 设置背景颜色为深蓝色 */border-radius: 20px; /* 设置边框圆角为20像素 */box-sizing: border-box; /* 设置盒模型为border-box */height: 500px; /* 设置表单高度为500像素 */padding: 20px; /* 设置内边距为20像素 */width: 320px; /* 设置表单宽度为320像素 */
}这段代码设置了表单的样式包括背景颜色、边框圆角、盒模型、高度、内边距和宽度。
.title {color: #eee; /* 设置字体颜色为白色 */font-family: sans-serif; /* 设置字体为sans-serif字体 */font-size: 36px; /* 设置字体大小为36像素 */font-weight: 600; /* 设置字体粗细为600 */margin-top: 30px; /* 设置上边距为30像素 */
}这段代码设置了标题的样式包括字体颜色、字体、字体大小、字体粗细和上边距。
.subtitle {color: #eee; /* 设置字体颜色为白色 */font-family: sans-serif; /* 设置字体为sans-serif字体 */font-size: 16px; /* 设置字体大小为16像素 */font-weight: 600; /* 设置字体粗细为600 */margin-top: 10px; /* 设置上边距为10像素 */
}这段代码设置了副标题的样式包括字体颜色、字体、字体大小、字体粗细和上边距。
.input-container {height: 50px; /* 设置输入框高度为50像素 */position: relative; /* 设置输入框的定位方式为相对定位 */width: 100%; /* 设置输入框的宽度为100% */
}这段代码设置了输入框容器的样式包括高度、定位方式和宽度。
.ic1 {margin-top: 40px; /* 设置输入框容器的上边距为40像素 */
}.ic2 {margin-top: 30px; /* 设置输入框容器的上边距为30像素 */
}这段代码分别设置了两个输入框容器的上边距。
.input {background-color: #303245; /* 设置输入框的背景颜色为深灰色 */border-radius: 12px; /* 设置输入框的边框圆角为12像素 */border: 0; /* 设置输入框的边框为无边框 */box-sizing: border-box; /* 设置盒模型为border-box */color: #eee; /* 设置输入框的字体颜色为白色 */font-size: 18px; /* 设置输入框的字体大小为18像素 */height: 100%; /* 设置输入框的高度为100% */outline: 0; /* 设置输入框的轮廓为无轮廓 */padding: 4px 20px 0; /* 设置输入框的内边距为上下各2像素左右各20像素 */width: 100%; /* 设置输入框的宽度为100% */
}这段代码设置了输入框的样式包括背景颜色、边框圆角、边框、盒模型、字体颜色、字体大小、高度、轮廓、内边距和宽度。
.cut {background-color: #15172b; /* 设置提示文字的背景颜色为深蓝色 */border-radius: 10px; /* 设置提示文字的边框圆角为10像素 */height: 20px; /* 设置提示文字的高度为20像素 */left: 20px; /* 设置提示文字距离输入框左侧的距离为20像素 */position: absolute; /* 设置提示文字的定位方式为绝对定位 */top: -20px; /* 设置提示文字距离输入框上方的距离为-20像素 */transform: translateY(0); /* 设置提示文字的垂直方向的缩放比例为1 */transition: transform 200ms; /* 设置提示文字的过渡效果 */width: 76px; /* 设置提示文字的宽度为76像素 */
}这段代码设置了提示文字的样式包括背景颜色、边框圆角、高度、左侧距离、定位方式、垂直方向的缩放比例、过渡效果和宽度。
.cut-short {width: 50px; /* 设置提示文字的宽度为50像素 */
}这段代码设置了提示文字的宽度为50像素。
.iLabel {color: #65657b; /* 设置提示文字的字体颜色为深灰色 */font-family: sans-serif; /* 设置提示文字的字体为sans-serif字体 */left: 20px; /* 设置提示文字距离输入框左侧的距离为20像素 */line-height: 14px; /* 设置提示文字的行高为14像素 */pointer-events: none; /* 设置提示文字不可被点击 */position: absolute; /* 设置提示文字的定位方式为绝对定位 */transform-origin: 0 50%; /* 设置提示文字的缩放中心为水平方向的中心点 */transition: transform 200ms, color 200ms; /* 设置提示文字的过渡效果 */top: 20px; /* 设置提示文字距离输入框上方的距离为20像素 */
}这段代码设置了提示文字的样式包括字体颜色、字体、左侧距离、行高、可点击性、定位方式、缩放中心、过渡效果和上方距离。
.input:focus~.cut {transform: translateY(8px); /* 当输入框获得焦点时将提示文字向下移动8像素 */
}这段代码设置了当输入框获得焦点时提示文字向下移动8像素的样式。
.input:focus~.iLabel {transform: translateY(-30px) translateX(10px) scale(0.75); /* 当输入框获得焦点时将提示文字向上移动30像素向右移动10像素缩小0.75倍 */
}这段代码设置了当输入框获得焦点时提示文字向上移动30像素向右移动10像素缩小0.75倍的样式。
.input:not(:focus)~.iLabel {color: #808097; /* 当输入框没有获得焦点时将提示文字颜色设置为深灰色 */
}这段代码设置了当输入框没有获得焦点时提示文字颜色设置为深灰色的样式。
.input:focus~.iLabel {color: #dc2f55; /* 当输入框获得焦点时将提示文字颜色设置为红色 */
}这段代码设置了当输入框获得焦点时提示文字颜色设置为红色的样式。
.submit {background-color: #08d; /* 设置提交按钮的背景颜色为深红色 */border-radius: 12px; /* 设置提交按钮的边框圆角为12像素 */border: 0; /* 设置提交按钮的边框为无边框 */box-sizing: border-box; /* 设置盒模型为border-box */color: #eee; /* 设置提交按钮的字体颜色为白色 */cursor: pointer; /* 设置提交按钮的鼠标指针为指针 */font-size: 18px; /* 设置提交按钮的字体大小为18像素 */height: 50px; /* 设置提交按钮的高度为50像素 */margin-top: 38px; /* 设置提交按钮距离表单底部的距离为38像素 */text-align: center; /* 设置提交按钮的文本对齐方式为居中对齐 */width: 100%; /* 设置提交按钮的宽度为100% */
}这段代码设置了提交按钮的样式包括背景颜色、边框圆角、边框、盒模型、字体颜色、鼠标指针、字体大小、高度、距离表单底部的距离、文本对齐方式和宽度。
.submit:active {background-color: #06b; /* 当提交按钮被激活时将背景颜色设置为深绿色 */
}这段代码设置了当提交按钮被激活时将背景颜色设置为深绿色的样式。
