摘要: 自由缩放属性resize 为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止,可以使用overflow属性的任何容器元素。 在此之前,Web设计师为了要实现这样具有拖动效果的UI,使用大量的脚本代码才 阅读全文
posted @ 2018-12-07 22:17 双眸 阅读(88) 评论(0) 推荐(0) 编辑
摘要: Media Queries——媒体类型(一) 随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样,但至少要让你的Web页面能适配用户的终端,让他更好 阅读全文
posted @ 2018-12-07 22:06 双眸 阅读(101) 评论(0) 推荐(0) 编辑
摘要: 伸缩布局(一) CSS3引入了一种新的布局模式—— Flexbox布局,即伸缩布局盒模型(Flexible Box) ,用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简称为 Flex 。 Flexbox布局常用于设计比较复杂的页面,可以轻松的实现屏 阅读全文
posted @ 2018-12-07 21:51 双眸 阅读(136) 评论(0) 推荐(0) 编辑
摘要: Keyframes介绍 Keyframes被称为 关键帧 ,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: 阅读全文
posted @ 2018-12-07 21:33 双眸 阅读(94) 评论(0) 推荐(0) 编辑
摘要: 变形 旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。如下图所示: HTML代码: CSS代码: .w 阅读全文
posted @ 2018-12-07 21:17 双眸 阅读(193) 评论(0) 推荐(0) 编辑
摘要: :enabled选择器 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 示例演示 通过“:enabled 阅读全文
posted @ 2018-12-07 19:51 双眸 阅读(99) 评论(0) 推荐(0) 编辑
摘要: 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择 阅读全文
posted @ 2018-12-07 19:46 双眸 阅读(129) 评论(0) 推荐(0) 编辑
摘要: background origin 设置元素背景图片的原始起始位置。 语法: background origin : border box | padding box | content box; 参数分别表示背景图片是从 边框 ,还是 内边距(默认值) ,或者是 内容区域 开始显示。 效果如下: 阅读全文
posted @ 2018-12-07 19:28 双眸 阅读(123) 评论(0) 推荐(0) 编辑
摘要: text overflow 与 word wrap text overflow :用来设置是否使用一个省略标记(...)标示对象内文本的溢出。 语法: 但是text overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white spac 阅读全文
posted @ 2018-12-07 19:19 双眸 阅读(108) 评论(0) 推荐(0) 编辑
摘要: 颜色之RGBA RGB 是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法: color:rgba(R,G,B,A) 以上R、G、B三个参数,正整数值的取值范围为:0 255。百分数值的取值范围为 阅读全文
posted @ 2018-12-07 19:11 双眸 阅读(334) 评论(0) 推荐(0) 编辑
摘要: 圆角效果 border radius border radius是向元素添加圆角边框。 使用方法: 不要以为border radius的值只能用 px 单位,你还可以用百分比或者 em ,但兼容性目前还不太好。 实心上半圆: 方法:把高度(height)设为宽度(width)的一半,并且只设置左上角 阅读全文
posted @ 2018-12-07 19:04 双眸 阅读(156) 评论(0) 推荐(0) 编辑
摘要: 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器 chrome、safari、firefox、opera 、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。 在编写CSS3样式时,不同的浏 阅读全文
posted @ 2018-12-07 18:37 双眸 阅读(108) 评论(0) 推荐(0) 编辑
摘要: 单行文本溢出显示省略号(…) text overflow:ellipsis 部分浏览器还需要加宽度width属性 多行文本溢出显示省略号 ● WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属 阅读全文
posted @ 2018-12-07 13:27 双眸 阅读(192) 评论(0) 推荐(0) 编辑
摘要: 伪类 伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。常见的几种伪类是: :link , :visited , :hover , :active , :first child 以及 :nth child。 这里还有很多,接下来我们将要逐一进行介绍。此外,伪类前面总是加 阅读全文
posted @ 2018-12-07 12:42 双眸 阅读(568) 评论(0) 推荐(0) 编辑
摘要: 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word wrap; word break; white space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地: word wrap语法: word wrap: normal( 阅读全文
posted @ 2018-12-07 12:22 双眸 阅读(1474) 评论(0) 推荐(0) 编辑
摘要: 概念介绍: 1、px (pixel,像素): 是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。 2、em 阅读全文
posted @ 2018-12-07 11:49 双眸 阅读(497) 评论(0) 推荐(0) 编辑