- 浏览: 3319123 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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
CSS3是一个包含多方面的知识,主要分两大类,一类是在css2基层上改进的,另一类是完全新增的
批注:这里只是提纲,具体知识点可参考:http://zccst.iteye.com/blog/2192532
首先是媒体查询,这个是入口
@media screen and (min-width:400px)
一、在原有基础上改进和升级
1,盒模型
box-sizing: border-box / content-box
display: table / table-cell / box
table/table-cell与vertical-align=midden用来布局垂直居中的(同top:50%,left:50%,translate:-50% -50%;)
box相关的有display:box, box-pack(对齐),box-align,box-flex(子元素伸缩)
background:
background-clip(裁剪区域),
background-origin(对齐参考区域),
background-size(尺寸大小)
border-radius: border-top-left-radius:100%;
border-shadow:
border-image:
2,文本、列表、表格等HTML元素增强
text-overflow:
text-shadow:
3,增强类选择器
[class=""]
nth-child(n)
:first
:last
::before
::after
二、全新的
1,线性渐变,用于增强网页效果,不需要背景图片了
gradient n. 倾斜度, 升降率, 坡度 adj. 倾斜的;步行的
短语 pressure gradient 气压梯度 temperature gradient 温度梯度
(1)线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
默认是从上到下:{height: 200px;background: -webkit-linear-gradient(red, blue);}
还可以从左到右:background: -webkit-linear-gradient(left, red , blue);
还可以对角线Diagonal:background: -webkit-linear-gradient(left top, red , blue);
旋转角度:background: -webkit-linear-gradient(180deg, red, blue);
background: -webkit-linear-gradient(red, green, blue);
http://www.w3cplus.com/css3/new-css3-linear-gradient.html
(2)圆形渐变
略
2,动画,用来取代Flash效果的
(1) transform 对元素进行旋转、缩放、移动或倾斜
例如:
transform: translate(50px,100px);//打开时已经到坐标(50px,100px)
批注:translate(0,-142%);//x轴不变,y轴向上提示自身高度的1.42倍。相当于把自己从地面站到距地面高度是你身高的1.42倍的位置。如果你的身高是两米,执行完translate(0, -142%),就站在2.82米高的位置。
rotate 沿X,Y,Z轴旋转,其中Z适合用来loading
scale(x,y) 缩放,沿X轴缩放x倍,沿Y轴缩放y倍。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
(2) transition 过渡是元素从一种样式逐渐改变为另一种的效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
例如:transition: width 2s;
(3) animation , keyframes
-webkit-animation-name: refreshing;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-delay 在动画开始之前的延迟
animation-direction是否应该轮流反向播放动画。
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
3,
CSS3是一个包含多方面的知识,主要分两大类,一类是在css2基层上改进的,另一类是完全新增的
批注:这里只是提纲,具体知识点可参考:http://zccst.iteye.com/blog/2192532
首先是媒体查询,这个是入口
@media screen and (min-width:400px)
一、在原有基础上改进和升级
1,盒模型
box-sizing: border-box / content-box
display: table / table-cell / box
table/table-cell与vertical-align=midden用来布局垂直居中的(同top:50%,left:50%,translate:-50% -50%;)
box相关的有display:box, box-pack(对齐),box-align,box-flex(子元素伸缩)
background:
background-clip(裁剪区域),
background-origin(对齐参考区域),
background-size(尺寸大小)
border-radius: border-top-left-radius:100%;
border-shadow:
border-image:
2,文本、列表、表格等HTML元素增强
text-overflow:
text-shadow:
3,增强类选择器
[class=""]
nth-child(n)
:first
:last
::before
::after
二、全新的
1,线性渐变,用于增强网页效果,不需要背景图片了
gradient n. 倾斜度, 升降率, 坡度 adj. 倾斜的;步行的
短语 pressure gradient 气压梯度 temperature gradient 温度梯度
(1)线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
默认是从上到下:{height: 200px;background: -webkit-linear-gradient(red, blue);}
还可以从左到右:background: -webkit-linear-gradient(left, red , blue);
还可以对角线Diagonal:background: -webkit-linear-gradient(left top, red , blue);
旋转角度:background: -webkit-linear-gradient(180deg, red, blue);
background: -webkit-linear-gradient(red, green, blue);
http://www.w3cplus.com/css3/new-css3-linear-gradient.html
(2)圆形渐变
略
2,动画,用来取代Flash效果的
(1) transform 对元素进行旋转、缩放、移动或倾斜
例如:
transform: translate(50px,100px);//打开时已经到坐标(50px,100px)
批注:translate(0,-142%);//x轴不变,y轴向上提示自身高度的1.42倍。相当于把自己从地面站到距地面高度是你身高的1.42倍的位置。如果你的身高是两米,执行完translate(0, -142%),就站在2.82米高的位置。
rotate 沿X,Y,Z轴旋转,其中Z适合用来loading
scale(x,y) 缩放,沿X轴缩放x倍,沿Y轴缩放y倍。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
(2) transition 过渡是元素从一种样式逐渐改变为另一种的效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
例如:transition: width 2s;
(3) animation , keyframes
-webkit-animation-name: refreshing;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-delay 在动画开始之前的延迟
animation-direction是否应该轮流反向播放动画。
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
3,
发表评论
-
静态时间轴和动态时间轴实现原理
2015-07-12 17:24 5725作者:zccst 一、静态时间轴,仅css即可 HTML结构 ... -
css3 webkit属性
2015-05-06 13:57 1522作者:zccst 见了很多web-kit打头的css属性,但 ... -
[css3特效]loading加载中
2015-03-25 15:53 3593作者:zccst 以前loading都是一张图片,显示或隐藏 ... -
display,position和float之间的关系
2015-03-17 12:18 5598作者:zccst 对‘display ... -
CSS中的几种颜色表示法,如hsla
2015-03-15 17:47 1383作者:zccst 平常相对熟悉的也就RGB色了,其他基本不清 ... -
[css3]知识点积累
2015-03-14 22:28 1249作者:zccst animation , keyframe ... -
[css3]流式布局要点
2015-03-08 13:16 3363作者:zccst 让一个div水平、垂直居中 一、流 ... -
单行溢出和多行文本溢出
2015-03-05 18:54 6798作者:zccst 一、单行溢 ... -
table表格内容过多时自动换行css
2014-12-04 20:44 8232作者:zccst 总结了一下 ... -
div+css布局总结
2014-09-04 10:48 1425作者:zccst 3,position布局 #wrap ... -
print打印网页相关
2014-06-10 10:24 816作者:zccst 1,CSS <link hr ... -
CSS基础:text-overflow:ellipsis溢出文本
2014-01-15 17:12 38050作者:zccst 2015-06-19 今 ... -
纯CSS来画基本的矩形、圆形、椭圆、三角形、多边形等
2014-01-06 13:52 4662作者:zccst 2015-3-18 除了常规的三角形外,还 ... -
让table和table中的TD在指定区域滚动
2013-10-28 20:14 3912使用的属性如下: <div style="w ... -
div被撑大
2012-06-26 22:26 2165作者:zccst 情形二:外层div高度自适应,内部还有div ... -
常见CSS设置
2012-06-19 11:35 1162作者:zccst 1,图片与文字垂直对齐 办法一、设置块元素 ... -
自适应网页设计
2012-06-13 10:58 1147zccst转载 原地址:http:// ... -
CSS颜色代码
2012-05-17 17:02 1255作者:zccst 虽然CSS代码颜色有RGB组成,看似简单, ... -
CSS较好的网站推荐
2012-05-01 16:51 1189作者:zccst 在每一个领域都会诞生很多优秀的专业网站, ... -
background-position释义
2012-05-01 16:37 1292作者:zccst background-pos ...
相关推荐
css3笔记知识点总结
html+css知识点总结
讲解一些刚入门的有关css的知识点,有助于我们能更容易的学懂css语言,例如表单制作,框架等等。
html、css知识点,归纳整理。包括基本标签、样式、例子、运行环境等。欢迎大家讨论、更正,共同进步!
首先,网页版的CSS知识点总结可能是一个在线交互式的文档,通过浏览器访问,用户可以方便地浏览、搜索和学习各个CSS概念。这种形式便于动态交互和实时更新,适合网络教学和自我学习。 图片版CSS知识点总结通常是以...
HTML+CSS+JavaScript 知识点总结 HTML 基础知识: 1. HTML 是网页内容的载体,负责承载网页的内容。 2. HTML 标签不区分大小写,但建议使用小写。 3. 一个 HTML 文件由和两部分组成,用于定义文档的头部,用于承载...
CSS知识点总结中包含了关于CSS3的基础概念和属性应用的详细说明。CSS,全称为层叠样式表(Cascading Style Sheets),是一种用于描述HTML或XML(包括各种XML方言,如SVG或XHTML)文档的样式的语言。下面将详细介绍...
从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加...于是CSS便诞生了。
Css (层叠样式表)是种格式化网页的标准方式, 用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。...本资源完整详细的记录了CSS 面试知识点总结,有需要的朋友可以下载学习。
CSS,全称为层叠样式表(Cascading Style Sheets),是一种用于描述网页呈现样式的标记语言,控制网页的布局、格式和颜色等。...通过上述对CSS知识点的归纳和总结,希望能帮助到大家更好地理解和运用CSS。
CSS3和html5的知识点总结,适合入门的朋友预览。是学习CSS3之前,预习的好知识点。
前端 HTML+CSS+JavaScript 知识点总结
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...本资源是CSS 面试知识点总结合集,有需要的朋友可以下载学习。
【CSS3主要知识点总结】 CSS3是CSS的最新版本,引入了大量新的特性和改进,极大地增强了网页设计的灵活性和表现力。以下是CSS3的一些关键知识点: 1. **CSS属性编写顺序** 在编写CSS样式时,建议按照一定的顺序...
HTML 和 CSS 是构建网页的基本语言,它们在...这些只是 HTML 和 CSS 的一部分基础知识,实际应用中还涉及到更复杂的布局、响应式设计、浏览器兼容性以及性能优化等方面。持续学习和实践是成为优秀前端开发者的关键。
我们用pycharm写CSS的时候,是不是苦于没有提示,那么pycharm中如何显示CSS提示呢?下面小编给大家分享一下。 首先点击左上角的file菜单,选择Setting 接着选择Editor下面的Inspections选项,如下图所示 然后在...
新手html css 基础知识总结
HTML+CSS入门知识点总结 HTML(HyperText Markup Language)是用于创建网页的标准标记语言,而CSS(Cascading Style Sheets)是用于控制网页样式的语言。本文将总结HTML+CSS的入门知识点,涵盖HTML的基本结构、CSS...