HTML&CSS登录界面及讲解

最新推荐文章于 2025-04-14 11:18:06 发布

獜洛橙

最新推荐文章于 2025-04-14 11:18:06 发布

阅读量1w

点赞数 27

分类专栏： web 文章标签： css html

本文链接：https://blog.csdn.net/weixin_54627824/article/details/124294682

版权

web 专栏收录该内容

4 篇文章

订阅专栏

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;# 设置边框均等圆角

}