2017年04月_frank201113

06月 05月 04月 02月 01月

原创纯JS实现的简单tab选项卡切换效果

本人在上一篇文章也写了用JS来实现tab选项卡切换效果，但是上次的那个代码比较复杂，这次是简化版的。 Tab效果 ul{ list-style: none; } *{ margin: 0; padding: 0; } #tab{ border: 1px solid #ccc; margin: 20px auto; width

2017-04-22 16:25:34 11706 1

原创简单纯js实现网页tab选项卡切换效果

tab选项卡切换效果是在网页中的常见效果，实现它的方法也很简单。代码如下：简单纯js实现网页tab选项卡切换效果*{margin:0;padding:0;}body{font-size:14px;font-family:"Microsoft YaHei";}ul,li{list-style:none;}#tab{position:relative;}#tab .tab

2017-04-17 10:49:06 1850

原创用Flex实现的百分比布局

弹性布局在移动端页面非常的有用，弹性布局主要利用的是CSS3的flex属性。下面分享一个用flex来实现百分比布局的方法，这在移动端中是很常用的一种适配方法。代码如下： Flex布局 .Grid{ display: flex; } .Grid-cell{ flex: 1;

2017-04-16 23:08:59 20919

原创 vw，vh视区完全覆盖与纯CSS弹框

vw，vh视区完全覆盖与纯CSS弹框今天本人用了css的相对视窗单位vw和vh制作了一个效果，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vw，vh视区完全覆盖与纯CSS弹框</title> <style type="text/css"> .dialog_

2017-04-15 22:09:23 556

原创 vh单位模拟office word效果

今天早上在学习圣杯布局的时候遇到了vw和vh，一开始我并不知道vw和vh是什么，后来查了一些资料才明白。vw 相对于视窗的宽度：视窗宽度是100vw；即1vw = (1/100) * 视窗的宽度。vh 相对于视窗的高度：视窗高度是100vh；即1vh = (1/100) * 视窗的高度。视窗指浏览器内部的可视区域大小，即window.innerWidth/windo

2017-04-12 23:03:31 507

原创用弹性布局实现垂直左右居中

以下代码是用弹性布局实现垂直左右居中的例子 Document *{ margin: 0; padding: 0; } .wrap{ width: 100px; height: 100px; border: 1px solid #000; margin: 3.125em auto; display: fle

2017-04-11 11:14:16 19729 1