【前端】简易登录页面

文章目录

引言

前端应用主要指的是前端开发，是指通过使用HTML、CSS和JavaScript等技术来构建用户界面的过程。前端应用负责处理用户与网站或应用程序之间的交互，提供友好的界面和良好的用户体验。
前端入门主要从HTML、CSS和JS基础学起，由易到难，今天为大家讲解如何用这三种基础语言写出一个注册页面。

学习过程

先学习HTML标记语言和CSS样式表，了解如何构建网页结构和样式，然后学习JavaScript编程语言的基础知识，掌握变量、函数、条件语句、循环等基本概念和语法。通俗来讲就是，HTML为网页搭建一个框架，CSS来美化，最后JS让网页“动起来”，听起来是不是很有趣呀。

部分代码及解释

首先用HTML的排版标签写出一个大的框架并把内容补充上去，HTML核心的应用是盒子模型的应用，一个个盒模型构成了一个完整的网页架构。

 <div class="xtx-login-main">    <div class="wrapper">      <form action="">        <div class="box">          <div class="tab-nav">            <a href="javascript:;" class="active" data-id="0">账户登录</a>            <a href="javascript:;" data-id="1">二维码登录</a>          </div>          <div class="tab-pane">            <div class="link">              <a href="javascript:;">手机验证码登录</a>            </div>            <div class="input">              <span class="iconfont icon-zhanghao"></span>              <input required type="text" placeholder="请输入用户名称/手机号码" name="username">            </div>            <div class="input">              <span class="iconfont icon-suo"></span>              <input required type="password" placeholder="请输入密码" name="password">            </div>            <div class="agree">              <label for="my-checkbox">                <input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">                <span class="iconfont icon-xuanze"></span>              </label>              我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>            </div>            <div class="button clearfix">              <button type="submit" class="dl">登 录</button>              <!-- <a class="dl" href="./center.html">登 录</a> -->              <a class="fl" href="./forget.html">忘记密码？</a>              <a class="fr" href="./register.html">免费注册</a>            </div>          </div>          <div class="tab-pane" style="display: none;">            <img class="code" src="./images/code.png" alt="">          </div>        </div>      </form>    </div>  </div>

xtx-login-main 是整个登录界面的主容器，包含一个表单用来收集用户的登录信息包括用户名和密码的输入框，包含两个链接，用于切换登录方式（账户登录和二维码登录），data-id 属性可以用于JavaScript来识别当前选中的选项。

xtx-login-main .wrapper .box .tab-pane .input {  border: 1px solid #17bb9b;  width: 100%;  height: 36px;  margin-top: 17px;  display: flex;  background: #CFCDCD;}.xtx-login-main .wrapper .box .tab-pane .input .iconfont {  color: #fff;  width: 34px;  height: 34px;  text-align: center;  line-height: 34px;  font-size: 20px;}.xtx-login-main .wrapper .box .tab-pane .input input {  flex: 1;  padding-left: 15px;  background: #fff;}.xtx-login-main .wrapper .box .tab-pane .input input::placeholder {  color: #B3B3B3 !important;}.xtx-login-main .wrapper .box .tab-pane .agree {  color: #B3B3B3;  padding: 17px 0;}

以上这段代码是CSS样式，用于设置登录界面中各个元素的外观和布局。在样式设计中最核心的应用就是选择器，我们可以通过使用不同选择器灵活设置元素样式，使得网页更加美观。

js部分代码

运行成果

下面就是最终的运行成果啦~

小结

通过这个案例的制作，你是否感觉网页制作也没那么难了呢，感兴趣的小伙伴快去学起来吧！

湖师计信学科小组：乔艳莉