用html实现一个静态登陆页面-可根据需求更改样式

这篇具有很好参考价值的文章主要介绍了用html实现一个静态登陆页面-可根据需求更改样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、创建html文件,vscode下载相关插件

我们先选择一个文件夹创建login.html,.之前的文件命无所谓,.之后就必须为html或者htm。
在编辑改文件输入!且出现提示后按回车或按tab快捷生成基础代码。
用html实现一个静态登陆页面-可根据需求更改样式
用html实现一个静态登陆页面-可根据需求更改样式
然后我们下载一个可以方便我们开发的插件。
用html实现一个静态登陆页面-可根据需求更改样式
搜索之后点击一下然后下载即可。

二、编写html标签

我们以QQ登陆为例,需要分别输入账号和密码,还有输入完账号密码之后需要登陆,就还有一个登陆按钮,也就是总共3个Input框。
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="login">
        <form action="">
            <h2>我来组成标题</h2>
            <span>登陆:</span><input type="text">
            <span>密码:</span><input type="text">
            <span><input type="button" value="登陆"></span>
        </form>
    </div>
</body>
</html>

效果如下:
用html实现一个静态登陆页面-可根据需求更改样式
一个基本框架就搭建好了,现在我们就需要用css代码给页面进行美化。

三、css代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: url('./bgc.png') no-repeat;
            background-size: 100%;
            font-family: '宋体';
        }

        a {
            text-decoration: none;
        }

        .login {
            width: 500px;
            height: 300px;
            background-color: rgba(150,143,172,0.3);
            margin: 150px 100px;
            text-align: center;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 2px 2px 5px #000; /*阴影效果*/
        }

        .fstInput, .sndInput {
            width: 250px;
            height: 25px;
            color: rgb(61,54,64);
            text-align: center;
            outline: none;
            margin: 15px;
            background-color: rgba(0, 0, 0, 0.0);
            border: 0;
            border-bottom: 2px solid black;
            transition: 1s; /*宽度变化的过度时间*/
        }

        /* 过度动画,点击输入账号密码框之后会使输入框的下边框扩大 */
        .fstInput:focus, .sndInput:focus {
            width: 300px;
            border-bottom: 2px solid gray;
        }

        .register {
            display: block;
            margin-top: 10px;            
        }

        .btn {
            width: 100px;
            height: 30px;
            border-radius: 15px;
            border: 0;
            background-color: rgb(153,139,152);
        }
    </style>
</head>
<body>
    <div class="login">
        <form action="">
            <h2>遇事不决,可问春风</h2>
            <span><input class="fstInput" type="text" placeholder="请输入账号"></span><br>
            <span><input class="sndInput" type="password" placeholder="请输入密码"></span><br>
            <span class="register">还没有账号?<a href="">立即注册</a></span><br>
            <span><input class="btn" type="button" value="登陆"></span>
        </form>

    </div>
</body>
</html>

效果如图:
用html实现一个静态登陆页面-可根据需求更改样式

四、根据自己需求需要更改的位置

首先就是背景图片,可换成自己的其他背景。根据文件名和路径修改下方的background:url()即可
用html实现一个静态登陆页面-可根据需求更改样式
修改了背景图片那就需要让输入框的位置更适合背景。修改.login里面的margin属性即可,或者需要更改整个表单的大小,也可以修改.login里面的width和height属性。
用html实现一个静态登陆页面-可根据需求更改样式文章来源地址https://www.toymoban.com/news/detail-443281.html

到了这里,关于用html实现一个静态登陆页面-可根据需求更改样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 写一个简单的静态html页面demo,包含幻灯片

    效果图: 代码如下,图片文件可自行更换:

    2024年02月11日
    浏览(56)
  • html + css 实现淘宝首页(静态页面)

    html + css 实现淘宝首页(静态页面) 待续。。。 效果图: html代码如下: css代码如下:

    2024年02月11日
    浏览(50)
  • 1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。

            注意:         1.背景颜色用ppt的取色器来获取:                 先点击ppt的形状轮廓,然后点击取色器,吸颜色,然后再点击形状轮廓的其他轮廓颜色,即可获取到对应颜色。           2.表格间的灰色线是在th和td中用border属性设置的;         3.在js中拼

    2024年02月16日
    浏览(47)
  • 功能需求-根据页面生成pdf,pdf不需要下载只需把文件流上传到服务器

    根据自身当下技术的水平和实际情况,做一个简单的记录。 在项目中有采购合同和销售合同,这些合同新建好之后都需要有人去审核,审核通过后需要把合同生成一个pdf文件然后后端给保存起来 在项目中有采购合同和销售合同,这些合同新建好之后都需要有人去审核,审核

    2024年02月13日
    浏览(48)
  • 使用springboot实现查询更改数据库需求

    使用springboot实现简单的数据库数据交互请求 实现:通过springboot框架,实现接口 /user/view; 查询数据库user表中的user数据, /user/insert; 新增user数据到user表 /user/update 修改user的对应user信息 集成规范数据响应: 功能实现: 定义简单的user类并添加对应的user表,用于数据交互 创建数据访问

    2024年02月16日
    浏览(41)
  • nginx布署html静态页面

    Cat /etc/nginx/nginx.conf 找到 80端口下面的路径; root         /usr/share/nginx/html; 将html找到这个路径下面; DOS: E:vsproject.vscodescp login.html root@IP:/root Cd root下: [root@instance-ws9c56wt ~]# cp login.html /usr/share/nginx/html [root@instance-ws9c56wt ~]# cd /usr/share/nginx/html [root@instance-ws9c56wt html]# ll

    2024年02月15日
    浏览(49)
  • 制作一个简单HTML旅游网站(HTML+CSS+JS)无锡旅游网页设计与实现8个页面

    👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点,学生网页作业源码,制作水平

    2024年02月10日
    浏览(60)
  • HTML+CSS实训——Day02——仿一个网易云音乐的登陆界面

    仓库链接:https://github.com/MengFanjun020906/HTML_SX 今天要继续完成我们的音乐软件了,昨天写完了封面,今天该完成开屏广告和登陆界面了。 具体是啥图片我就不在这里展示了,这是一个图片界面加上跳过按钮。 在css里面加入这些 感觉更美观了 html css HTML CSS

    2024年02月06日
    浏览(48)
  • 根据源码,模拟实现 RabbitMQ - 从需求分析到实现核心类(1)

    目录 一、需求分析 1.1、对 Message Queue 的认识 1.2、消息队列核心概念 1.3、Broker Server 内部关键概念 1.4、Broker Server 核心 API (重点实现) 1.5、交换机类型 Direct 直接交换机 Fanout 扇出交换机 Topic 主题交换机 1.6、持久化 1.7、网络通信 通信流程 远程调用设计思想 1.8、模块设计图

    2024年02月12日
    浏览(43)
  • 利用服务器上宝塔快速部署静态HTML页面

    很多人都想知道怎么利用服务部署纯静态资源下面,下面给出教程: 1.购买腾讯云或者阿里云服务器,在服务上安装宝塔(较为简单,可以搜如何安装) 2.进入宝塔,点击左边网站,在点击添加站点 3.点击后弹出如图所示,域名填写自己购买的域名,如果没有则填服务器的

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包