frank201113-CSDN博客

原创简单纯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 1928

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

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

2017-04-16 23:08:59 21636

原创 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 603

原创 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 542

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

以下代码是用弹性布局实现垂直左右居中的例子 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 19949 1

原创弹性布局的一个小实例

Flex布局也叫弹性布局。 Document *{ margin: 0; padding: 0; } li{ width: 50px; height: 50px; background: #18A15E; display: inline-block; }

2017-04-11 10:02:43 3250

原创用canvas画矩形

canvas是HTML5的新特性，我们可以用它来轻松地画一个矩形代码如下：高度自适应布局 function draw(id){ var canvas = document.getElemen

2017-04-06 21:17:29 3505

原创通过反射机制调用某个类的方法

要通过反射机制调用某个类的方法，主要用到了下面这个方法：public Object invoke(Object obj,Object... args)这个方法对带有指定参数的指定对象调用由此 Method 对象表示的底层方法。个别参数被自动解包，以便与基本形参相匹配，基本参数和引用参数都随需服从方法调用转换。参数：obj - 从中调用底层方法的对象args - 用于方法调用的参

2017-02-04 14:27:30 26376

原创 Java反射之Method Class.getMethod(String name, Class<?>... parameterTypes)

Method Class.getMethod(String name, Class... parameterTypes)的作用是获得对象所声明的公开方法该方法的第一个参数name是要获得方法的名字，第二个参数parameterTypes是按声明顺序标识该方法形参类型。person.getClass().getMethod("Speak", null);//获得person对象的Sp

2017-02-03 15:06:21 36465 2

原创 Java反射之getInterfaces()方法

今天学习Spring3框架，在理解模拟实现Spring Ioc容器的时候遇到了getInterfaces()方法。getInterfaces()方法和Java的反射机制有关。它能够获得这个对象所实现的接口。例如：Class string01 = person.getClass().getInterfaces()[0];//获得person对象所实现的第一个接口详细的例子如下：P

2017-02-02 21:22:47 22874 5

原创 json-lib 日期处理类的一些用法

今天继续研究基于S2SH的网上商城项目，其中涉及了json-lib中日期处理类的一些用法，现在讲解如下：要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：1.commons-lang.jar2.commons-beanutils.jar3.commons-collections.jar4.commons-logging.jar 5.ez

2017-01-21 20:38:25 1939

原创如何理解PHP正则表达式中$1、$2、$3......

关于PHP正则表达式中的一些问题解读

2016-11-19 20:00:51 5542

原创 background一些用法

background: url("images/57.jpg") #000000;前面的图片会覆盖后面的颜色。

2016-09-06 19:12:22 353

原创 JS数据类型

NaN在JavaScript中属于number类型，它有一个非常特别的特性：NaN != NaN（NaN不等于NaN）。

2016-08-30 15:23:55 310

原创绝对定位下实现水平或垂直居中

在非绝对定位的情况下，用margin: 0 auto; 就能实现容器的水平居中了，但是在绝对定位的情况下，用margin: 0 auto; 是没有效果的。在绝对定位的情况下，可以设置left: 50%; margin-left : 容器宽度的负一半; 来实现，实现垂直居中的原理和实现水平居中的原理是一样的。示例代码：.out{ width: 300px;

2016-08-27 23:34:04 527

原创 body元素的背景色

今天下午在研究3D旋转导航的代码的时候无意中发现了body元素设置背景色的特殊情况，即body的背景色是不受body本身的宽高的影响的。示例代码： Document html{ height: 100px; } body{ margin:0; padding:0; background-color:#f00; height: 2

2016-08-23 18:18:52 7329

原创 CSS伪类与CSS伪元素

一直会把CSS伪类和CSS伪元素弄混，所以特意记录在。

2016-08-22 15:37:35 393

原创 CSS3的一些新属性

强制文本在一行内显示：white-space: nowrap;

2016-08-03 14:23:27 383

原创 CSS reset

这是一份CSS的重置样式表。/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquo

2016-07-30 21:15:13 423

原创响应式布局代码

今天看到了一个响应式布局的代码，觉得很好，特地记录在此，以供日后参考。 Document *{ padding: 0; margin: 0; } .col-3{ width: 25%; background: #D45224; } [class^="col-"],[class*="col-"]{ float: left; min-heigh

2016-07-28 10:42:00 2010

转载 margin之百分比

转载自http://www.ituring.com.cn/article/64581假设有这样一个场景我们以一个问题开始：假设一个块级包含容器，宽1000px，高600px，块级子元素定义 margin:10% 5%; 大家说说 margin 的 top, right, bottom, left 计算值最终是多少？我记得得到不少 100px 30px 100px 30px 的反

2016-07-22 21:26:36 660