PS:该源码非原创,原文章来自(2条消息) HTML+CSS登录界面_桐艾的博客-CSDN博客_登录页面
这里只做源码讲解
页面效果如下:
首先是login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="./login.css"/>
</head>
<body>
<div id="login-box">
<h1>Login</h1>
<div class="form">
<div class="item">
<i class="fa fa-github-alt" style="font-size:24px"></i>
<input type="text" placeholder="Username">
</div>
<div class="item">
<i class="fa fa-search" style="font-size:24px"></i>
<input type="text" placeholder="Password">
</div>
</div>
<button>Login</button>
</div>
</body>
</html>
login.html效果如下
源码剖析如下:
<h1>Login</h1>#一级标题
<link rel="stylesheet" href="./login.css"/> #link标签在head部分,用于链接两个文档,rel属性必须,表示要导入的样式表的URL,href后面就接着css文件的路径,可以是相对也可以是绝对路径。
<div class="item"> #选择器class=item的盒子
<i class="fa fa-github-alt" style="font-size:24px"></i> # 字体24px的一个图标
<input type="text" placeholder="Username"> #输入框,默认值为Username
</div>
<div class="item"> #选择器class=item的盒子
<i class="fa fa-search" style="font-size:24px"></i> #字体24px的图标
<input type="text" placeholder="Password"> #输入框,默认值为Password
</div>
<div class="form"> # 选择器class=form的盒子,将前面两个盒子装入
<div class="item">
<i class="fa fa-github-alt" style="font-size:24px"></i>
<input type="text" placeholder="Username">
</div>
<div class="item">
<i class="fa fa-search" style="font-size:24px"></i>
<input type="text" placeholder="Password">
</div>
</div>
<button>Login</button>#按钮
以下是login.css的内容:
body{
background:url('./1.jpg');
background-repeat:no-repeat;
background-size:100% auto;
}
#login-box{
width:30%;
height:auto;
margin:0 auto ;
margin-top:13%;
text-align:center;
background:#00000060;
padding:20px 50px;
}
#login-box h1{
color:#fff;
}
#login-box .form .item{
margin-top:15px;
}
#login-box .form .item i{
font-size:18px;
color:#fff;
}
#login-box .form .item input{
width:180px;
font-size:18px;
border:0;
border-bottom:2px solid #fff;
padding:5px 10px;
background:#ffffff00;
color:#fff;
}
#login-box button{
margin-top:20px;
width:190px;
height:30px;
font-size:20px;
font-weight:700;
color:#fff;
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
border:0;
border-radius:15px;
}
源码剖析如下:
body{ #对html文件中的全体进行设置
background:url('./1.jpg'); #背景图片,文件路径自己选择
background-repeat:no-repeat; #背景图片不重复
background-size:100% auto; # 背景的尺寸为100%
}
#login-box{ #对标签为login-box的盒子做处理
width:30%; #设置区域宽度为30%
height:auto; #默认,浏览器计算出实际高度
margin:0 auto ; #让盒子页面居中
margin-top:13%; # 上外边距13%
text-align:center;#设置盒子内部元素居中
background:#00000060; #设置背景色
padding:20px 50px;# 上下填充,左右填充
}
#login-box h1{ #设置选择器login-box的盒子中的h1标题颜色
color:#fff;
}
#login-box .form .item{ # 设置选择器login-box的盒子的form和item盒子的上边距15px
margin-top:15px;
}
#login-box .form .item i{ #对选择器login-box盒子的form,item盒子的两个图标设置大小和颜色
font-size:18px;
color:#fff;
}
#login-box .form .item input{ #设置选择器标签为login-box中的输入框属性
width:180px;# 输入框宽度
font-size:18px; #输入字体大小
border:0; #无边框
border-bottom:2px solid #fff; # 底部边框宽度,实线边框,边框颜色
padding:5px 10px; #上下边距,左右边距
background:#ffffff00; #背景色,即透明
color:#fff; #输入文字颜色
}
#login-box button{ #设置选择器login-box盒子中的按钮
margin-top:20px; #上边距
width:190px; #宽度
height:30px; #高度
font-size:20px; # 字体大小
font-weight:700; # 字体宽度
color:#fff; # 字体颜色
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);#线性渐变,从左侧到右侧,颜色渐变,渐变从按钮的0%到100%
border:0; #无边框
border-radius:15px;# 设置边框均等圆角
}