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