HTML--- 创建一个登录页面（HTML，CSS）

创建一个HTML，CSS登录页面

前端

 <!DOCTYPE html><html lang="en"><head><title>学籍管理登录</title><!-- Bootstrap core CSS --><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><input type="checkbox" checked ='checked'></span> 我同意服务条款</p><button type="button" class="signUp-btn">登录</button><hr><p class="or">OR</p><!-- <button type="button" class="twitter-btn">注册</button> --><p>没有账号点击这里   <a href="register.html" >注册</a></p><p class="cyjt">© 创业锦泰信息科技2020-20xx</p></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: #aaa;}

参考图片：
default.jpg

background1.jpg

登录页面源码：
【已经个人分享，粉丝可下载】

HTML--- 创建一个登录页面（HTML，CSS）相关推荐

用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...
android如何新建登录界面,在android中创建一个登录页面
尝试这个 public class Login extends Activity { /** Called when the activity is first created. */ private ...
uniapp写一个登录页面
很高兴为您解答,可以参考以下步骤来写一个登录页面: 创建一个uniapp项目,并在项目中创建一个登录页面: 在登录页面中添加用户名和密码输入框,以及一个登录按钮: 在登录按钮的点击事件中,添加验证用户 ...
vue 创建一个登录界面
vue创建一个登录界面 (1)创建登录界面和主页 (2)配置路由 (3)配置main.js (4)配置App.vue (5)登录页面 (6)主页面用到的组件参考链接 (1)创建登录界面和主页打开 ...
使用Vue写一个登录页面
上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面. 1.构建项目的目录 2.App.vue <template><div id="app"&g ...
【每日一练】108—一个登录页面的实现
写在前面今天我们来写一个登录页面,这个在很多企业系统上都会用到,当然,一些网站上也用应用到,所以,它的应用场景还是很多的. 现在,我们一起来看一下它的最终效果: 以下是实现的源码. HTML代码: ...
使用TARO框架实现一个登录页面
使用 TARO 框架实现一个登录页面,你需要做以下几件事: 创建一个新的 TARO 项目,在项目根目录下运行 taro init 命令. 在项目的 src 目录下创建一个新的组件,作为登录页面. 在组 ...
vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
微信小程序创建一个空白页面
小程序创建一个空白页面还是比较简单的. pages文件夹下就是一个个页面组件想要新增页面组件则找到app.json里面的pages数组,然后添加一组数据即可得到一个页面组件了. 然后就会生成一堆文件 ...
一个登录页面的测试用例
转载自:http://blog.csdn.net/dml1220/article/details/44150807 具体需求: 有一个登录页面, (假如上面有2个textbox, 一个提交按钮. 请针 ...

HTML--- 创建一个登录页面（HTML，CSS）

前端

HTML--- 创建一个登录页面（HTML，CSS）相关推荐

最新文章

热门文章