HTML+CSS例子＞登陆页面

已于 2022-03-26 18:14:42 修改
阅读量138 收藏
点赞数
分类专栏： CSS HTML 文章标签： html css
于 2022-03-26 17:41:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55172460/article/details/123760074
版权
HTML 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
CSS
6 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 背景颜色 */
            background-color: rgb(144, 127, 142);
        }

        section {
            width: 600px;
            height: 500px;
            margin: 50px auto;
            /* 溢出隐藏 */
            overflow: hidden;
            /* border-radius: 15px; */
        }

        .box {
            width: 530px;
            height: 380px;
            background-color: rgb(250, 245, 250);
            margin: 50px auto;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 圆角*/
            border-radius: 10px;
        }

        .box1 {
            width: 530px;
            height: 88px;
            background-color: rgb(246, 246, 246);
            margin: 2px auto;
            /* 背景图片路径 */
            background-image: url(../img/guanbi.png);
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 背景图片定位 */
            background-position: 95% 20px;
        }

        .box2 {
            width: 520px;
            height: 85px;
            /* background-color: rgb(221, 208, 208); */
            margin: 5px auto;
        }

        .box3 {
            width: 520px;
            height: 85px;
            /* background-color: rgb(221, 208, 208); */
            margin: 5px auto;
        }

        .box4 {
            width: 520px;
            height: 85px;
            /* background-color: rgb(221, 208, 208); */
            margin: 5px auto;
            /* 溢出隐藏 */
            overflow: hidden;
        }

        .box12,
        .box13 {
            /* 斜体 */
            font-style: italic;
            color: rgb(119, 121, 121);
        }

        .box11,
        .box12 {
            line-height: 85px;
        }

        .box11 {
            font-size: 25px;
            font-family: "华为琥珀";
            margin-left: 30px;
        }

        .box21 {
            width: 460px;
            height: 60px;
            margin: 13px 22px;
            /* 背景图片路径 */
            background-image: url(../img/username.png);
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 背景图片定位 */
            background-position: 100% 10px;
            /* 背景图片大小 */
            background-size: 40px 40px;

            padding: 0 0px 0px 20px;
            /* 边框 */
            border: 1px solid #d3d3d3;
            /* 圆角 */
            border-radius: 5px;
            /* 轮廓线设置为无 */
            outline: none;
            /* 阴影 */
            box-shadow: 0px 0px 10px #979393;

        }

        .box21,
        .box31::-webkit-input-placeholder {
            font-size: 20px;
            color: rgb(119, 121, 121);
            /* 斜体 */
            font-style: italic;
        }



        .box31 {
            width: 460px;
            height: 60px;
            margin: 13px 22px;
            /* 背景图片路径 */
            background-image: url(../img/password.png);
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 背景图片定位 */
            background-position: 100% 10px;
            /* 背景图片大小 */
            background-size: 40px 40px;
            padding: 0 0px 0px 20px;
            /* 边框 */
            border: 1px solid #d3d3d3;
            /* 圆角设置 */
            border-radius: 5px;
            /* 轮廓线设置为无 */
            outline: none;
            /* 阴影 */
            box-shadow: 0px 0px 10px #979393;

        }

        .box31::-ms-reveal {
            /* 密码输入框眼睛隐藏 */
            display: none;
        }


        .box41 {
            width: 484px;
            height: 60px;
            /* background-color: #fff; */
            margin: 13px 20px;
            /* border: 1px solid #d3d3d3; */
            /* border-radius: 5px; */
            /* box-shadow: 0px 0px 10px #979393; */
        }

        .box42 {
            margin-top: 15px;
            margin-left: 20px;
            font-size: 18px;
            color: rgb(119, 121, 121);
            /* 斜体 */
            font-style: italic;
        }

        .box43 {
            /* 基线顶部对齐 */
            vertical-align: top;
            width: 124px;
            height: 44px;
            margin-left: 352px;
            margin-top: -45px;
            /* 边框 */
            border: 1px solid #c2b7b7;
            /* 圆角 */
            border-radius: 5px;
            /* 阴影 */
            box-shadow: 0px 0px 10px #b1adad;
            font-size: 20px;
            /* font-family: "楷体"; */
        }

        .box44 {
            /* 斜体 */
            font-style: italic;
            color: rgb(119, 121, 121);
        }
    </style>
</head>

<body>
    <section>
        <div class="box">

            <div class="box1">
                <span class="box11">Secure Login</span>
                <span class="box12">or get</span>
                <a href="#" class="box13">a free account</a>
            </div>

            <div class="box2">
                <!-- 文本输入框 -->
                <input type="text" class="box21" placeholder="Username">
            </div>

            <div class="box3">
                <!-- 密码输入框 -->
                <input type="password" class="box31" placeholder="Password">
            </div>

            <div class="box4">
                <div class="box41">
                    <a href="#" class="box42">Forgot your password?</a><br>

                    <input type="checkbox" class="box42" id="ched">

                    <!-- 绑定input元素的标签 -->
                    <label for="ched" class="box44"> Remember me</label>

                    <input type="submit" value="Let me in!" class="box43">
                </div>
            </div>

        </div>
    </section>
</body>

</html>

运行效果：

不羁的程序员~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css如何设置背景图片？background属性添加背景图片
lin123_00的博客
05-18 5万+
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf4y117ji 「HTML+CSS」实现妙笔千山.
一个用weui+html+css页面的例子
03-26
标题 "一个用weui+html+css页面的例子" 暗示了这是一个使用WeUI框架构建的网页项目，其中结合了HTML、CSS和JavaScript技术。WeUI是专为微信小程序和移动Web应用设计的一套轻量级的前端框架，它提供了符合微信视觉...
通过JavaScript实现tab切换
weixin_54043141的博客
09-01 1639
在Web开发中，Tab切换是一个常见的功能，它允许用户在不同的页面部分之间进行切换。下面是一个使用JavaScript实现Tab切换的案例，我将详细描述如何实现这个功能。
HTML+CSS的一个静态登录页面的实现
qq_45841233的博客
03-30 1224
HTML+CSS的一个静态登录页面的实现
tab栏切换的实现
zhaoyifei01的博客
02-11 3679
tab栏切换
简单实现Tab菜单的切换功能
weixin_46267824的博客
02-14 2251
做毕设时有点击菜单/导航栏项目然后切换页面内容的需求，记录一下这个小功能 主要思路 页面准备三个盒子：导航栏/菜单、内容盒子、展示盒子 建立导航标签/按钮到内容的映射字典，获取点击元素的class属性，在字典中查找对应的内容class属性，然后在展示盒子中显示该内容即可 html代码 <body> <!-- 导航菜单 --> <div class="nav"> <ul> <li cl
HTML5+CSS3 精美登陆界面源码
12-21
例如，`<header>`、`<nav>`、`<main>`、`<article>`和`<footer>`等元素使得页面结构更加清晰，而`<input type="date">`、`<video>`和`<audio>`等元素则增强了媒体支持和交互性。此外，HTML5还支持离线存储（离线Web...
html+css编写的简单静态页面.rar
10-14
在这个例子中，“html+css编写的简单静态页面”很可能包含了一个基础的HTML文件，这个文件可能使用了`div`来组织页面内容，用`float`来处理元素的位置，以及用`ul`创建了某种形式的列表。同时，CSS可能被用来添加...
html5+css3+JS代码
05-22
在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先，HTML5（超文本标记语言第五版）是描述网页内容的标准语言。它引入了许多新...
html+css学成在线静态页面
最新发布
03-23
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两大核心技术，它们共同作用于创建美观、动态且易于维护的在线静态页面。对于初学者来说，掌握这两门技术是步入Web开发领域的基础。 ...
JS游戏实例
06-11
这是一本HTML5游戏开发实战中的第一个实例，乒乓球游戏，可在chrome下测试运行，初学者可以下载下来看看。
css在vscode中，background如何链接调用图片
weixin_47432066的博客
08-31 3159
如果是网上的图片，需要调用作为背景，公式为：background-image:url('网址');，例如： background-image:url('https://static.runoob.com/images/mix/paper.gif'); 若要加载本地的图片，则则url(file:///本地存储地址 )，例如background-image:url('file:///K:/SC/sc/summer.jpg') ...
JS小案例
宇智波带土
10-25 694
案例一： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>控制div元素</title> <style> #div1{ text-align: center; } #div2{ hei...
前端：background-image引入svg图片背景浅析
热门推荐
Pain4Dawn的博客
12-06 2万+
前端：background-image引入svg图片背景浅析概述掌握的知识background-image相关属性svg相关属性核心 概述 background-image引入图片，之前给笔者印象是利用background-size属性、background-repeat属性可以控制图片的缩放，拉伸从而实现背景图片的自适应。但是当遇到background-image遇到svg时，发现了不一样的结果...
css 通过background将两张图合成一张图显示
qq_44869043的博客
04-25 4310
需求背景： 后台返回两张图，一张是默认背景图bgimg，另一张是显示在背景上的图案img。 在列表中，bgimg一般不变，但img会根据不同的花的类型返回不同的图片。 需求是将两张图片叠在一起，让人以为是一张图片。 背景图bgimg： 图案img： 需求效果： 第一种方法：background <div class="list-item"></div> <style> .list-item { backgroud:url(img) right bottom no
Vue:在同一个页面中进行页面跳转（tab切换的）查询
li22356的博客
09-11 3493
需求： 最近老板给了我一个需求：就是在部门绩效tab里面有员工查询的条件，需要在部门绩效tab里面输入员工查询的条件跳转到员工绩效tab里面去查询。其中部门名称查询不需要跳转页面查询 我的问题误区： 我始终认为在同一个页面跳转用路由跳转方式就可以。但是我发现不太行。用了很多方法。也有可能我的方法没有用对。后来我问了我的同事，他和我说在同一个页面中（tab切换），我们只需要传tab切换的值就好了，不需要页面路由跳转。我当时一想进入了误区了，太纠结这个问题的原因实现了。 需求页面要求如下： 解决方案：
vue实现多个tab标签页的切换与关闭
苏苏就是小苏苏的博客
03-06 9684
1.实现效果 2.实现原理 vuex，实现对当前激活项，当前tab列表，当前tab的translateX，当前缓存页，当前路由的状态管理。 将vuex中的数据保存到sessionStorage中，避免页面刷新丢失，当浏览器关闭时，清空数据。 通过ref定位，拿到当前窗口宽度与当前所在路由的tab标签的所有宽度，判断两者，实现对多tab超出窗口宽度的处理。 当点击tab标签页的时候，获取相应的激活项，动态的实现左侧菜单栏的选中状态，用watch监听，updateActiveName和upda
CSS+HTML 利用背景background添加图片
qq_39833794的博客
02-25 1万+
可以用CSS+html实现图片的添加与切换，不需要总是加img，可以换方向考虑，加入背景图片，用padding撑开盒子，添加background，去重复就可以，代码如下&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &l
wxss中background属性使用背景图片无效的问题
monkeyfly学前端
08-29 1万+
前提 所要实现的效果图如下所示：（两个 view 之间使用两个 格式为.png 的绑带图片相连接） 我的实现方式：习惯了通过伪元素设置background属性来实现。基于简便快捷的方式，并没有选择使用官方提供的&amp;lt;image/&amp;gt;组件来实现。 首次开发微信小程序，并不知道 background 属性中的背景图像（即background-image属性）无法将 url 设置为本地的图...
请问有没有html+css+javascript的例子
03-27
这里提供一个简单的HTML、CSS和JavaScript的例子： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Example</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值