热门标签 | 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)》
登录页面源码:
【已经个人分享,粉丝可下载】


推荐阅读
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社区 版权所有