简约风 登录页面

前言

    一个简单的登录页面，写写改改练练手，没有复杂的逻辑，用了HTML和CSS写页面和样式，通过JavaScript实现点击按钮切换状态。源码地址：我的Github。

一、效果图

二、HTML部分

这部分需要注意的地方：

  1.点击按钮时切换是通过js事件和改变html元素类名进而样式改变实现的，所以需要注意要改变的地方。
  2.两个板块的空间合理分配，使用section标签。
  3.命名规范。
  4.字体图标需要自己下载，推荐阿里字体图标库。
  5.写完一部分页面就写css，调整页面布局，边写边调。

页面布局逻辑：

1.主体容器 功能页面位于容器中

<div class="container"> 
     <!-- 两个单页面 字和按钮 -->
        &lt;div class="switch-panel"&gt;  <!-- 此处需改变 --&gt;
            <!-- 登录 -->
             <div id="login" class="switch-box switch-hidden"> </div>
              <div class="title">描述</div>
              <button id="switch1">SIGN IN </button>
            <!-- 注册 -->
             <div id="register" class="switch-box">  <!-- 此处需改变 -->
                <div class="title">描述</div>
                <p>描述</p>
                <button id="switch2">SIGN IN</button>
            </div>
         </div>    

            <!-- 具体页面 -->
              <!-- section标签用于对页面内容分块 注册登录板块 -->
        	  <section class="register-login-panel">    <!-- 此处section需改变 --> 
			     <!-- 注册界面 -->
             	 <section class="register switch-hidden-2"> 
				    <div class="content">
                      <h2>标题</h2>
                      <div class="icons">
                        <i>插入字体图标</i>
                        <i>插入字体图标</i>
                        <i>插入字体图标</i>
                    </div>
                    <span>描述</span>
                    <!-- 输入框 -->
                    <input type="text" placeholder="Name">
                    <button>SIGN UP</button>
                    </div>
			 </section>

			 <!-- 登录界面 -->
            <section class="login">    <!-- 此处section需改变 -->
                <div class="content">
                    <h2>Sign in to Website</h2>
                    <div class="icons">
                       <i>插入字体图标</i>
                        <i>插入字体图标</i>
                        <i>插入字体图标</i>
                    </div>
                    <span>描述</span>
                    <!-- 输入框 -->
                    <input type="text" placeholder="Name">
                    <span>描述</span>
                    <button>SIGN IN</button>
                </div>
			</section>
</div>

三、CSS部分

CSS拓展 1

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%
vh：视窗高度的百分比
vmin：取当前Vw和Vh中较小的那一个值
vmax：取当前Vw和Vh中较大的那一个值

/* 样式初始化 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    background: #ecf0f3;
    /* 弹性布局 内容水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS拓展 2

盒子阴影：

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 /
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/ 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 /
box-shadow: inset 5em 1em gold;
/ 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 主体页面样式 */
.container {
    width: 800px;
    height: 500px;
    /* 盒子阴影 */
    /* 盒子 两个不同方向 效果不同 */
    box-shadow:  10px 10px 10px #dce2eb,
                 -10px -10px 10px  #f7f8f8;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

CSS拓展 3

transition CSS 属性是 transition–property（应用过渡属性的名称）、transition–duration(动画时间)、transition–timing-function（规定过渡效果的速度曲线） 和 transition–delay（过渡效果开始前的等待时间） 的一个简写属性 (en-US)。
transition–timing-function（规定过渡效果的速度曲线）

/* 注册面板 */
.register-login-panel {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0;
    /* ！！！ 注意是右侧 不是左侧 容易犯错 */
    /* 右侧距离 0  */
    right: 0;
    transition: all .6s ease-in-out;
}

/* 点击切换之后的位置 距离为切换之前的模块宽度 */
.register-login-panel-slide {
    right: 300px;
}

CSS拓展 4

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。
接受以下取值：
row： flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
row–reverse ：表现和 row 相同，但是置换了主轴起点和主轴终点。
column ：flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同。
column–reverse ：表现和column相同，但是置换了主轴起点和主轴终点。

.switch-box {
    /*弹性布局*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    transition: all .6s ease-in-out;
}

.switch-box .title {
    font-size: 26px;
    font-weight: 700;
    line-height: 3;
    color:#000;
}

.switch-box p {
    font-size: 12px;
    letter-spacing: 0.25px;
    line-height: 1.6;
    text-align: center;
    color:#a0a5a8;
}

CSS拓展 5

透明效果： opacity 取值范围0-1，0为完全透明，1为完全不透明

/* 透明隐藏 0完全透明 1完全不透明*/
.switch-hidden {
    position: absolute;
    opacity: 0;
}

.switch-hidden-2 {
    position: absolute;
    opacity: 0;
    top: 0;
    z-index:-1;
}

三、JavaScript部分

js 点击按钮时用到 通过获取标签名 点击时切换样式
id 前缀用# class 用.

const switchPanel = document.querySelector('.switch-panel');
const switchPanel_login = document.querySelector('#login');

JQuery事件 toggle方法
通过 toggle 方法来 增加 / 移除 定义好的用来 移动 / 隐藏 元素的样式

// 监听切换按钮点击事件
const switchBtn1 = document.querySelector('#switch1');
switchBtn1.addEventListener('click', switchStyle);
function switchStyle() {
    //点击 切换 需要改变6个样式 div和section， 里面各有两个需要改变
    switchPanel.classList.toggle('switch-panel-slide');
    register_login_Panel.classList.toggle('register-login-panel-slide');

    switchPanel_login.classList.toggle('switch-hidden');
    switchPanel_register.classList.toggle('switch-hidden');

    loginPanel.classList.toggle('switch-hidden-2');
    registerPanel.classList.toggle('switch-hidden-2');
 }

四、总结

    （1）html和css还是需要一定的逻辑性和规范性，以后要注意理清逻辑，不能盲目开始动手，要有目的性，html和css基础++。
    （2）多写多练，心态要好，bug慢慢改（最后一个改不出来对着源代码一个一个。！。），浏览器开发者工具熟练度++。
    （3）不会的多百度，查资料，运用搜索工具熟练++。
    （4）完整代码有点多，放在了github上。同时，这个页面也是我在github上找到的，在我的 github上给出了地址，github熟练度++。

代码007普通

打赏 收藏 海报 链接