登录页面代码段

最新推荐文章于 2021-12-02 20:29:58 发布
最新推荐文章于 2021-12-02 20:29:58 发布
阅读量413 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45722135/article/details/106122111
版权

登录页面的代码： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撩课-喜欢IT,就上撩课(itlike.com)</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<section id="content">
    <!--头部-->
    <div class="content-header clearfix">
        <a href="javascript:;" class="current">我要登录</a>
        <a href="javascript:;">我要注册</a>
    </div>
    <!--内容-->
    <div class="content-body">
        <div class="dom"style="display: block">
            <form action="http://www.itlike.com">
                <div class="s1">
                    <h4>账号</h4>
                    <input name="user" type="text" placeholder="用户名/手机/邮箱">
                </div>
                <div class="s1">
                    <h4>密码</h4>
                    <input name="pwd" type="password" placeholder="请输入密码">
                </div>
                <div class="s2">
                    <input type="checkbox">
                    <span>记住密码</span>
                </div>
                <input type="submit" class="btn" value="登 录">
            </form>
            <div class="dom-footer">
                <div class="login-another">
                    <a href="">找回密码</a>
                    <span>| </span>
                    <span>还没有注册帐号?</span>
                    <a href="">立即注册</a>
                </div>
                <div class="login-three">
                    <span>使用第三方账号直接登录</span>
                <div class="login-icon">
                    <a href="#">
                        <img src="images/qq.png" alt="">
                    </a>
                    <a href="#">
                        <img src="images/wechat.png" alt="" >
                    </a>
                </div>
            </div>
            </div>
        </div>
        <div class="dom"> <form action="http://www.itlike.com">
            <div class="s1">
                <h4>手机号码</h4>
                <input name="phone" type="text" placeholder="填写你的手机号码作为登录账户">
            </div>
            <div class="s1">
                <h4>用户名</h4>
                <input name="user" type="text" placeholder="中、英文均可, 最长20个字符或10个汉字">
            </div>
            <div class="s1">
            <h4>密码</h4>
            <input name="pwd" type="text" placeholder="6-30位英文、数字、符号, 区分大小写">
            </div>
            <div class="s1 mgs-code">
                <h4>短信验证码</h4>
                <input name="msg" type="text" placeholder="填写短信验证码">
                <input type="button" value="获取短信验证码">
            </div>
            <div class="s1">
                <h4>邀请码 <span style="color: purple">（选填)</span></h4>
                <input name="code" type="text" placeholder="如果有邀请码，请填写">
            </div>
            <input type="submit" class="btn" value="注 册">
        </form>
            <div class="dom-footer">

                <div class="login-three">
                    <span>使用第三方账号直接登录</span>
                    <div class="login-icon">
                        <a href="#">
                            <img src="images/qq.png" alt="">
                        </a>
                        <a href="#">
                            <img src="images/wechat.png" alt="" >
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</section>
<script>
    window.onload = function () {
        // 1.1 获取需要的标签
        let as = document.getElementsByClassName('content-header')[0].getElementsByTagName('a');
        let contents = document.getElementsByClassName('dom');

        // 1.2 遍历
        for (let i = 0; i < as.length; i++) {
            // 1.2.1 取出单个对象
            let a = as[i];
            a.id = i;

            // 1.2.2 监听鼠标的移动事件
            a.onclick = function () {
                // 让所有的a的class都清除
                for (let j = 0; j < as.length; j++) {
                    as[j].className = '';
                    contents[j].style.display = 'none';
                }

                // 设置当前a的class
                this.className = 'current';
                // 从contents数组中取出对应的标签
                contents[this.id].style.display = 'block';
            }

        }
    };
</script>


</body>
</html>
/*默认样式*/
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;

}
.clearfix::before,
.clearfix::after{
    content: "";
    display: block;
    clear: both;

}
input,button{
    outline: none;
}

html{
    font-size: 10px;
}
body{
    font-size: 1.6rem;
}
a{
    color: purple;
}
/*主要内容*/
#content{
    width: 50rem;
    height: 70rem;
    border: 0.1rem solid #e0e0e0;
    /*background-color: #c12e2a;*/
  margin: 5rem auto;
}
#content .content-header a{
    width: 50%;
    height: 60px;
    background-color:#f5f5f5;
    display: inline-block;
    float: left;
    text-align: center;
    line-height: 60px;
    color: #262626;
}
#content .content-header a.current{
    background-color: transparent;
 color: #c12e2a;

}
#content .content-body{
    /*background-color: red;*/
    padding: 4rem;
}
#content .content-body .dom{
    width: 100%;
    display: none;

}
#content .content-body .dom .s1{
/*background-color: red;*/
    margin-bottom: 2rem;
}
#content .content-body .dom .s1 h4{
    color: #666666;
}
#content .content-body .dom .s1 input{
    width: 100%;
    height: 4rem;
    margin-top: 0.5rem;
padding-left: 0.5rem;
    border: 1px solid #cccccc;
}
#content .content-body .dom .s2{
    /*background-color: red;*/
    margin-bottom: 2rem;
}
#content .content-body .dom .btn{
    width: 100%;
    height: 4rem;
    border: none;
    font-size: 2rem;
    color: #ffffff;
    background-color: purple;
    border-radius: 3px;
    margin-bottom: 2rem;
}
#content .content-body .dom-footer .login-another{
   /*background-color: red;*/
    color: #666666;
    margin-bottom: 2rem;
}
#content .content-body .dom-footer .login-another span{
    margin: 0 5px;
}
#content .content-body .dom-footer .login-three{
    /*background-color: red;*/
    color: #666666;
    text-align: center;
}
#content .content-body .dom-footer .login-three span{
    /*background-color: red;*/
    position: relative;
}
#content .content-body .dom-footer .login-three span::before,
#content .content-body .dom-footer .login-three span::after
{
    content: '';
    display: inline-block;
    width:8rem;
    height: 0.1rem;
    border: 1px solid #e0e0e0;
    position: absolute;
    top: 50%;


}
#content .content-body .dom-footer .login-three span::before{
    left: -65%;
}
#content .content-body .dom-footer .login-three span:after{
    right: -65%;
}
#content .content-body .dom-footer .login-icon{
    margin-top: 2rem;
}
#content .content-body .dom-footer .login-icon img{
    width: 5rem;
}
#content .content-body .dom .mgs-code input{
    width: 49%;

}
#content .content-body .dom .mgs-code input:last-child{
    color: #666666;
    cursor: pointer;
    width: 38%;
}

                                                                                                                            5.14                   72-75课

 

junlingshiwo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
注册登录案例
weixin_51571602的博客
06-04 458
一、注册登录案例 cookie
登录页面代码
HE627386528的博客
03-22 4779
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 用户名:<input id="username" name="username" /><br> 密码:<inpu...
2021-03-17 编写login.html
okludawei的博客
03-17 1068
编写login.html，当点击的时候自动跳转到在resources目录的templates目录的文件。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <...
提交表单<input type="button" value="登录" onclick="login()"/> 和<button onclick="login()">登录</button>区别...
07-26 1620
html按钮有两种： &lt;input type="button" value="登录" onclick="login()"/&gt; 和&lt;button onclick="login()"&gt;登录&lt;/button&gt; 这两种在页面上看起来好像一样没什么区别，但是这两种是有区别的。 1，如果在&lt;form id="login
静态登录校验
qq_51649461的博客
07-25 248
问题：登录校验 方式一：表单submit提交 ① 添加onclick事件 onclick 事件调用有返回值的函数，用“return 函数名()” <form action="getloging.jsp" method="post" name="myForm"> <ul> <li><input type="text" id="userName" name="userName" class="loginuser" ...
<input type="submit" name="Submit" value="提交" />添加网站跳转的两种方式小结
budaoweng0609的博客
01-30 1万+
两种方法：一种是 本身在一个form表单里面，添加action就可以，比如,像这样子，另外一种很少使用在submit属性的按钮上，不过不是不行，你可以添加一个onclick，比如window.location.href='index.html'” value="提交" /> 此种方法要注意意看清引号的问题别搞错了 例如： name: passwor
注册页面代码
SSSWADRWEQTTE的博客
12-02 70
<form> <!-- <input type="text" placeholder="请输入文本" value="这是一句话"/> <input type="button" value="提交"/> --> 你的兴趣爱好是什么：<br/> <input type="checkbox" checked="checked" value="music"/>听音乐 ...
js常用代码段收集
10-28
【JavaScript 常用代码段】 1. **重写 `window.setTimeout`** JavaScript 的 `setTimeout` 函数通常只能接收两个参数：回调函数和延迟时间。这个代码段扩展了 `setTimeout`，使其能够接受更多的参数，类似于函数...
html登录,html登录页面代码,HTML
09-10
在本话题中，我们将深入探讨如何创建一个HTML登录界面，以及相关的HTML登录页面代码。 一个基本的HTML登录界面通常包括用户名输入框、密码输入框、登录按钮以及可能的“忘记密码”或“注册”链接。以下是一个简单的...
超实用的jQuery代码段
07-22
资源名称：超实用的jQuery代码段内容简介：《超实用的jQuery代码段》精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好...
代码段：代码段
02-21
收集了一些平时常用以及网上寻觅的代码片段，并且在页面中提供了搜索功能，可以快速找到我们平时记下的代码，这里保存的部分片段还是十分有意义的。 本应用对应的网址为： ://snippets.barretlee.com 贡献代码 如果...
超实用的CSS代码段
01-11
《超实用的CSS代码段》分为11章，包含文字、字体、边框、图片、按钮、链接、背景、颜色、动画、页面布局、美化、盒子、3D、CSS Hack等网页设计和交互技术，对那些客户要求高、工作节奏快的网站开发人员和设计人员...
HTML学习笔记3+阶段性练习（一个小小的登录页面）
小渣渣的博客
10-01 292
目录 1.文本框 2.密码框 3.表单 4.单选框 5.复选框 6.下拉列表 7.文本框 8普通按钮 9.提交按钮 10.重置按钮 11.按钮 12.一个小小的登录界面 1.文本框 <input type="text"> 即表示文本框 并且只能够输入一行 如果要输入多行 使用文本域<textarea> 注： &...
轻量级web开发框架：Flask 实战
薛定谔的猫-前端领域
07-12 666
Flask静态文件及渲染模板 请创建一个模板和CSS文件，并在模板引入CSS文件，当访问网站首页时显示一个绿色的Welcome to my website！字样。 参考答案 文件目录结构如下所示： /test.py /templates /index.html /static /index.css hello.py文件中的代码如下所示： from flask ...
实现登录和注册的功能
ckk4321的博客
07-18 490
1、login页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> <style type="text/css"> .error{ color:red; font-size: 14px; } &
为input标签绑定事件的几种方式
热门推荐
hello world！
12-14 5万+
为标签绑定事件 function danji(){ alert("hello javascript"); } 单击按钮触发函数。 onclick="danji()"> 这是JavaScript原生态的方式，直接复制上面的代码就会有相应的效果 而下面这种方式必须事先导入导入js的包才有效果！ 为标签绑定事件 /*我导入的包是相对
网站开发进阶(四十四)input type=“submit“ 和“button“的区别
IT全栈 华强工作室
12-27 4万+
网站开发进阶(四十四)input type=”submit” 和”button”的区别  在一个页面上画一个按钮，有四种办法： 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多
submit提交判断
weixin_34161032的博客
07-02 1268
body部分 <form action='https://www.baidu.com' method='post' > 用 户 名:<input type="text" name="username"> ...
html css js网页设计
最新发布
07-12
HTML、CSS和JavaScript是构建网页和网站的基本技术，它们共同工作来创建和设计用户界面。下面是关于这三种技术的详细介绍： ### HTML (HyperText Markup Language) - **定义**：HTML是构建网页内容的标准标记语言。 - **作用**：用于创建网页的结构和内容，如段落、链接、图片、表格等。 - **语法**：使用标签（如 `<p>`, `<div>`, `<a>`, `<img>` 等）来定义网页元素。 ### CSS (Cascading Style Sheets) - **定义**：CSS是一种样式表语言，用于描述HTML文档的呈现方式。 - **作用**：用于设置网页的布局、颜色、字体和其他视觉元素。 - **语法**：通过选择器（如 `p`, `.myclass`, `#myid` 等）应用样式规则。 ### JavaScript - **定义**：JavaScript是一种脚本语言，通常用于网页上实现交互功能。 - **作用**：允许网页与用户进行交互，如响应用户操作、动态更新内容、动画效果等。 - **语法**：Java
用python写一段登录界面代码
03-22
以下是一段简单的 Python 登录界面代码： ``` username = input("请输入用户名：") password = input("请输入密码：") if username == "admin" and password == "123456": print("登录成功！") else: print("用户名或密码错误，请重试！") ``` 这是一个简单的用户名和密码登录示例，其中用户名为 `admin`，密码为 `123456`。如果用户输入的用户名和密码与预定义的匹配，则会提示登录成功；如果不匹配，则会提示用户名或密码错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值