- 浏览: 3290031 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
animation , keyframes
.rotate {
-webkit-transform-style: preserve-3d;/*保留被转换的子元素3d属性*/
-webkit-animation-name: refreshing;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes refreshing {
0% { -webkit-transform: rotateZ(0deg); }
25% { -webkit-transform: rotateZ(90deg); }
50% { -webkit-transform: rotateZ(180deg); }
75% { -webkit-transform: rotateZ(270deg); }
100% { -webkit-transform: rotateZ(360deg); }
}
-webkit-gradient 线性渐变
第一个参数:linear
第二个参数:两个坐标left top, right top即左上角和右上角,也是0% 0%, 100% 0%
(0%表示最左,最上)
第三个参数:from rgba
第四个参数:to rgba
例子:
.nav-mask {
background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(rgba(255,255,255,.95)));
}
background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.7)));
第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%,当x1,x2,y1,y2取值为极值的时候,x1和x2可以取值left(或0%)或right(或100%),,y1和y2可以取值top(或0%)或bottom(或100%);
当x1等于x2,y1不等于y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;
当y1等于y2,x1不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;
当y1不等于y2,x1不等于x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
当x1等于x2,y1等于y2,实现没有渐变,取from色,即“ from(颜色值) ”;
display:box情况下的 box-pack,box-flex
box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。
值: start|end|center|justify;
div#DemoArea{
display:box;
box-pack:center;
}
box-align:center;同box-pack的含义。
#inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 25px solid yellow;
padding: 25px;
background-color: red;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
在 translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的,为了说明这一点,我们在 innner 元素加上一些 padding 和 border
-webkit-box-flex:3;
box-flex 属性规定框的子元素是否可伸缩其尺寸。
提示:可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间。
value 元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。
div{
display:-moz-box;
display:-webkit-box /* 外面是box */
display:box;
width:300px;
border:1px solid black;
}
#p1{
-moz-box-flex:1.0;
-webkit-box-flex:2.0;
box-flex:1.0; /* 里面是box-flex是1.0 */
border:1px solid red;
}
#p2{
-moz-box-flex:2.0;
-webkit-box-flex:1.0;
box-flex:2.0; /* 里面是box-flex是2.0 */
border:1px solid blue;
}
vertical-align:-2px;
-2px 表示在父元素bottom向下两个像素
-20% 也表示向下line-height高度的20%
如果开发中使用的是height与line-height相同的取值,会大大减少不同浏览器出现差别的情况
white-space: nowrap;
规定段落中的文本不进行换行
white-space 属性设置如何处理元素内的空白。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
-webkit-border-top-left-radius:100%;
如果border-radius:100%就是四个角都是100%,相当于把正方形变成圆型。
如果是一个长方形,则border-radius:100%会变成椭圆。
如果只对左上角设置border-top-left-radius:100%表示只有左上角变成圆形。
background新增的3改CSS3属性
(1)background-clip 规定背景的绘制区域。
规定背景的绘制区域:
border-box 背景被裁剪到边框盒。 测试
padding-box 背景被裁剪到内边距框。 测试
content-box 背景被裁剪到内容框。
div{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;/*分别试验3个值*/
border:2px solid #92b901;
}
(2)background-origin 规定背景图片的定位区域。
相对于内容框来定位背景图像。这个比较容易理解就是以谁为准显示图片,到底是以content,padding,还是border为准。
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
#MyDIV{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:content-box;/* 依次变化3个值试试 */
background-repeat:no-repeat;
}
如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
(3)background-size 规定背景图片的尺寸。
像素表示,background-size:24px 15px;即width=24px,height=15px
百分比表示,如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
background-size:25%;只有x,没有y。相当于一张图片,在x方向上占父元素的4分之一,在y方向上占完父元素(即默认100%),这样背景中有四张横向排列的图片。
background-size:25% 50%;表示x方向上占父元素的四分之一,y方向上占父元素的二分之一,这样背景中共有8张图片,共两行(y 50%),每行四个图片(x 20%)
注意:如果不想重复,则可以使用background-repeat:no-repeat;
(4)CSS3 允许您为元素使用多个背景图像。
实例 为 body 元素设置两幅背景图片:
body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
复习原来的属性:
background-attachment scroll | fixed -- 定义背景图片随滚动轴的移动方式
相对于浏览器视窗来说的,不管这个元素在什么地方,如果它的background-attachment为fixed,则它的背景的位置就与它本身无关了,因为它的背景始终是参照浏览器的可见视窗来定位的。
background-position center/left/top, x% y%, Xpx Ypx
第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
例子:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
animation , keyframes
.rotate {
-webkit-transform-style: preserve-3d;/*保留被转换的子元素3d属性*/
-webkit-animation-name: refreshing;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes refreshing {
0% { -webkit-transform: rotateZ(0deg); }
25% { -webkit-transform: rotateZ(90deg); }
50% { -webkit-transform: rotateZ(180deg); }
75% { -webkit-transform: rotateZ(270deg); }
100% { -webkit-transform: rotateZ(360deg); }
}
-webkit-gradient 线性渐变
第一个参数:linear
第二个参数:两个坐标left top, right top即左上角和右上角,也是0% 0%, 100% 0%
(0%表示最左,最上)
第三个参数:from rgba
第四个参数:to rgba
例子:
.nav-mask {
background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(rgba(255,255,255,.95)));
}
background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.7)));
第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%,当x1,x2,y1,y2取值为极值的时候,x1和x2可以取值left(或0%)或right(或100%),,y1和y2可以取值top(或0%)或bottom(或100%);
当x1等于x2,y1不等于y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;
当y1等于y2,x1不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;
当y1不等于y2,x1不等于x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
当x1等于x2,y1等于y2,实现没有渐变,取from色,即“ from(颜色值) ”;
display:box情况下的 box-pack,box-flex
box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。
值: start|end|center|justify;
div#DemoArea{
display:box;
box-pack:center;
}
box-align:center;同box-pack的含义。
#inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 25px solid yellow;
padding: 25px;
background-color: red;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
在 translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的,为了说明这一点,我们在 innner 元素加上一些 padding 和 border
-webkit-box-flex:3;
box-flex 属性规定框的子元素是否可伸缩其尺寸。
提示:可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间。
value 元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。
div{
display:-moz-box;
display:-webkit-box /* 外面是box */
display:box;
width:300px;
border:1px solid black;
}
#p1{
-moz-box-flex:1.0;
-webkit-box-flex:2.0;
box-flex:1.0; /* 里面是box-flex是1.0 */
border:1px solid red;
}
#p2{
-moz-box-flex:2.0;
-webkit-box-flex:1.0;
box-flex:2.0; /* 里面是box-flex是2.0 */
border:1px solid blue;
}
vertical-align:-2px;
-2px 表示在父元素bottom向下两个像素
-20% 也表示向下line-height高度的20%
如果开发中使用的是height与line-height相同的取值,会大大减少不同浏览器出现差别的情况
white-space: nowrap;
规定段落中的文本不进行换行
white-space 属性设置如何处理元素内的空白。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
-webkit-border-top-left-radius:100%;
如果border-radius:100%就是四个角都是100%,相当于把正方形变成圆型。
如果是一个长方形,则border-radius:100%会变成椭圆。
如果只对左上角设置border-top-left-radius:100%表示只有左上角变成圆形。
background新增的3改CSS3属性
(1)background-clip 规定背景的绘制区域。
规定背景的绘制区域:
border-box 背景被裁剪到边框盒。 测试
padding-box 背景被裁剪到内边距框。 测试
content-box 背景被裁剪到内容框。
div{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;/*分别试验3个值*/
border:2px solid #92b901;
}
(2)background-origin 规定背景图片的定位区域。
相对于内容框来定位背景图像。这个比较容易理解就是以谁为准显示图片,到底是以content,padding,还是border为准。
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
#MyDIV{
padding:25px;
border:10px dotted #000000;
background-image:url('/i/eg_smile.gif');
background-origin:content-box;/* 依次变化3个值试试 */
background-repeat:no-repeat;
}
如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
(3)background-size 规定背景图片的尺寸。
像素表示,background-size:24px 15px;即width=24px,height=15px
百分比表示,如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
background-size:25%;只有x,没有y。相当于一张图片,在x方向上占父元素的4分之一,在y方向上占完父元素(即默认100%),这样背景中有四张横向排列的图片。
background-size:25% 50%;表示x方向上占父元素的四分之一,y方向上占父元素的二分之一,这样背景中共有8张图片,共两行(y 50%),每行四个图片(x 20%)
注意:如果不想重复,则可以使用background-repeat:no-repeat;
(4)CSS3 允许您为元素使用多个背景图像。
实例 为 body 元素设置两幅背景图片:
body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }
复习原来的属性:
background-attachment scroll | fixed -- 定义背景图片随滚动轴的移动方式
相对于浏览器视窗来说的,不管这个元素在什么地方,如果它的background-attachment为fixed,则它的背景的位置就与它本身无关了,因为它的背景始终是参照浏览器的可见视窗来定位的。
background-position center/left/top, x% y%, Xpx Ypx
第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
例子:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
发表评论
-
静态时间轴和动态时间轴实现原理
2015-07-12 17:24 5669作者:zccst 一、静态时间轴,仅css即可 HTML结构 ... -
css3 webkit属性
2015-05-06 13:57 1423作者:zccst 见了很多web-kit打头的css属性,但 ... -
[css3特效]loading加载中
2015-03-25 15:53 3543作者:zccst 以前loading都是一张图片,显示或隐藏 ... -
display,position和float之间的关系
2015-03-17 12:18 5517作者:zccst 对‘display ... -
CSS中的几种颜色表示法,如hsla
2015-03-15 17:47 1335作者:zccst 平常相对熟悉的也就RGB色了,其他基本不清 ... -
[css3]知识点(自己总结版)
2015-03-13 20:11 1350作者:zccst CSS3是一个包含多方面的知识,主要分两大 ... -
[css3]流式布局要点
2015-03-08 13:16 3318作者:zccst 让一个div水平、垂直居中 一、流 ... -
单行溢出和多行文本溢出
2015-03-05 18:54 6746作者:zccst 一、单行溢 ... -
table表格内容过多时自动换行css
2014-12-04 20:44 8127作者:zccst 总结了一下 ... -
div+css布局总结
2014-09-04 10:48 1391作者:zccst 3,position布局 #wrap ... -
print打印网页相关
2014-06-10 10:24 768作者:zccst 1,CSS <link hr ... -
CSS基础:text-overflow:ellipsis溢出文本
2014-01-15 17:12 37957作者:zccst 2015-06-19 今 ... -
纯CSS来画基本的矩形、圆形、椭圆、三角形、多边形等
2014-01-06 13:52 4583作者:zccst 2015-3-18 除了常规的三角形外,还 ... -
让table和table中的TD在指定区域滚动
2013-10-28 20:14 3839使用的属性如下: <div style="w ... -
div被撑大
2012-06-26 22:26 2116作者:zccst 情形二:外层div高度自适应,内部还有div ... -
常见CSS设置
2012-06-19 11:35 1103作者:zccst 1,图片与文字垂直对齐 办法一、设置块元素 ... -
自适应网页设计
2012-06-13 10:58 1100zccst转载 原地址:http:// ... -
CSS颜色代码
2012-05-17 17:02 1210作者:zccst 虽然CSS代码颜色有RGB组成,看似简单, ... -
CSS较好的网站推荐
2012-05-01 16:51 1120作者:zccst 在每一个领域都会诞生很多优秀的专业网站, ... -
background-position释义
2012-05-01 16:37 1247作者:zccst background-pos ...
相关推荐
关于 JS CSS HTML 知识点的积累 面试题等new!web前端开发!
本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和... 本教程结构清晰,讲解到位,内容实用,知识点覆盖面广,适合初、中级网页设计爱好者以及希望学习Web标准对原有网站进行重构的网页设计者。
前端开发学习也是一样的从简单的基础的知识点开始慢慢积累,首先就是掌握前端语言的基础知识3大部分(HTML、CSS、页面制作工具)其中包含了元素和属性、表单和图形处理、CSS基本语法与选择器、文本、边框、轮廓与...
适合新手学习制作网页及相关知识,CSS+DIV相关知识点的积累,适合新手初学和了解HTML的技术应用。
3.分维度培养:从业务理解、经验积累、规范性、质量控制、团队意识和软件生命周期六个方面进行训练。 4.分层次深入:主要分为初次使用、理解加深和灵活应用这三个层次。学员理解为更为透彻,掌握更为牢固。 ...
用思维导图的方式重新学习前端,还有我积累的知识点总结及复盘干货哦! 思维导图 javascript对象 正则表达式 功能 ES6 Vue 巴别塔 CI / CD 格式化和短绒 Git分支管理和版本控制 算法和数据结构 知识积累 下面是...
==============================string-Method字符串方法总汇==============================node-Knowledge-pointsnodejs知识点积累!==============================vue-demo and vue knowledge==
知识在于积累 关注公众号,可以及时接收更新哦 欢迎大家Star:glowing_star::glowing_star: React系列 ES6系列 函数部分 变量的解构赋值 字符串扩展 数值的扩展 Symbol Set和Map Proxy和Reflect Promise Vue.js系列 ...
Extibax-Portfolio-V2 这是Extibax Portfolio V2,将开始开发此Portfolio,以开始正确地积累个人... CSS3 引导程序4.3.1 真棒字体5.8.1 AOS 动画标题 粒子 平滑滚动 JavaScript jQuery查询 PHP 作曲家 PHPMailer
这里可以让你寻找到使用或者是学习作者建立的前端知识体系, ...vue你应该知道的知识点 vue-配置按需加载 React 10分钟了解react新特性hooks hooks之memo和useCallback useRequest封装 权限管理 从零
不要放过任何一个看上去很简单的小问题–他们往往并不那么简单,或者可以引伸出很多知识点;不会举一反三你就永远学不会; 知道一点东西,并不能说明你会全部,需要经验积累; 看再多的书是学不全的,要多实践...
全书共分11章,主要以范例集的方式来讲述Android的知识点,详细介绍了开发Android的人机交互界面、Android常用的开发控件、Android手机收发短信等通信服务、开发Android手机的自动服务功能和娱乐多媒体功能以及整合...
在学习前端的过程中发现知识点比较琐碎,自己整理的时候比较分散,希望在这里将自己学过的内容进行集中整合,形成自己的一套体系,便于以后回顾:grinning_squinting_face:想了很久决定从事前端开发,希望自己学会...
全书共分11章,主要以范例集的方式来讲述Android的知识点,详细介绍了开发Android的人机交互界面、Android常用的开发控件、Android手机收发短信等通信服务、开发Android手机的自动服务功能和娱乐多媒体功能以及整合...
全书共分11章,主要以范例集的方式来讲述Android的知识点,详细介绍了开发Android的人机交互界面、Android常用的开发控件、Android手机收发短信等通信服务、开发Android手机的自动服务功能和娱乐多媒体功能以及整合...
全书共分11章,主要以范例集的方式来讲述Android的知识点,详细介绍了开发Android的人机交互界面、Android常用的开发控件、Android手机收发短信等通信服务、开发Android手机的自动服务功能和娱乐多媒体功能以及整合...
这个时候大家都胸怀壮志,两眼发光的盯着每一个崭新的知识点,遇见了任何一个知识点都恨不得抠的清清楚楚,明明白白。 难道这有什么不对吗? 我的意见是,没什么大毛病,但是学习效率太低了!我们推荐的学习方式...
路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记。 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直...
随着技术、经验的不断积累,你会逐步关注分析、设计等更高层次的知识,这时候,你可进一步学习相关的UML、模式等知识(积累了一定经验,你就可以安排自己学习这些知识了)。 6. 小结 永远记住:自始至终,实践是学习...