热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML创建一个登录页面(HTML,CSS)

创建一个HTML,CSS登录页面前端login.html代码:学籍管理登录

创建一个HTML,CSS登录页面

前端

login.html
代码:


<html lang="en">
<head>

<title>学籍管理登录title>

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

head>
<body>
<div class="sign-up-from">
<img src="default.jpg">
<h1>系统登录h1>
<form>
<input type="email" class="input-box" placeholder="请输入账号">
<input type="password" class="input-box" placeholder="请输入密码">
<p><span>span> 我同意服务条款p>
<button type="button" class="signUp-btn">登录button>
<hr>
<p class="or">ORp>

<p>没有账号点击这里 <a href="register.html" >注册a>p>
<p class="cyjt">© 创业锦泰信息科技2020-20xxp>
form>
div>
body>
html>

style.css
代码:

body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background-image: url(background1.jpg);
background-size: cover;
background-position: center;
} .sign-up-from
{
width: 300px;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
background: #fff;
padding: 20px;
margin: 8% auto 0;
text-align: center;
}
.sign-up-from h1
{
color: #1c8abc;
margin-bottom: 30px;
}
.input-box
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none; }
.input-box2
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none; }
.input-box3
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none; }
button
{
color: #fff;
width: 100%;
padding: 10px;
border-radius: 20px;
font-size: 15px;
margin: 10px 0;
border: none;
outline: none;
cursor: pointer; }
.signUp-btn
{
background-color: #1c8abc;
}
.twitter-btn
{
background-color: #21afde;
}
a
{
text-decoration: none; }
hr
{
margin-top: 20px;
width: 80%;
}
.or
{
background: #fff;
width: 30px;
margin: -19px auto 10px;
}
img
{
width: 70px;
border-radius: 30px;
margin-top: -70px;
}
.cyjt
{
font-size: 15px;
color: ##;
}

参考图片:
default.jpg
《HTML--- 创建一个登录页面(HTML,CSS)》
background1.jpg
《HTML--- 创建一个登录页面(HTML,CSS)》
登录页面源码:
【已经个人分享,粉丝可下载】


推荐阅读
  • 一、HTML5新增属性1.1、contextmenucontextmenu的作用是指定右键菜单。<!DOCTYPEhtml><html><head> ... [详细]
  • 在Ubuntu系统中配置Python环境变量是确保项目顺利运行的关键步骤。本文介绍了如何将Windows上的Django项目迁移到Ubuntu,并解决因虚拟环境导致的模块缺失问题。通过详细的操作指南,帮助读者正确配置虚拟环境,确保所有第三方库都能被正确识别和使用。此外,还提供了一些实用的技巧,如如何检查环境变量配置是否正确,以及如何在多个虚拟环境之间切换。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 深入解析HTML5字符集属性:charset与defaultCharset
    本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset,帮助开发者更好地理解和应用这些属性,以确保网页在不同环境下的正确显示。 ... [详细]
  • MySQL 5.7 学习指南:SQLyog 中的主键、列属性和数据类型
    本文介绍了 MySQL 5.7 中主键(Primary Key)和自增(Auto-Increment)的概念,以及如何在 SQLyog 中设置这些属性。同时,还探讨了数据类型的分类和选择,以及列属性的设置方法。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 本文详细介绍了如何使用Python中的smtplib库来发送带有附件的邮件,并提供了完整的代码示例。作者:多测师_王sir,时间:2020年5月20日 17:24,微信:15367499889,公司:上海多测师信息有限公司。 ... [详细]
  • php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • 在Django中提交表单时遇到值错误问题如何解决?
    在Django项目中,当用户提交包含多个选择目标的表单时,可能会遇到值错误问题。本文将探讨如何通过优化表单处理逻辑和验证机制来有效解决这一问题,确保表单数据的准确性和完整性。 ... [详细]
  • AngularJS 进阶指南:第三部分深入解析
    在本文中,我们将深入探讨 AngularJS 的指令模型,特别是 `ng-model` 指令。`ng-model` 指令用于将 HTML 元素与应用程序数据进行双向绑定,支持多种数据类型验证,如数字、电子邮件地址和必填项检查。此外,我们还将介绍如何利用该指令优化表单验证和数据处理流程,提升开发效率和用户体验。 ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • 深入解析 Django 中用户模型的自定义方法与技巧 ... [详细]
  • 本文介绍了如何利用摄像头捕捉图像,并将捕获的图像数据保存为文件。通过详细的代码示例,展示了摄像头调用的具体实现方法,适用于多种应用场景,如安全监控、图像处理等。 ... [详细]
  • HTML5 sever-sent onmessage方法不执行,怎么回事,求大神指点!做服务器广播,页面接收!
    我想实现HTML5sever-sent实现服务器发送消息,然后页面来获取消息,网上找了好多方法,最终找到了一个能用的,但是消息获取页面不执行onmessage方法,求大神指点!本人用.net写的,代 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
author-avatar
许婉玟秀贤
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有