前端-CSS
抱猫睡觉的鱼
前端架构师
展开
-
CSS3特效之渐变:linear-gradient
linear-gradient语法:linear-gradient([ ,]? [, ]+);:[ left | right ]? [ top | bottom ]? || ?: [ | ]?说明可取如下值 left:设置左边为渐变起点的横坐标值。 right:设置右边为渐变起点的横坐标值。 top:设置顶部为渐变起点的纵坐标值。 bottom:设置底部为渐变起点的纵坐原创 2013-04-07 19:49:37 · 1035 阅读 · 0 评论 -
清除浮动技巧总结
总结一下大家在开发过程中遇到的浮动问题,如何清除浮动的技巧。原创 2014-05-23 15:37:04 · 1128 阅读 · 0 评论 -
浮动的前世今生
什么是CSS Float?float 是 css 的定位属性。在传统的印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对 定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视翻译 2014-05-05 14:44:39 · 951 阅读 · 1 评论 -
响应式Web设计在跨终端广告创意中的应用
内容简介 1.为什么要跨终端; 2.需要关注哪些终端; 3.跨终端之路; 4.Cross方案,如何优化跨终端网站; 5.未来终端设备; 6.常用工具;跨终端Web最初尝试之路1. 网页转码(将桌面端的网页转码为WAP版本)2. WAP建站工具(快速搭建无线WAP网站)3. 定制化原创 2014-01-16 15:21:26 · 2411 阅读 · 0 评论 -
使用CSS3的@font-face实现个性化字体
在网页中,我们可以用CSS的font-family属性来定义字体,然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,所以用font-family属性就无法实现了,今天我们就介绍使用@font-face实现个性化字体。CSS3 @font-face 说原创 2013-04-18 13:23:11 · 1131 阅读 · 0 评论 -
JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember
原文地址:http://sporto.github.io/.../comparison-angular-backbone-can-ember/原文作者:Sebastian Porto @Twitter选择JavaScript MVC框架很难。一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思。想知道有哪些JavaScript MVC框架翻译 2013-04-25 17:44:24 · 1433 阅读 · 0 评论 -
一种数据展示方式,UI设计新颖,供大家参考(源码部分) (demo已经上传)
调用方法:var parameter = { url: 'json/report.txt', data: data, marker: 'value', titleClick: function (t) { alert(t.html());原创 2013-04-09 15:45:02 · 1878 阅读 · 0 评论 -
详解CSS3 Transition动画效果
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用语法: transition : [ || || || [,原创 2013-04-09 14:34:39 · 2670 阅读 · 0 评论 -
CSS3特效之转换transform
transform语法transform: none| rotate | scale | skew | translate | matrix;通过transform-origin可以设置转换参考位置,默认值为50% 50%,即 center center1.rotate(angle>):旋转,参照转换中心旋转,如transform:rotate(60deg);2.scale(numbe原创 2013-04-07 19:59:04 · 1040 阅读 · 0 评论 -
CSS3特效之过度transition
transition语法transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]transition-property:all | none | [ ,property> ]*:设置对象中的参与过渡的属性,原创 2013-04-07 19:57:33 · 1248 阅读 · 0 评论 -
CSS3特效之动画animation
animation渐变背景动画悬停背景渐变@-webkit-keyframes changeBg{ 0%{background-color:#000;} 20%{background-color:#300;} 40%{background-color:#600;} 60%{background-color:#900;} 80%{background-color:#f00;}}@原创 2013-04-07 19:55:48 · 1016 阅读 · 0 评论 -
CSS特效之透明 rgba
rgba语法R:红色值。正整数 | 百分数G:绿色值。正整数 | 百分数B:蓝色值。正整数| 百分数A:透明度。取值0~1之间说明RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百原创 2013-04-07 19:54:15 · 1160 阅读 · 0 评论 -
一种数据展示方式,UI设计新颖,供大家参考
这款设计主要是用于进行数据分析和对比,譬如,不同省份的一些不同月份的数据对比(图为China Telecom的一些假数据)。 设计取名为LatticeControl。页面开始,每一个蓝色格子代表一个月份:右侧的数据显示的是对应省份的营业额以及该省份在总体上的比例。当鼠标经过某一项时,显示当前月份的信息:点击某一个格子,当前节的对应项进行高亮显示,同时右侧原创 2013-04-08 14:33:03 · 2982 阅读 · 0 评论 -
CSS3特效之渐变linear-gradient
linear-gradient语法:linear-gradient([ ,]? [, ]+);:[ left | right ]? [ top | bottom ]? || ?: [ | ]?说明可取如下值 left:设置左边为渐变起点的横坐标值。 right:设置右边为渐变起点的横坐标值。 top:设置顶部为渐变起点的纵坐标值。 bottom:设置底部为渐变起点的纵坐原创 2013-04-07 20:00:07 · 1047 阅读 · 0 评论 -
使用flex box(弹性盒子模型)进行页面布局的注意事项
什么时候下使用flex比较方便?flexbox最主要的作用在于我们可以通过这个属性快速设置和操作它的子元素的布局,可以方便地实现居中、居左、居右、两边对齐、垂直居中、水平居中的效果; 一般如果遇到这样的布局要求,使用flex会非常方便:子元素高度不等,垂直居中多栏布局,栏目间隔自适应多栏布局,子元素宽高不等display:flex 、display:box 之间的区别是什么? 本质上来讲原创 2017-05-11 12:01:13 · 3291 阅读 · 0 评论