HTML+CSS登陆界面实例

HTML+CSS登陆界面实例登录界面截图项目代码仓库地址项目的代码放在了github的代码仓库当中:点我项目访问地址将登录界面项目部署在了github上面:点我项目代码解析项目的界面简析主要部分是Login的模块,包括username文本框和password文本框以及Login的按钮将Login模块进行居中,并且设置背景半透明添加背景框项目基本框架html代码解析大写的Login英文字母采用标题…

大家好,又见面了,我是你们的朋友全栈君。

登录界面截图

在这里插入图片描述

项目代码仓库地址

项目的代码放在了github的代码仓库当中:点我

项目访问地址

将登录界面项目部署在了github上面:点我

项目代码解析

项目的界面简析

  • 主要部分是Login的模块,包括username文本框和password文本框以及Login的按钮
  • 将Login模块进行居中,并且设置背景半透明
  • 添加背景框

项目基本框架html代码解析

  • 大写的Login英文字母采用标题实现
    在这里插入图片描述
<h1>Login</h1>
  • username输入框,采用文本框实现
    在这里插入图片描述
<input type="text" placeholder="username" name="username">
  • password输入框,采用password文本框实现密码回显为字符*
    在这里插入图片描述
<input type="password" placeholder="password" name="password">
  • 登陆按钮,采用button实现
    在这里插入图片描述
<button type="submit">Login</button>
  • 基本框架的代码
<html>

<head>
    <meta chatset="UTF-8">
</head>

<body>
    <form action="#" method="POST">
        <div id="login-box">
            <h1>Login</h1> <!-- Login的大标题 -->

            <div class="form">
                <div class="item"> <!-- username部分 -->
                    <i></i> <!-- 将来用来绘制username前面的图标 -->
                    <input type="text" placeholder="username" name="username"> <!-- 用文本框实现的username的输入 -->
                </div>

                <div class="item"> <!-- password部分 -->
                    <i></i> <!-- 将来用来绘制password前面的图标 -->
                    <input type="password" placeholder="password" name="password"> <!-- 用password文本框实现的密码输入 -->
                </div>

            </div>
            
            <button type="submit">Login</button> <!-- 用button实现的Login登陆按钮 -->
        </div>
    </form>
</body>

</html>

项目美化CSS代码解析

  • Login模块的居中显示
#login-box { 
   
    border: 1px solid blue;
    width: 30%;
    text-align: center;
    margin: 0 auto;
    margin-top: 15%;
    background: #00000080;
    padding: 20px 50px;
}
  • Login标题的颜色控制
#login-box h1 { 
   
    color: white;
}

在这里插入图片描述

  • usernamepassword窗口进行修改
#login-box .form .item input { 
   
    width: 200px; /* 设置合适的宽度 */
    border: 0; /* 首先将边界取消,方便下面修改下部边界宽度 */
    border-bottom: 5px solid white; /* 将下边界进行修改,显示出横线效果 */
    font-size: 18px; /* 将字体适当的变大加粗 */
    background: #ffffff00; /* 将输入框设置为透明 */
    color: white; /* 上面的文本颜色设置为白色,但是placeholder的颜色要单独设置 */
    padding: 5px 10px; /* 为了placeholder的内容不是顶格显示,增加内部边界 */
}
  • 添加usernamepassword前面的矢量图(点我)
<!-- 直接将前面的i用下面的代码替换 -->
<i class="fa fa-user-circle" aria-hidden="true"></i>
<i class="fa fa-key" aria-hidden="true"></i>
  • 将添加的矢量图进行颜色和大小的设置
#login-box .form .item i { 
   
    color: white;
    font-size: 18px;
}

在这里插入图片描述

  • button进行美化
#login-box button { 
   
    border: 0; /* 取消按钮的边界 */
    width: 150px; /* 设置合适的按钮的长和宽 */
    height: 30px;
    margin-top: 18px; /* 设置合适的上部外框的宽度,增加与上面的password框的距离 */
    font-size: 18px; /* 修改按钮文字的大小 */
    color: white; /* 修改按钮上文字的颜色 */
    border-radius: 25px; /* 将按钮的左右边框设置为圆弧 */
    background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); /* 为按钮增加渐变颜色 */
}

在这里插入图片描述

  • 增加背景图
body { 
   
    background: url("../img/12345.jpg") center; /* 首先增加背景图 */
    background-size: 100% auto; /* 设置背景的大小 */
    background-repeat: no-repeat; /* 将背景设置为不重复显示 */
}

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/131869.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 基于域的分解机(FFM)理论介绍及libFFM源码解析

    基于域的分解机(FFM)理论介绍及libFFM源码解析符号说明:x表示样本特征数据x表示样本特征数据y表示样本目标数据y表示样本目标数据第i个训练样本为(xi,yi),为了方便也可以用x=xi表示第i个样本第i个训练样本为\left(x_{i},y_{i}\right),为了方便也可以用x=x_{i}表示第i个样本1基于域的分解机模型(FFM)1.1线性模型∅(w,x)=wTx=w0+∑j∈C1wjxj−−−−(1)\varnothi

  • centos7 top命令_top命令查看cpu使用率超过100%

    centos7 top命令_top命令查看cpu使用率超过100%top命令Linuxtop命令用于实时显示process的动态。top参数详解第一行,任务队列信息**系统当前时间:**13:52:56**系统开机后到现在的总运行时间:**up66

  • Java课设:学生管理系统

    Java课设:学生管理系统文章目录StudentManagerStudentManagerMain.javaStuInfo.javaClassInfo.javaScoreInfo.javaAdd.javaDelete.javaStudentManager查询学生的个人基本信息,查询课程表、选课情况,查询课程的成绩信息。其中课程表及选课信息和成绩信息无法改动,个人基本信息可以添加或者删除。这是一个比较简单的管理系统,具…

  • 【实践与问题解决38】win10桌面图标变成一个空白图标「建议收藏」

    【实践与问题解决38】win10桌面图标变成一个空白图标「建议收藏」1问题描述:桌面部分图标显示空白但是点击可以正常打开程序(快捷方式没有改变路径依旧可以打开程序)2问题原因:Windows10系统中,为了加速图标的显示,当第一次对图标进行显示时,系统会对文件或程序的图标进行缓存。之后,当我们再次进入到某个文件夹需要显示该图标时,系统会直接从缓存中读取数据,从而大大加快显示速度。也正因为如此,当缓存文件出现问题时,就会引发系统图标显示不正常。3解决方案:3.1方案一:只需要将有问题的图标缓存文件删除掉,让系统重新建立图标缓存即可。第一步:

  • Chrome for Android在Chromium代码库中的提交patch「建议收藏」

    Chrome for Android在Chromium代码库中的提交patch

  • asp.net页面的AutoEventWireup=”true”属性设置

    asp.net页面的AutoEventWireup=”true”属性设置1、如果设置AutoEventWireup=”true”,那么页面首次加载的时候isPostback=false;会自动执行Page_Load方法触发页面的事件时(如按钮单击),也会先执行Page_Load方法(只是这个时候的isPostback=true),接着再去执行对应的事件2、如果设置AutoEventWireup=”false”,那么Page_Load方法将不会被执行,触发页面的事

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号