一.效果

二.具体实现

1.index.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <link rel="stylesheet" href="./css/style.css" />

        <link rel="stylesheet" href="css/iconfont.css"/>

        <title>登录界面</title>

    </head>

    <body>

        <div id="bigBox">

            <h1>LOGIN</h1>

            <div class="inputBox">

                <div class="inputText">

                    <span class="iconfont icon-user"></span>

                    <input type="text" placeholder="username" />

                </div>

                <div class="inputText">

                    <span class="iconfont icon-password"></span>

                    <input type="password" placeholder="password" />

                </div>

                <input type="button" value="LOGIN" class="inputButton" />

            </div>

        </div>

    </body>

</html>

2.style.css

body{

    margin: 0;

    padding: 0;

    background-image: url(../img/timg.jpeg);

    background-repeat: no-repeat;

}

#bigBox{

    margin: 0 auto;

    margin-top: 200px;

    padding: 20px 50px;

    background-color: rgba(0,0,0,0.8);

    width: 400px;

    height: 300px;

    border-radius: 10px;

    text-align: center;

}

#bigBox h1{

    color: white;

}

#bigBox .inputBox{

    margin-top: 50px;

}

#bigBox .inputBox .inputText{

    margin-top: 20px;

}

#bigBox .inputBox .inputText span{

    color: white;

}

#bigBox .inputBox .inputText input{

    border: 0;

    padding: 10px 10px;

    border-bottom: 1px solid white;

    background-color: #00000000;

    color: white;

}

#bigBox .inputBox .inputButton{

    border:  0;

    width: 150px;

    height: 25px;

    color: white;

    margin-top: 30px;

    border-radius: 20px;

    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);

}

3.iconfont.css

@font-face {font-family: "iconfont";

  src: url('iconfont.eot?t=1601708272399'); /* IE9 */

  src: url('iconfont.eot?t=1601708272399#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARUAAsAAAAACIAAAAQIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEZIQNATYCJAMMCwgABCAFhG0HORtWB8iemjwJVGYD2yABESTIaRRB/djr3nsXAlCZyKQ8vgpRAftEtuzq6tiY6gpdCSh8/xCedv10Sv8dbM5oXIoh1UA95bYvIG8HF8L5j3unf3WehfNZlssckz91AcYBBTTG9GiKFEhAHlDD2AUt8TCBdtOssI6FRCUBVckcFYibfG4+UM0YZQM1tGqaKxameAWatJbHE87jZfD5+GcrVCmaKnPi8RvBRcDvp+HzTGTvf5NzHgJE09nBllGxCUjiQqXzFCRKbkK0q0p2c2GzFMpUkf8NAqGmbt7oD68QzUxlJ6SsKspFiRwOwa+zAqhy/ctoRiu+4D+kDG6csrNzN0CHze66LJenKBSpMlny9es1tjwp5KdvIpdX9cgTCHKdwnXVKnIW2cxifXKYOZeYS8pTj3E4T1fg43jvEVnSuPbYamz2egyMj+P5y413yMxx7PL1gguyXkXswZSVKwli5lxNFjlrk5YWPoucB2vJbXKLuShGzLS6zUTRJ16Hk3FsDO97Qw6+xRzXacJmm40tN7pe2yu7IgM63h4AZW8/OvnJQRayf8iUw9pXXFPAyaXnDEDjbM/u/euBkk4bD+79b4/95UtC+i+fXRmb2iok6filY791yONvyFpkHZSvozxIY69jr/2P6Db/uBHXbXN6wkJMbytrJO+zUsLMeSZjz6xjFpKDrgHL0pQWDggMDczPsblT/S7l+RBjVcRBH7UeOtmhsGZfsElYz5ptI67RVVkt1n3N1iWFYTNMzSHdcd0gKnC/am3ibuhF4Ut1J4KLo481hQ6nQ42+aSlFmP1S77AZxnU1eqZy1NaTHCdqoc4GXf1EJAaoAdzIX9NR09/IOXezo1aTtqO2hfO6Ji3HzXnORlr+hv6abuYWTRbvsHV+6zST1BezNNSdXzura7AWg0sAGnUr4gAA9QQy/P+/42mn2c/cnp2vqiX4+sb/QxBsJOiubn07ruBvizrWpSYxTTUVoSM0XNXrlF8B8rnKP66GfveGq4c6lxNaDSVQtJiCqtUimpRNaNJhG5q1OgjtNoQu7zBADBHZhnXtAEKvTVB0+wxVrwtoUu5Ck2FvoVlvINDuRAxs2GE5+OhRMcyXwiKqoJriFzJltG2RomFlAuSWl+SL05KAngLFEn6Esrexy2dCYRkUTzFFUsF1kEppihYzpVQIOA6WlDCUUMwIYKHUhieVCj1sbemqK9kUMqUAdZQYlE8KKkIpUI3CV4hRhvaaS6GF9yeAuMqVyCduIFW5U0BiEvz2KfZs2HVAQ5VlnUi30l2iApcDKSkaD6OJMUpRQqAdKrGSDIqwup8AVEjKBm9AXMiDLWpEd1XaLK8ufb8t0M7cuUaJGikfSaBY9W6+RFLJiIsAAA==') format('woff2'),

  url('iconfont.woff?t=1601708272399') format('woff'),

  url('iconfont.ttf?t=1601708272399') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

  url('iconfont.svg?t=1601708272399#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont {

  font-family: "iconfont" !important;

  font-size: 16px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.icon-user:before {

  content: "\e623";

}

.icon-password:before {

  content: "\e75b";

}

HTML+CSS系列:登录界面实现的更多相关文章

  1. html+css实现登录界面

    <!DOCTYPE html> <style type="text/css"> body{ background-color: #555555; } #ti ...

  2. div+css模仿登录界面

    我的代码,这种方式形成了遮罩层,遮罩层的"登录"按钮仍可被点击,非我想要的. <!DOCTYPE html> <html lang="en"& ...

  3. CSS样式案例(2)-制作一个简单的登录界面

    首先来张完工的效果图. 一.html文件如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  4. 运用HTML5+CSS3和CSS滤镜做的精美的登录界面

    原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...

  5. 【WPF学习笔记】之如何传递第一个登录界面的值到下一个页面显示：动画系列之（三）

    ... ... 承接系列(二) 在之前的登录后台已设置发送到主界面: 在主界面接收传递的值: using System; using System.Collections.Generic; using ...

  6. Python图形编程探索系列-07-程序登录界面设计

    设计任务 初步设计程序登录界面,详细分析设计步骤. 程序详细分析 基本框架设计 import tkinter as tk import tkinter.messagebox root = tk.Tk( ...

  7. EasyUi – 2.布局Layout + 3.登录界面

    1.页面布局 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...

  8. 基于控制权限和登录验证跳转的django登录界面的实现

    django框架提供了出去登录和退出系统的login和logout的视图函数,本实现中使用系统自带的是视图函数.需要在settings.py,urls.py,views.py和模板文件等几个方面进行考 ...

  9. servlet登录界面进行用户名和密码验证

    一.建立LoginServlet项目并建立如下目录 二.在Login.html中编写登录界面代码 三.在css文件中新建login.css文件 四.在src文件中添加LoginServlet.java ...

随机推荐

  1. Kafka入门（3）：Sarama生产者是如何工作的

    摘要 在这一篇的文章中,我将从Sarama的同步生产者和异步生产者怎么创建开始讲起,然后我将向你介绍生产者中的各个参数是什么,怎么使用. 然后我将从创建生产者的代码开始,按照代码的调用流程慢慢深入,直 ...

  2. Python 批量下载BiliBili视频 打包成软件

    文章目录 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人,我给大家 ...

  3. 用Python发一封图文并茂的邮件

    最近使用了不少通讯工具的接口, 比如企业微信机器人,钉钉,微信公众号的接口(未认证的订阅公众号),相对于邮件来说,它们的表现形式太弱.比如没有更丰富的版本方式.当然了,并不是说表现形式越棒就是约好的通 ...

  4. app转iap

    ios打包ipa的四种实用方法(.app转.ipa) http://blog.csdn.net/oiken/article/details/49535369 手动压缩改后缀方式 这种方式与4.1的方法 ...

  5. unity3d插入android有米广告

    有米官网:http://www.youmi.net/register?r=MTI0MDg= 国内的广告,我觉得万普和有米还不错,我也只试了这两个,其他的都是看评价的,呵呵~~~首先我们去有米官网注册一 ...

  6. HTTPS建立过程

    由于HTTPS建立过程经常忘记,固记录 HTTPS建立流程 客户端发起SSL连接 服务端发送证书(证书中包含了服务端公钥) 客户端根据已有证书判断是否是可信任的(客户端决定是否继续) 服务端要求客户端 ...

  7. 使用zabbix监控sql server的发布订阅

    (一)背景 个人在使用sql server时,用到了sql server的发布订阅来做主从同步,类似MySQL的异步复制.在发布订阅环境搭建完成后,最重要的就是如何监控复制的状态了,sql serve ...

  8. 电子邮箱有哪些隐藏技能，读懂了效率提升N倍！

    很多人将邮箱作为常见的通讯工具,然而,大部分职场人只了解其五分之一的功能.电子邮箱还有很多隐藏技能,身为商务精英的你,必须往下看看哦!今天跟随TOM邮箱小编导,来挖掘下邮箱的潜藏技能吧~ 作为经常外出 ...

  9. linux下部署python项目到jenkins

    环境:linux+jenkins+tomcat+git+python3.7 1.安装jdk 上传安装包到usr/local 解压 配置环境变量 vim /etc/profile export JAVA ...

  10. 深入理解Java之装箱与拆箱

    一.Java数据类型 1.在说装箱与拆箱之前,先说一下Java的基本数据类型,Java从数据类型上可以划分为值类型与引用类型,值类型是四类八种,分别是: 整数型:byte̵,short̵,int̵,l ...