文章目录
前言
一个简单的登录页面,写写改改练练手,没有复杂的逻辑,用了HTML和CSS写页面和样式,通过JavaScript实现点击按钮切换状态。源码地址:我的Github。
一、效果图
二、HTML部分
这部分需要注意的地方:
1.点击按钮时切换是通过js事件和改变html元素类名进而样式改变实现的,所以需要注意要改变的地方。
2.两个板块的空间合理分配,使用section标签。
3.命名规范。
4.字体图标需要自己下载,推荐阿里字体图标库。
5.写完一部分页面就写css,调整页面布局,边写边调。
页面布局逻辑:
1.主体容器 功能页面位于容器中
<div class="container">
<!-- 两个单页面 字和按钮 -->
<div class="switch-panel"> <!-- 此处需改变 -->
<!-- 登录 -->
<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熟练度++。