当前位置: 首页 > news >正文

简单入门编写html登录界面

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你好呀,登录吧</title>
    <style>
        * {margin: 0;padding: 0;}

        html {height: 100%;}

        body { height: 100%;}

        .container {
            height: 100%;
            background-image: linear-gradient(110deg, #f9bde8, #f670d0);
        }

        .login-wrapper {
            background-color: #fbf1f1;
            width: 400px;
            height: 388px;
            border-radius: 50px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .header {
            font-size: 60px;
            font-weight: 900;
            text-align: center;
            line-height: 120px;
        }

        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

            .input-item:placeholder {
                text-transform: uppercase;
            }

        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }

        .msg {
            text-align: center;
            line-height: 88px;
        }

        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">登录</div>
            <div class="form-wrapper">
                <input type="text" name="输入用户名" placeholder="username" class="input-item">
                <input type="password" name="输入密码" placeholder="password" class="input-item">
                <div class="btn">登录</div>
            </div>
            <div class="msg">
               忘记了
                <a href="#">注册</a>
            </div>
        </div>
    </div>
</body>
</html>

 整体样式:

<!DOCTYPE html>

每个 HTML 文件里开头都有个很重要的东西<!DOCTYPE html>,DOCTYPE是document type的简写,它并不是 HTML 标签,也没有结束标签,它是一种标记语言的文档类型声明,即告诉浏览器当前 HTML 是用什么版本编写的。

 <html lang="en">

lang就是language是语言的意思,en也是English的缩写,这句话用来定义页面的语言为英文。可以知道<html lang="zh">表示语言是中文。

HTML <head> 元素

        <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<meta charset="UTF-8">

charset 属性规定 HTML 文档的字符编码,且utf-8代表世界通用的语言编码。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。

content属性值 :

     width:可视区域的宽度,值可为数字或关键词device-width

     height:同width

     intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放。

<title>hi,nice to meet you</title> 

设置标题。

 .container {
            height: 100%;
            background-image: linear-gradient(110deg, #f9bde8, #f670d0);
        }

这里是指设置容器的高度和容器的背景。

特别说明一下,linear-gradient是设置渐变色的库函数有三个参数。

第一个参数表示渐变色的角度(默认是180deg。设置了角度,则0deg为竖直向上,然后顺时针旋转)如下图

 第二个参数表示初始颜色,第三个参数表示最终颜色。就是从初始颜色到最终颜色的渐变。

关于linear-gradient的使用,读者可以自行查阅其他资料。

这里安利一个超级好配色的网站HTML颜色代码 (encycolorpedia.cn)

  .secrect-wrapper {
            background-color: #fbf1f1;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

wrapper在html中是一个常见的术语,我们给它一个类,该类负责将所有可见元素封装在页面上。

这里简单的说明一下:background-color是用来设置背景颜色,width、height设置宽和高,border-radius边框锐化(就是将矩形变成圆角),left,top在容器中的位置。

.header {
            font-size: 60px;
            font-weight: 900;
            text-align: center;
            line-height: 200px;
        }

这里是时候设置标题的属性。font-size设置标题的字体大小,font-weight设置标题的宽度(可以加粗),text-align设置位置,line-heightline-height 设置行间的距离(行高)。

 .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

<input> 元素用于为基于 Web 的表单创建交互式控件,以便接受来自用户的数据,可以使用各种类型的输入数据和控件小部件。

display 属性设置元素如何显示,block表示此元素将显示为块级元素,此元素前后会带有换行符。

 .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }

设置登录按钮的属性,text-align: center文本居中,background-image渐变颜色设置, color: #fff文本颜色为白色。

HTML<body> 元素

定义文档的主体,body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)

<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">please login </div>
            <div class="form-wrapper">
                <input type="text" name="username" placeholder="username" class="input-item">
                <input type="password" name="password" placeholder="password" class="input-item">
                <div class="btn">click-Login</div>
            </div>
            <div class="msg">
                Don't have account?
                <a href="#">Sign up</a>
            </div>
        </div>
    </div>
</body>

在head中我们相当于定义了container、login-wrapper、form-wrapper、msg的类,这里可以直接用他们。

相关文章:

  • [网络工程师]-应用层协议-SNMP
  • 【云原生之kubernetes实战】在k8s环境下部署jpress开源网站
  • HTML+CSS+JS网页设计期末课程大作业 DW个人博客网站制作 web前端开发技术 web课程设计 网页规划与设计
  • SpringBoot_整合PageHelper
  • 【数据结构与算法】一套链表 OJ 带你轻松玩转链表
  • C/C++大学课程信息系统
  • 【网络编程】第三章 网络套接字(TCP协议程序+多进程+多线程+线程池)
  • 基于物联网设计的自反馈深紫外杀菌消毒系统(STM32F407)
  • react路由v6版本NavLink的两个小坑及解决
  • CSDN第11期周赛总结
  • 编程语言介绍
  • 【火灾检测】森林火灾检测系统(带面板)【含GUI Matlab源码 1921期】
  • Tomcat经验2
  • 为什么说C++太复杂(复杂到哪了?)
  • k8s部署手册-v03
  • CSS实用技巧干货
  • Java,console输出实时的转向GUI textbox
  • JSONP原理
  • MySQL用户中的%到底包不包括localhost?
  • node和express搭建代理服务器(源码)
  • PaddlePaddle-GitHub的正确打开姿势
  • Rancher-k8s加速安装文档
  • SpiderData 2019年2月23日 DApp数据排行榜
  • Swift 中的尾递归和蹦床
  • 从0到1:PostCSS 插件开发最佳实践
  • 大型网站性能监测、分析与优化常见问题QA
  • 高程读书笔记 第六章 面向对象程序设计
  • 跨域
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 什么软件可以剪辑音乐?
  • 为视图添加丝滑的水波纹
  • raise 与 raise ... from 的区别
  • 整理一些计算机基础知识!
  • #NOIP 2014# day.2 T2 寻找道路
  • #每日一题合集#牛客JZ23-JZ33
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (六)vue-router+UI组件库
  • (十五)使用Nexus创建Maven私服
  • (转)菜鸟学数据库(三)——存储过程
  • (总结)Linux下的暴力密码在线破解工具Hydra详解
  • ***利用Ms05002溢出找“肉鸡
  • .NET 的程序集加载上下文
  • .net 受管制代码
  • .NET/C# 使用反射调用含 ref 或 out 参数的方法
  • @Transactional 竟也能解决分布式事务?
  • [ solr入门 ] - 利用solrJ进行检索
  • []新浪博客如何插入代码(其他博客应该也可以)
  • [20160807][系统设计的三次迭代]
  • [8-27]正则表达式、扩展表达式以及相关实战
  • [HDU] 1054 Strategic Game 入门树形DP
  • [JavaWeb]—前端篇
  • [luogu4162 SCOI2009] 最长距离(最短路)
  • [mysql]错误解决之Failed to start MySQL Server
  • [SWPU2019]Web3
  • [Web开发] 微软的 PHP+IIS+WinServer 开发培训资料/示例代码
  • 1.fastdfs 简介
  • 2. FastDFS 在 CentOS 下安装部署
  • MiniDao 比Mybatis还灵活实用的J2EE 持久层轻量级解决方案
  • c# 图片加密解密的实例代码
  • volatile 关键字
  • Linux进程间通信——使用数据报套接字
  • 主内存与工作内存
  • Android 颜色渲染(六) RadialGradient 环形渲染
  • java.util.concurrent 之 CountDownLatch
  • Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果