初学html，任务2：写一个简单的登陆/注册界面
先在body中把最基础的标签写出来
现在页面运行出来是这样的
就是一个没有任何样式的基础界面：
接下来我们为这些标签加上样式
首先还是让页面所有元素的padding和margin都设置为0，
清除浏览器本身对界面的影响：
然后加上背景图，并且将字体设置为微软雅黑
接下来给整个登陆框设置样式
并且让登陆框绝对居中，会使用到绝对位置属性
给h1标签加上样式
给两个输入框设置样式，border给输入框设置边框线样式、粗细和颜色；
border-radius属性给边框设置圆角角度，像素越接近10，弧度越大
给登陆和注册按钮设置样式，
样式设置完，界面就是这样的
代码实现如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style>
*{margin:0;
padding:0;
box-sizing:border-box;
}
body {
background: url(./img/timg.jpg) no-repeat center 0px fixed;
background-size: cover;
font-family: "微软雅黑", sans-serif;
}
.login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width:300px;
height:300px;
}
.login h1 {
color:#555555;
text-shadow: 0px 10px 10px #CDC673;
letter-spacing:2px;text-align:center;
margin-bottom:20px;
}
input{
padding:10px;
width:100%;
color:white;
margin-bottom:10px;
background-color:#555555;
border: 1px solid black;
border-radius:5px;
letter-spacing:2px;
}
form button{
width:100%;
padding:10px;
margin-bottom:10px;
background-color:#CDC673;
border:1px solid black;
border-radius:5px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="headtop"></div>
<div class="login">
<h1>Login</h1>
<form action="" method="post">
<input type="text" name="user" placeholder="用户名" required="required">
<input type="password" name="password" placeholder="密 码" required="required">
<button type="submit">登录</button>
<button type="submit" onclick="location='zhuce.html'">注册</button>
</form>
</div>
</body>
</html>
若要实现页面跳转可以加入a标签，使跳转到注册界面。
初学html，任务2：写一个简单的登陆/注册界面的更多相关文章
- django写一个简单的登陆注册
要写这个,前提还是需要知道三个知识: 一个是urls.py,它是写我们的路由关系的,之前我写了通过wsgiref写一个简单的服务端,也用到了路由,就是 请求过来的url和视图函数的对应关系. 二是就是 ...
- 用Html写一个简单的登陆界面
<!DOCTYPE html> <html> <title>登陆页面</title> <head> <meta charset=&qu ...
- Java写一个简单学生管理系统
其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...
- 用Python写一个简单的Web框架
一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...
- 如何写一个简单的http服务器
最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...
- 如何写一个简单的shell
如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 一步一步写一个简单通用的makefile(三)
上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...
- （2）自己写一个简单的servle容器
自己写一个简单的servlet,能够跑一个简单的servlet,说明一下逻辑. 首先是写一个简单的servlet,这就关联到javax.servlet和javax.servlet.http这两个包的类 ...
随机推荐
- 分布式 基本理论 BASE
比起CAP的生硬来, 我更加喜欢BASE.BASE 显得更加好理解.尽管BASE 这个名字本身有迎合语言习惯的恶臭味,为什么不是缩写为 BaSsEc 呢? 其实大部分系统是可以 同时 CAP 的, 因 ...
- python-day3集合、文件读写、函数
@集合运算 s.union(t) s | t 返回一个新的 set 包含 s 和 t 中的每一个元素 s.intersection(t) s & t 返回一个新的 set 包含 s 和 t 中 ...
- leetcode978
class Solution(object): def maxTurbulenceSize(self, A: 'List[int]') -> int: n = len(A) if n == 1: ...
- ubuntu搭建svn服务器并htpp访问版本库并svn与web同步
Ubuntu搭建SVN服务器多版本库 1 介绍 Subversion是一个自由,开源的版本控制系统,这个版本库就像一个普通的文件服务器,不同的是,它可以记录每一次文件和目录的修改情况.这样就可 ...
- PowerDesigner工具将表字段转成java实体
首先将数据库的表导出为SQL文件.下载安装PowerDesigner工具. 下面以图文的形式讲解: 图 (1) 图 (2) 图 (3) 图 (4) 图 (5) 图 (6) 图 ...
- PuTTY窗口看不到鼠标解决方法
PuTTY终端工具无法清晰看到鼠标如何处理?通常是因为PuTTY背景色和鼠标颜色相近导致.这里介绍一种通过调整鼠标状态解决方法.说明:文末附PuTTY最新版本下载地址. 操作步骤(Windows10) ...
- css 动态线条制作方案
利用 :before or :after 在元素中添加线条样式: 设置样式的过渡效果属性值: 改变width,left,transform等属性值,设置鼠标移入:hover 效果: li: ...
- xftp无法用root账号登录问题
编辑vim /etc/ssh/sshd_config文件 把PermitRootLogin Prohibit-password 添加#注释掉 新添加:PermitRootLogin yes 更改Per ...
- 源码解析之HashMap源码
关于HashMap的源码分析,网上已经有很多写的非常好的文章了,虽然多是基于java1.8版本以下的.Java1.8版本的HashMap源码做了些改进,理解起来更复杂点,但也不脱离其桶+链表或树的重心 ...
- 3D Math Keynote 3
[3D Math Keynote 3] 1.球的表面积 Surface.球的体积 Volumn: 2.当物体旋转后,如果通过变换后的旧AABB来顶点来计算新的AABB顶点,则生成的新AABB可能比实际 ...