简单入门编写html登录界面

news/2024/10/30 17:20:59/
<!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的类,这里可以直接用他们。


http://www.ppmy.cn/news/1122.html

相关文章

混合动力电动车优化调度与建模(发动机,电机,电池组等组件建模)(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f4dd;目前更新&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;电力系统相关知识&#xff0c;期刊论文&…

java计算机毕业设计基于springboot电商项目(附源码讲解)

目录 1. 用户端 1.1 主页&#xff08;未登录时可以查看商品但是不可以购买&#xff09; 1.2 登录&#xff08;账号密码登录) 1.3 登录&#xff08;手机验证码登录&#xff09; 1.4 注册 1.5 查看商品详情 1.6 将商品加入购物车 1.7 在商品购物车中选中商品购买 1.8 …

Spring MVC使用SessionLocaleResolver实现用户自定义切换语言实例

在许多成熟的商业软件系统中可以让用户自由切换语言&#xff0c;而不是修改浏览器的语言设置。一旦用户选择了自己需要使用的语言环境&#xff0c;整个系统的语言环境将一直是这种语言环境。 Spring MVC 也可以允许用户自行选择程序语言。本章通过 Web 应用 springMVCDemo09 演…

第二证券|支持多子女购房、提高公积金贷款额度、发放限时补贴

近来&#xff0c;多地购房支持方针密集出台。 12月1日&#xff0c;安徽安庆发布住所公积金新政&#xff0c;对多子女家庭首次请求住所公积金借款购买自住住所&#xff0c;最高借款额度添加10万元。 11月30日&#xff0c;江西九江也优化多子女家庭住所公积金事务&#xff0c;进…

力扣hot100——第3天:11盛最多水的容器、15三数之和、17电话号码的字母组合

文章目录1.11盛最多水的容器1.1.题目1.2.解答1.2.1.题解1.2.2.自己对参考题解的进一步解释2.15三数之和【代码随想录已刷】3.17电话号码的字母组合【代码随想录已刷】1.11盛最多水的容器 参考&#xff1a;力扣题目链接&#xff1b;题解 1.1.题目 1.2.解答 1.2.1.题解 这道题…

好家伙!阿里并发核心编程宝典(2022版)一夜登顶Github热榜第三

不知道大家今年的金九银十是否有出去面试过&#xff1f;有出去面试的朋友肯定深有感受&#xff0c;像我们刚入行那会面试的加分项现在卷得已经成为了面试的基础题&#xff08;手动狗头&#xff09;。其中最典型的就属这个Java并发编程了。之前一般只有大厂才会有高并发编程相关…

深入URP之Shader篇3: Unlit Shader分析[下]

Unlit shader 上篇中我们分析了Unlit shader的Properties在ShaderGUI中的处理&#xff0c;接下来看Sub Shader。 SubShader unlit shader以及其他URP shader包含两个SubShader&#xff0c;分别是针对ShaderModel4.5和2.0。由于unlit shader本身很简单&#xff0c;这两个SubS…

【Linux】常用的Linux命令(初学者必读)

一、学习Linux的原因 开源&#xff0c;免费系统迭代更新系统性能稳定安全性高多任务&#xff0c;多用户耗资源少内核小应用领域广泛使用及入门容易 二、Linux常用的命令 我使用的Linux环境是在 腾讯云服务器上的Centos 7和 Xshell。 下面我把常用的一些命令分成了几个部分&am…