实战CSS：模拟登录注册静态实现

目标:
实现登录注册界面的静态实现
效果:

代码:
html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>撩课</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/index.css"><!--运行在手机上的注释--><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section id="content"><!--头部--><div class="content-header clearfix"><!--href="javascript:;"使用户点击没有任何反应--><a href="javascript:;" class="current">我要登录</a><a href="javascript:;">我要注册</a></div><!--内容--><div class="content-body"><div class="dom" style="display: block;"><form action="https://blog.csdn.net/KaiSarH"><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="登&nbsp;录"></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="data:images/qq.png" alt=""></a><a href="#"><img src="data:images/wechat.png" alt=""></a></div></div></div></div><div class="dom"><form action="https://blog.csdn.net/KaiSarH"><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 msg-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="注&nbsp;册"></form><div class="dom-footer"><div class="login-three"><span>使用第三方账号直接登录</span><div class="login-icon"><a href="#"><img src="data:images/qq.png" alt=""></a><a href="#"><img src="data: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的classthis.className = 'current';// 从contents数组中取出对应的标签contents[this.id].style.display = 'block';}}}
</script>
</body>
</html>

CSS:

/*默认样式*/
*{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: 60rem;*/border: 0.1rem solid #e0e0e0;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: purple;
}/*内容*/
#content .content-body{padding: 4rem;
}#content .content-body .dom{width: 100%;display: none;
}#content .content-body .dom .s1{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-radius: 5px;border: 1px solid #cccccc;
}#content .content-body .dom .s2{margin-bottom: 2rem;
}#content .content-body .dom .btn{width: 100%;height: 4rem;border: none;font-size: 2rem;color: #fff;background-color: purple;border-radius: 3px;margin-bottom: 2rem;
}#content .content-body .dom-footer .login-another{color: #666666;margin-bottom: 2rem;
}#content .content-body .dom-footer .login-another span{margin: 0 5px;
}#content .content-body .dom-footer .login-three{color: #666666;text-align: center;
}#content .content-body .dom-footer .login-three span{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: 10rem;height: 0.1rem;border-bottom: 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  .msg-code input{width: 60%;
}#content .content-body .dom  .msg-code input:last-child{color: #666666;cursor: pointer;width: 38%;
}

实战CSS：模拟登录注册静态实现相关推荐

【爬虫剑谱】二卷4章实战篇-模拟登录铁路12306网站（滑块验证）
Python\网络爬虫\Selenium 一.源码二.实战总结问题一:不愿意代码模块化(常见于我这种菜狗+懒狗) 三.参考文献一.源码 from selenium import webdrive ...
Python网络爬虫实战(四)模拟登录
对于一个网站的首页来说,它可能需要你进行登录,比如知乎,同一个URL下,你登录与未登录当然在右上角个人信息那里是不一样的. (登录过) (未登录) 那么你在用爬虫爬取的时候获得的页面究竟是哪个呢? 肯 ...
python淘宝爬虫登陆功能和下单功能_Python 爬虫实战5 模拟登录淘宝并获取所有订单...
经过多次尝试,模拟登录淘宝终于成功了,实在是不容易,淘宝的登录加密和验证太复杂了,煞费苦心,在此写出来和大家一起分享,希望大家支持. 本篇内容 python模拟登录淘宝网页获取登录用户的所有订单详情 ...
Python 爬虫实战5 模拟登录淘宝并获取所有订单
经过多次尝试,模拟登录淘宝终于成功了,实在是不容易,淘宝的登录加密和验证太复杂了,煞费苦心,在此写出来和大家一起分享,希望大家支持. 本篇内容 python模拟登录淘宝网页获取登录用户的所有订单详情 ...
html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面
[实例简介] 基于HTML5+css+JS的精美登陆注册界面------------------------------- [实例截图] [核心代码] login4 ├── index.html ├─ ...
Java MD5加密实战（账号登录注册系统）
程序框架程序框架如图所示: 代码展示: Main方法: package com.jd.test;import java.util.ArrayList; import java.util.Scanne ...
Python爬虫实战：模拟登录淘宝网站
前言在完成爬虫任务的时候,我们总是会遇到用户账号登陆的问题,如果自己手动登陆的话,那么工作量就很大了,如何解决登陆问题呢? 今天老师带领大家使用selenium完成淘宝账号登陆本篇文章知识点: s ...
html+css 用户登录注册页面设计
1.服务器地址 <form action="服务器地址"> <!-所有的内容都写在这里面--> <form> 2.表单框(可有可无) <f ...
python PySide6 图书管理系统结合数据库实战教程之登录-注册界面（保姆级教程）（后续更新）
首先默认安装了mysql8.0.29,默认安装了python. 此项目用到了python的第三方库PySide6.pymysql.pyinstaller. 目录安装第三方库数据库建表 py文件注 ...
微信登录提示逻辑不正确_Axure RP 9 教程：模拟登录注册
本篇文章将会教大家利用Axure RP 9,制作显示密码和隐藏密码的交互效果,enjoy~ 前言本期案例给大家展示的交互内容包括: 60s倒计时动态面板的简单切换输入正确的密码的时候登录成功:否 ...

实战CSS：模拟登录注册静态实现

实战CSS：模拟登录注册静态实现相关推荐

最新文章

热门文章