HTMLCSS登录界面及讲解

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

}

HTMLCSS登录界面及讲解相关推荐

【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50589570 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
jquery实现登录成功界面_jquery实现用户登陆界面(示例讲解)
实例如下所示: var cnresu = false; $(function(){ $("input[name='uname']").blur(function(){//blur从 ...
python自动登录教程_python实现校园网自动登录的示例讲解
因为最近想用树莓派搞个远程监控系统,又因为学校的网需要从网页登录而树莓派又不方便搞个显示器带着,所以寻思着搞个能够自动登录校园网的脚本程序,省去了每次都要打开浏览器输入账号密码的烦恼. 1.工具火狐 ...
python自动登录校园网密码_python实现校园网自动登录的示例讲解
因为最近想用树莓派搞个远程监控系统,又因为学校的网需要从网页登录而树莓派又不方便搞个显示器带着,所以寻思着搞个能够自动登录校园网的脚本程序,省去了每次都要打开浏览器输入账号密码的烦恼. 1.工具火狐 ...
python校园网登录_python实现校园网自动登录的示例讲解
python实现校园网自动登录的示例讲解来源:中文源码网浏览: 次日期:2018年9月2日 [下载文档: python实现校园网自动登录的示例讲解.txt ] (友情提示:右键点上 ...
qt登录界面跳转_每天10分钟，木辛老师带你实战慕课软件开发：登录界面开发第2课...
软件实战开始,快速提供编程能力:通过实战,分析产品需求,梳理设计需求,提升项目分析和架构的能力.快点跟着木辛老师一起学习吧! 请点击右上角"关注"按钮关注我们哟:跟着木辛老师学习P ...
qq登录界面句柄_别小看QQ邮箱测试，80%的测试新手都不能写出完整的测试用例~...
对于很多刚进入测试行业的新手来说,由于自身的工作经验不足,虽有测试基础知识傍身,但仍然很难将测试用例写的尽善尽美.因此,学习别人的测试经验,将是你成为测试达人的必经之路. 今天,我们就以QQ邮箱为例, ...
hbuilder怎么做登录界面_新手会计不懂如何报税？一套标准网上报税流程演示，教你怎么纳税申报...
小张刚做会计没多久,就赶上公司要进行纳税申报,小张这次慌了神!自己做账刚入门,报税这块完全没接触过,怎么弄? 小张在做会计的朋友指导下完成了这次申报,一起看看是怎么操作的吧! 网上纳税申报标准流程一 ...
androidstudio做登录界面_Vue-cli+Element-ui实现后台管理系统（二）实现后台登录功能...
前言接上文,本文主要讲解vue+element-ui后台管理系统的登录功能的实现,api接口这块如果对后端技术以及node的实现不太了解的情况下,可以写出假数据进行模拟操作~ 一.创建登录文件并配置 ...

HTMLCSS登录界面及讲解

页面效果如下：

首先是login.html

login.html效果如下

源码剖析如下：

以下是login.css的内容：

源码剖析如下：

HTMLCSS登录界面及讲解相关推荐

最新文章

热门文章