先在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：写一个简单的登陆/注册界面的更多相关文章

  1. django写一个简单的登陆注册

    要写这个,前提还是需要知道三个知识: 一个是urls.py,它是写我们的路由关系的,之前我写了通过wsgiref写一个简单的服务端,也用到了路由,就是 请求过来的url和视图函数的对应关系. 二是就是 ...

  2. 用Html写一个简单的登陆界面

    <!DOCTYPE html> <html> <title>登陆页面</title> <head> <meta charset=&qu ...

  3. Java写一个简单学生管理系统

    其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来 ...

  4. 用Python写一个简单的Web框架

    一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...

  5. 如何写一个简单的http服务器

    最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...

  6. 如何写一个简单的shell

    如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...

  7. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  8. 一步一步写一个简单通用的makefile(三)

    上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...

  9. （2）自己写一个简单的servle容器

    自己写一个简单的servlet,能够跑一个简单的servlet,说明一下逻辑. 首先是写一个简单的servlet,这就关联到javax.servlet和javax.servlet.http这两个包的类 ...

随机推荐

  1. iOS下 UILabel 如何自动换行

    背景: 相信很多朋友都遇到过,文本的内容长度不一,需要根据内容的多少来自动换行处理. 场景: 很多APP中评论,有的评论长,有的评论短,有的一行,有的多行.   下面以评论的实现为例来说说具体如何实现 ...

  2. OSS RFC

    This is a very late reply, but just want to share the process of setting up all associated RFCs with ...

  3. WRF 安装备忘

    ▶ n 年前在笔记本上安装 WRF 的一个过程 ● 安装 cpp,csh,m4,quota,samba # apt-get install cpp csh m4 quota samba ● 网上教程有 ...

  4. TCP协议-连接建立和释放

    三次握手: (1)客户端向服务器端TCP请求连接,向服务器端发送控制位SYN=1,序号seq=x的请求报文.(x是随机产生的,且不能为0) (2)服务器端接收到请求报文后,若同意建立连接,则向客户端发 ...

  5. ReactNative 学习笔记

    1. react-native引入第三方库时报Command `run-android` unrecognized: 在使用第三方库tab-navigator时调用: npm install reac ...

  6. 微信小程序中把页面生成图片

    这个问题我上网搜了一下,答案有多种,但是真正能用的没有几何.很多答案都是雷同,有的网友也不负责任,直接拿来照抄,自己也不跑一遍看看.哎,不说了,说多了全是泪.希望我们的技术达人在分享的时候,能够真实的 ...

  7. python_14 多态，封装

    多态: 由不同的类实例化得到的对象,调用同一个方法,执行的逻辑不同. 多态的概念指出了对象如何通过他们的共同的属性和动作来操作及访问,而不需考虑他们的类. class H2O: def __init_ ...

  8. airflow笔记

    airflow webserver --debug &  # debug 模式,在后台启动webserver airflow list_dags airflow list_tasks tuto ...

  9. 【译】BERT表示的可解释性分析

    目录 从词袋模型到BERT 分析BERT表示 不考虑上下文的方法 考虑语境的方法 结论 本文翻译自Are BERT Features InterBERTible? 从词袋模型到BERT ​ Mikol ...

  10. JVM、redis缓存适用场景

    1. 数据状态相对稳定:(针对数据本身)数据修改较少. 2. 输出的数据是相对幂等:(针对业务)多次查询期间,数据不变动.如果查询频率过高,缓存可能没有及时更新. 了解一下redis.ehcache. ...