H5/C3实践(1) --布局要求&注册页面制作&图片与文字居中对齐&大数据焦点图&两面翻转

1、Tab栏原理-布局要求

必须有两部分组成

2、注册页面制作

注意:注册页面比较隐私,为保护用户信息,不需要对当前页面做SEO优化。

2.1.注册页面类名命名

3、图片与文字居中对齐

只需要给图片的css中添加

vertical-align: middle;

就可以了。

4、大数据焦点图

1. 首先绝对定位设置一个圆点。

2. 在相同位置设置两个圆，圆用阴影做，横纵坐标不变。

3. 设置动画

@keyframes pulse {

0% {}

70% {

/* transform: scale(5); 不要用scale 因为他会让阴影变大*/

width: 40px;

height: 40px;

opacity: 1;/*透明度*/

}

I

100% {

width: 70px;

height: 70px;

opacity: 0;

}

4. 设置时间差，两个圆就会在不同时间变化

5、两面翻转

1. 创建两个盒子

<div class="box">

	<div class-"front">1222222</div>

	<div class="back" >3444444</div>

</div>

● box父盒子里面包含前后两个子盒子。

● box是翻转的盒子front是前面盒子back是后面盒子。

2. 将盒子设置定位，并且重叠。

3. 将被背面的盒子沿Y轴旋转180度

4. 将父级盒子沿Y轴旋转180度。

注意 ：

①box指定大小,切记要添加3d呈现

②back盒子要沿着Y轴翻转180度

③最后鼠标经过box沿着Y旋转180deg