2017年01月_霜月枫桥

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 <a href="mailto:">发送邮件

如何使用mailto？1）基本用法send email或者mailto后跟的是收信人。可使用参数列表to收信人suject主题cc抄送bcc暗抄送body内容参数传递方式同页面之间传递值一样，可以使用查询字符

2017-01-23 16:06:12 21664 1

转载 HTML5图片映射——<map>+<area>

在一些购物网站，我们总能看到一张大图，上面铺满充满诱惑的礼品，当我们轻轻地用鼠标单击一下，就跳转到这个宝贝的页面。对于这个神奇的功能，身边的小伙伴们往往都被震惊了。要是能够学会这招技能，那该多好啊，以后再也不用去找美工切图，并且也不用为兼容这种浏览器而发愁了。　　其实，对于这个看起来神奇的功能，实现起来却是相当的容易。只需要使用HTML的标签、标签和标签就能实现这个强大的功能。但是如

2017-01-22 10:50:40 3058

原创 js控制多种css样式依次显示

js控制多种css样式依次显示，一共有两种方法，第一种是传统的方法，使用window自带的setTimeout()，第二种是使用addEventListener()。 $(function(){ $("#div2").click(function(){ $("#div2").css({"transform":"translate(200px,100px)

2017-01-18 10:31:58 1906

转载 CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：transform

2017-01-17 14:26:51 4304

转载 text-fill-color加text-stroke实现页面艺术字

语法：text-fill-color：text-fill-color会覆盖color所定义的字体颜色：代码text-fill-color:#f00;color:#000;效果如果你的浏览器支持text-fill-color，将看到我是红色* 在webkit下你将看到红色的文字text-fill-color打造镂空文字：代码

2017-01-16 15:38:36 1066

原创 css样式继承

什么是css 继承？要想了解css样式表的继承，我们先从文档树（HTML DOM）开始。文档树由HTML元素组成。文档树和家族树类似，也有祖先、后代、父亲、孩子和兄弟^_^。这很容易理解吧，笔者在这里就不一一赘述了。希望深入了解的朋友请google之。那么CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。下面举个例子，有如下html代码片段：

2017-01-16 14:58:29 872

原创 js控制HTML元素自身属性的使用

HTML元素有许多自身的属性，例如disabled、readonly、required、selected……这些属性我们可以直接在HTML元素中设置也可以使用js设置HTML的自带属性。js设置HTML自带属性，使用removeAttr()和attr()方法设置HTML元素的属性。其中，attr()可以同时设置多个值，而removeAttr()则同时只能设置一个值。attr()设置

2017-01-16 13:51:51 1944

原创 css3弹性伸缩布局

css3提供了一种崭新的布局方式：Flexbox布局，即弹性伸缩布局模型（Flexible Box），该布局目前处于W3C的草案阶段，分为旧版本、新版本、新旧混合版本三个版本一、旧版本的弹性布局方案旧版本使用的示例如下： …… ……下面的属性都是写在div{ }中的。1、display属性值设为box或inline-boxbox

2017-01-15 21:04:18 1055

原创 columns属性——多列布局

columns[ˈkɑ:ləm] 多列布局与之相关的属性或子属性如下所示一、columns 集成column-width和column-count两个属性二、column-width 定义每列列宽度属性值如下所示：1、auto 默认值，自适应2、长度值设

2017-01-15 21:03:28 11033

原创 css3传统布局+box-sizing+resize

一、页面布局可以分为：固定布局、流动/流体布局、响应式布局HTML布局有三种布局方式，分别为：表格、浮动float、定位position二、元素定位position属性值有：static、relative、absolute、fixed注意：绝对定位属性absolute和fixed的区别absolute绝对定位是相对于static定位以外的第一个父元素进行定位，拖动浏览器的滚

2017-01-15 21:02:57 665

原创 animation属性——css3动画效果

animation css动画属性一、animation实现动画效果主要由两部分组成：1、通过类似flash动画中关键帧声明一个动画2、在animation属性中调用关键帧声明的动画二、主要步骤1、关键帧属性 @keyframes 声明一个关键帧属性的动画例如，在css中书写以下代码@keyframes myani{

2017-01-15 21:02:08 993

原创 transition属性——css3过渡效果

transition 实现过渡效果：通过一些简单的css动作触发平滑过渡功能任何用户动作，都可以触发元素的过渡效果，例如伪类动作:hover、:focus、:active、:checked；例如点击事件等只要使元素（如图片）的样式发生改变，都可以触发该元素的过渡效果。包含属性如下：一、transition-property 指定过渡或动态模拟的css属

2017-01-15 21:00:03 2298

原创 transform属性——css3变形效果3D

由于3D是立体三维，在x、y轴的基础上一般会多出一个z轴，深入跃出轴。要使用transform实现3D效果，首先需要为该元素或该元素的直接父元素设置如下2个属性属性1、transform-style 该属性是指定嵌套元素如何在3D空间中呈现属性值： flat 默认值，表示所有子元素在2D平面呈现 preserve-3d 表示

2017-01-15 20:59:16 3884

原创 transform属性——css3变形效果2D

一、transform 该属性允许我们对元素进行移动、缩放、旋转或倾斜transform的属性值如下所示：1、none 无变换2、translate 可使用长度值或百分数值，在水平方向、垂直方向或两个方向上translateX 平移元素translateY

2017-01-15 20:58:40 2310

原创 border-image，边框图片效果详解

border-image 设置边框图片的效果border-image-source //引入背景图片地址border-image-slice //切割引入的背景图片，只需要写数值，不需要带单位border-image-width //边框背景图片的宽度//如果你设置了边框的宽度border-width

2017-01-15 20:57:51 1628

原创 liferay ga6获取当前语言环境

当前语言环境指的是指的是门户网站cookie中，名为GUEST_LANGUAGE_ID的值，例如简体中文为zh_CN，美国英语为en_USliferay ga6可以在3处获取当前语言环境，分别为theme中，java后台中和jsp页面中一、theme主题中通过liferay自定义的变量$themeDisplay.getLanguageId()二、java后台中ThemeDisp

2017-01-15 20:54:43 804

原创 linear-gradient和radial-gradient属性——css3渐变效果

一、线性渐变 linear-gradient 背景颜色渐变功能该属性一共有三个属性值，分别为：方位(可选)、起始色（必选）、末尾色（必选）方位可以如下取值：1、使用方位，如：to top; to top right; to right; to bottom; to bottom left; to left; to top left；to bottom

2017-01-09 19:39:58 2333

原创 css阴影box-shadow+text-shadow和轮廓outline

一、box-shadow 向框添加一个或多个阴影该属性是由逗号分割的阴影列表，每个阴影是由2——4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。h-shadow 阴影的水平偏移量，是一个长度值，正值向右偏移，负值向左偏移v-shadow 阴影的垂直偏移量，是一个长度值，正值向上偏移，负值向

2017-01-09 19:39:17 1139

原创 css表格和样式

一、border-collapse 设置表格的边框是否合并为一个单一的边框separate 默认值，边框会被分开collapse 边框会合并成一个单一的边框，会忽略border-spacing和empty-cells二、border-spacing 设置表格单元格边框之间的间距三、caption-

2017-01-09 19:38:38 636

原创 css3前缀、rem和浏览器css3支持版本

一、css3的样式，主流浏览器不同版本的支持度不同，可通过http://caniuse.com查看是否需要css3属性加前缀。二、前缀新版本的浏览器都不需要加前缀，加前缀是为了兼容老版本的浏览器，使老版本浏览器也可以使用css3样式。但是，现在的css3已经成为了行业标准，所有的高版本主流浏览器都可以使用css3，因此，部分主流浏览器已经不支持加前缀的css3样式。若你希望自己

2017-01-09 19:38:07 1106

原创 css边框和背景设置

一、initialinitial 关键字用于设置 CSS 属性为它的默认值。initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。他和inherit类似，inherit是使用其父元素的对应属性。二、border-radius 圆角边框的设置border-radius可以设置四个值，分别是左上角、右上角、左下角、右下角。你也可以分开来使用，按

2017-01-09 19:37:20 618

原创 liferay ga6主题工程研究随笔

Liferay主题注意：我使用的liferay ga6环境，主题工程创建时的配置选项为一、在liferay主题（Theme）的编写中，如果要在portal_normal.vm中导入js或css包（例如jQuery包），可以使用以下两种方法：1、2、它们的路径相当于http://localhost:8080/test-theme/js类似的还有$themeDisplay.ge

2017-01-09 19:36:03 413

原创 js中实现验证码功能

Document $(function(){ changeCheckCode(); $("#checkCode").click(function(){ changeCheckCode(); }); });

2017-01-09 19:35:18 882

原创 ajax中JSON.stringify()和JSON.parse()方法的使用

我们平时使用ajax向后台传递数据时，通常会传递json格式的数据（写在dataType中），当然这里还有其它格式，比如xml、html、script、text、jsonp格式。json类型的数据包含json对象和json类型的字符串1、json对象示例如下：var jsondata={"Participant":[{"Name_1":"1","Position_1":"1

2017-01-04 18:58:43 18544

原创 jQuery实现操作框的实现和隐藏功能

问题描述：如下图所示，要实现以下功能。1、实现点击蓝色操作按钮，左边出现操作框。2、再点击一次操作按钮，出现的操作框消失。3、点击其他行的操作按钮，原先的出现操作框消失。4、点击页面空白处，原先出现的操作框消失。js代码如下： var beforeButton=null; $(function(){ // 点击空白

2017-01-04 18:57:37 1285

原创 jQuery之position()方法的具体使用

问题描述：今天我在解决一个HTML块元素显示问题，需求是有一个操作按钮，点击操作按钮，便在该操作按钮左边显示一个块元素，块元素中列出增删改查等操作，点击增删改查可完成该行数据的对应操作。我的jsp代码如下： +操作详细信息删除

2017-01-04 18:56:02 5785

原创 HTML、css、js控制页面元素的显示及个人对浮动的理解

一、HTML、jQuery、css都有自己的控制元素隐藏与显示的功能。HTML使用hidden属性jQuery使用hide(),show(),toggle(),fadeIn(),fadeOut(),fadeTo(),fadeToggle(),slideDown(),slideUp(),slideToggle()css控制元素的隐藏与显示，有display和visibility属性(

2017-01-04 18:51:07 1689

原创 css3字体样式

一、font-family的使用font-family属性可以设置HTML文本的字体样式，eg.*{ font-family: Arial,"Microsoft YaHei";}注意：当字体名称中包括空格、#、$之类的符号，则使用''font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font

2017-01-04 18:50:17 976