使用Html做一个简单的登陆页面

这篇具有很好参考价值的文章主要介绍了使用Html做一个简单的登陆页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

绪论

一、新建一个html项目

二、制作整体框架

三、使用CSS进行修饰

四、更新内容


绪论

html作为一个常用的前端语言,使用的人群范围是很大的;

如果你想要成为一个前端工程师,那必不可少的就要做一个登陆页面;

登录页面一般就是账号和密码,另外还需要验证码验证需求,这三个常见的属性是一个项目登陆界面重要组成要素;

本篇是要做一个简单的登录页面,用来体验Html 的用法和效果,所以就不使用验证码了,因为验证码在一个项目中是放在后端的,这次就不做演示;

一、新建一个html项目

html项目在哪里建都可以,vscode、idea甚至在网页打开一个html在线编译器都可以;

如下面的代码,这一步很简单;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆页面</title>
</head>
<body>
 <p>hello world!</p>
</body>
</html>

二、制作整体框架

1、首先使用form做一个表单,放入Login文件的<body>中,代码如下:

<form action="">
账号: <input type="text" name="user"><br>
密码: <input type="password" name="password">
</form>

效果如下;

使用Html做一个简单的登陆页面

 2.账号密码有了之后,下一步就需要登录了,登录是一个按钮,按钮是一个<button>标签

我们现在加上试试;

   <form action="">
        账号: <input type="text" name="user"><br>
        密码: <input type="password" name="password">   
        <button> 登录</button> 
    </form> 
   

效果如下:

使用Html做一个简单的登陆页面

 有了登录按钮后,在我们的认知下,肯定按了登录会跳到下一个页面,但是今天只是展示做一个简单的登陆界面,就不写跳转和账号密码验证了;

但是现在这个登录界面很难看,我们需要对他美化一下;

三、使用CSS进行修饰

不好意思兄弟们,本人没有美感,尽力了,你们自己找好看的点自己修改;

使用Html做一个简单的登陆页面

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆页面</title>
<style>
    
	body {
		background-color: #74aabc;
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.8e5e293cae342149832fff96bb4c8caa?rik=dbonSUJuDVqx5A&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f8%2fd7%2f6527dce099.jpg%3fdown&ehk=E9%2bVucd%2fent1hsPcwHCre695jRwtoRQJzu1ymZuXJL0%3d&risl=&pid=ImgRaw&r=0);
		background-repeat: no-repeat;
		background-size: cover; 
 
	}
	.login {
		width: 400px;
		height: 200px;
		margin: auto;
		margin-top: 150px;
		border-radius: 5px;
		overflow: hidden;
	}
   
	.input {
		width: 300px;
		height: 30px;
		padding-left: 10px;
		margin-top: 20px;
		margin-left: 50px;
	}
	.button {
		width: 300px;
		height: 35px;
		width: 300px;
		height: 40px;
		margin-top: 20px;
		margin-left: 50px;
		border-radius: 5px;
		background-color: #64a9d9;
		cursor: pointer;
		color: #fff;
	}
	
</style>
</head>
<body>
   <div class="login">
        <form action="" >     
             <input   class="input" type="text" name="user" placeholder="账号"><br>  
             <input  class="input" type="password" name="password" placeholder="密码">                             
        </form> <button class="button"> 登录</button> 
   </div>
           
</body>
</html>

前端怎么说呢,能做前端的人都是一个有美感的工程师;

很明显,我不是,哈哈哈

看着图一乐就行

四、更新内容

真没想到这个博文的访问量1.5W,所以我又做了一个登陆页面,虽然不算特别好看,但是要比上个好点,哈哈哈。直接上图,上代码。

使用Html做一个简单的登陆页面文章来源地址https://www.toymoban.com/news/detail-455773.html

<!DOCTYPE html>
<html>
<head>
    <title>登陆</title>
    <style>
        body {
            background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.8e5e293cae342149832fff96bb4c8caa?rik=dbonSUJuDVqx5A&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f8%2fd7%2f6527dce099.jpg%3fdown&ehk=E9%2bVucd%2fent1hsPcwHCre695jRwtoRQJzu1ymZuXJL0%3d&risl=&pid=ImgRaw&r=0);
		    background-repeat: no-repeat;
            font-family: Arial, sans-serif;
        }
        
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 100px;
        }
        
        h1 {
            text-align: center;
        }
        
        input[type="text"],
        input[type="password"] {
            width: 95%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .forgot-password {
            text-align: right;
            margin-bottom: 10px;
        }
        
        .social-login {
            text-align: center;
            margin-top: 20px;
        }
        
        .social-login a {
            display: inline-block;
            margin: 0 5px;
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>登录</h1>
        <form>
            <input type="text" id="username" placeholder="用户名/邮箱">
            <input type="password" id="password" placeholder="密码">
            <label>
                <input type="checkbox" id="remember-me"> 记住我
            </label>
            <div class="forgot-password">
                <a href="#">忘记密码?</a>
            </div>
            <input type="submit" value="登录">
        </form>
        <div class="social-login">
            <a href="#">使用微信登录</a>
            <a href="#">使用QQ登录</a>
            <a href="#">使用支付宝登录</a>
        </div>
       
    </div>
    
</body>
</html>

到了这里,关于使用Html做一个简单的登陆页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

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

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

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

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

    2024年02月10日
    浏览(58)
  • 使用JavaBean+Servlet+JSP实现一个简单的后台登陆和注册功能

    JavaBean泛指java的一些基本组件,类似domain,service,utils等 Servlet是运行在服务器端可以接收客户端 请求 并向客户端发送 响应 的一个 Java类 ,servlet的主要职责有三个,分别是(1)获取请求,接收请求参数;(2)调用业务逻辑;(3)页面导航,返回数据。 JSP是一种使用Java语言

    2024年02月04日
    浏览(48)
  • 使用HTML+CSS写一个静态页面

    刚开始学习前端,在仅使用HTML和CSS的情况下,也可以写出一个页面,使用HTML对页面的内容进行架构,再此基础上使用CSS对内容进行美化。其中涉及了许多HTML和CSS的知识点,定位 浮动 链接 等,修改字体、图片大小、背景颜色、鼠标样式、鼠标与页面的交互、行内元素与块元

    2024年02月11日
    浏览(53)
  • 使用HTML+CSS制作一个简单的网页

    简单学习了一下HTML和CSS,制作了下面这个网页(第一次做还在学习中),里面包含一些基础的布局包括 导航条、分页栏、悬浮列表 等内容。 网页预览 (网页中的图片与图标均来自阿里巴巴矢量图标库) CSS代码 里面包含悬浮、画面自适应等效果

    2024年02月11日
    浏览(71)
  • Android实现简单的登陆页面(最新版2023详细图文教程

    目录   1.打开android studio软件  2.新建empty activity 3.看个人配置填(finish)  4.左侧找到res-layout(页面布局)  5.先设置页面布局,这里采用线性布局  7.设置头文本    --文本展示标签  8.用户名与密码--可编辑文本标签 9.提交按钮 10.整体代码 LinearLayout xmlns:android=\\\"http://schemas.an

    2024年02月16日
    浏览(61)
  • javaee springMVC的简单使用 jsp页面在webapp和web-inf目录下的区别

    放在webapp目录下的jsp页面可以直接通过URL访问到,放在web-inf目录下的页面,只能通过程序的转发或者重定向访问。

    2024年02月09日
    浏览(39)
  • 使用原生js写一个简单的注册登录页面

    目录 1.注册页面 2.登录页面 1.首先是我们的注册页面 这是我们的html骨架  这是css样式 下面就是我们注册的js封装了         这里的函数调用直接写到了html里面的button事件上面了 这就是我的注册页面 ,当然各位要是觉得不好看也可以换成自己喜欢的图片; 2.登陆页面      

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

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

    2024年02月06日
    浏览(47)
  • idea新建第一个Javaweb项目,并运行jsp页面(保姆版)

    第一步点击双击打开idea,然后点击 New Project.名字,项目那些自己看着写。然后找一个Maven Archetye,然后点击add,找org.apache.maven.archetypes:maven-archetype-webapp,然后点击creat.图片演示如下 当然你还要去安装JDK,以及配环境变量,这里不讲了。点creat后进来看到的界面是这样的 然后

    2024年02月03日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包