- 博客(22)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 CSS3 timing-function: steps()介绍
在应用 CSS3 渐变/动画时，有个控制时间的属性 。它的取值中除了常用到的三次贝塞尔曲线以外，还有个steps() 函数。 steps 函数指定了一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。#demo { animation-it
2015-08-16 16:20:06
1990
原创 更多关于z-index
在我以前的认知里，在一些定位元素中（position为absolute、fixed或者relative），z-index越大就显示在越前面。比如下面的例子： wrap1、wrap2、wrap3和box的position均为absolute，其中box为wrap1的子元素，z-index为10。.wrap{ position: absolute;}
2015-07-27 10:52:29
685
原创 做一个萌萌哒的button之图标字体
接上两篇：http://blog.youkuaiyun.com/u010037043/article/details/47035087http://blog.youkuaiyun.com/u010037043/article/details/47035077 图中两个王冠就是图标字体，这里主要是介绍怎样使用图标字体，怎样制作图标字体见文章末尾连接。一、为什么使用图标字体
2015-07-24 07:49:16
1219
原创 做一个萌萌哒的button之box-shadow
接上篇：http://blog.youkuaiyun.com/u010037043/article/details/47035077一、box-shadowbox-shadow是给元素块添加周边阴影效果。box-shadow: inset X-offset Y-offset blur spread color ;box-shadow:[投影方式] X轴偏移量 Y轴偏移量
2015-07-24 07:46:34
2341
原创 [前端小博客]做一个萌萌哒的button之渐变
主要涉及三个点：渐变、阴影、data-icon。本着轻博客，每天轻松一个点的原则，将分三篇进行。^v^这一篇是渐变篇。本文以webkit核心浏览器为例，各个浏览器支持情况如下图：1.webkit核心浏览器下的的基本语法如下：-webkit-gradient(type, start_point, end_point, / stop...)-webkit-gradient(typ
2015-07-24 07:44:25
2076
原创 做个友好的链接
主要两点：a.根据具体的链接给出图片提示；b.鼠标移至链接上出现具体的内容提示； 1.给链接添加图片 这里主要运用到css的属性选择器E[attr$="value"]，表示拥有属性attr，且属性值以value结尾的元素E。举个栗子：a[href$=".zip"]
2015-07-16 10:08:42
545
原创 介绍background-clip给你
首先上一张背景知识图。 background-clip用来确定背景的裁剪区域，可取以下值： 1.border-box:此值为默认值，背景从border区域向外裁剪，超出部分将被裁剪掉。为了看的更明显，我将padding和border设置为20px； padding: 20px; border: dashed 20px rgba(152,10,
2015-07-15 09:48:07
993
原创 float：center？？？
老规矩，先上图（请忽略图中文字^V^）： 乍一看感觉是对中间的图片使用了float:center;但是仔细一想float属性是没有center这个值的。那是怎么实现的呢？我一步一步拆给大家看。1.构建主体结构 container中放置两个子元素，分别float:left和float:right;2.使用伪元素:before为中间的im
2015-07-14 09:30:14
2868
原创 demo总结
最近在模仿做一个点击打开链接这样的demo，整个过程中学习了很多东西，现在总结如下：1.动态设置font-size结合rem实现自适应布局 a.动态获取屏幕的width和height，并计算出它们与设计稿（这个demo以iPhone5的尺寸为原始尺寸320x568px）宽高的比例，取两个比例的最小值（scale）。 b.原始font-size为1
2015-06-26 17:32:01
575
原创 使用*｛padding:0;｝遇到的坑
像很多人一样，初学者我喜欢在css的最开头用*｛padding:0;｝，在做信用卡通知系统界面时我被这个坑了两次，在此mark。一、table的cellpadding设置无效 在写一个table时，发现cellpadding设置无效，查找原因后是因为*｛padding:0;｝导致的。 解决方法有两种： 1.使用td的paddin
2015-05-13 10:07:28
4090
原创 好用的负margin
负margin是一个很好用的属性，这里主要介绍几种我碰到的情景。一、自适应布局 这个在前面的三栏布局中已经介绍，负margin和float组合使用，详见http://km.oa.com/group/23033/articles/show/225239二、去除列表右边距 项目中经常会使用浮动列表展示信息，为了美观通常为每个li元素之间设置一定的间
2015-05-12 09:39:25
524
原创 css绘制图形
第一次想用css绘制图形是在做一个列表时，想用三角形作为列表的图标，后来发现，css可以绘制各种图形，主要是利用border属性。一、三角形 根据不同的border设置可以绘制上三角，下三角，左三角，右三角等各种三角形，这里介绍下三角。 1.将元素大小设置为0 。#triangle-down{width: 0; height: 0;}
2015-05-11 11:37:59
569
原创 伪元素实现纸张卷角效果
先上效果图: 主要是使用了伪元素：before和：after，伪元素虽然是不存在的，但是它表现的就跟普通元素是一样的，可以调整大小、背景等。实现步骤:1.新建一个div，即图中的白色“纸张”2.利用伪类创建两个灰色的方块，并倾斜，且为它设置阴影：.effect:before, .effect:after{ position: abso
2015-05-08 10:15:59
851
原创 那些年我会的三栏布局
三栏布局是很常见的布局样式，这里介绍两种三栏布局的方法。方法一：绝对定位法 1. 左右两栏采用绝对定位，分别固定于页面的左右两侧； 2.中间的主体栏用margin-left和margin-right为左右两栏留下空间； demo戳这里：三栏布局之绝对定位法.left-side{width:300px;height:100%;positio
2015-05-07 11:10:28
469
原创 csss实现元素居中
元素居中分为垂直居中、水平居中、水平和垂直都居中，这里主要介绍几种常见的使元素水平、垂直都居中的方法。方法一：负margin 1.将待居中元素box设置为绝对定位，left:50%，top:50%； 2.利用负margin值调整到居中，margin-left取负的box宽度的一半，margin-top取负的box高度的一半； 缺点：需要提前知道待
2015-05-06 14:11:46
728
原创 float使用陷阱
float定位很常用，我在这里总结了使用float定位过程中遇到的几个陷阱，供大家参考。陷阱一：父元素丢失高度 没有显式定义高度的父元素依靠子元素撑起高度，一旦子元素浮动定位，父元素将丢失高度。解决方法：将父元素的overflow设置为auto。陷阱二：与其他同级非浮动元素重叠 元素浮动定位后，它原来占据的空间会被其他元素补上，与它发生重叠。解决
2015-05-06 14:10:40
561
原创 计算机网络学习第一天----简单入门
一、分组交换分组交换采用存储转发技术。通常将要发送的整块数据称为一个报文，在发送报文之前，通常将报文划分为若干等长的数据段。在每个数据段前面加上有一些控制信息（目的地址、源地址等）组成的首部（header）后，就构成一个分组（packet）。分组可以称为包，首部可以称为包头。路由器：路由用来转发分组，当路由收到一个分组后，它会先将分组暂时存入内存，然
2014-11-06 16:27:13
880
原创 system property
获得java系统信息的一个类，是私有的构造函数，所以它的函数都是静态的，可以直接调用，System.getProperty()函数根据参数返回一些系统信息，参数有很多java.versionJava 运行时环境版本java.vendorJava 运行时环境供应商java.vendor.url
2014-09-03 13:43:56
443
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人