【CSS3学习笔记】22:传统布局 下

本节学习一下定位布局,以及在布局中出现的一些问题,以及用CSS提供的属性去解决问题。 [1]position定位属性 这个属性用于规定元素的定位类型。 *定位前<!DOCTYPE html> <html lang="zh-cn&am...

2017-09-02 12:09:24

阅读数 370

评论数 0

【CSS3学习笔记】21:传统布局 上

本节学习早期使用的传统布局,它们在现在还是很有用的。 [1]布局模型 早期web页面的设置主要是面对PC端的,宽度总是大于高度。从最低的分辨率1024*768来设计往往就可以,为了不出现横向的滚动条,宽度往往要减去一些,如设置成996或者更小一些。当用一些分辨率更高的显示器时,我们这样设计的页...

2017-09-02 08:58:46

阅读数 441

评论数 0

【CSS3学习笔记】20:动画效果

通过CSS3动画效果可以像Flash关键帧那样控制动画,比上节学的过渡效果更灵活。 [1]总的animation属性 用于实现动画,流程:①先创建一个关键帧声明的动画 ②通过animation绑定声明的动画 即用@keyframes(关键帧属性)声明一个动画,然后再通过animation...

2017-09-02 01:18:11

阅读数 492

评论数 0

【CSS3学习笔记】19:过渡效果

利用CSS3提供的过渡效果可以不借助JavaScript实现简单的用户交互功能。 [1]总的transition属性 利用这个属性,结合一些简单的CSS动作(如:hover)来触发平滑过渡功能,也就产生了过渡效果。 复习:前面说的:hover属于伪选择器中的伪类选择器中的动态伪类选择器,...

2017-09-01 23:28:26

阅读数 606

评论数 0

【CSS3学习笔记】18:变形效果 下

本节主要接着上节的2D平面变形学习怎么做3D立体变形。3D变形对浏览器版本的要求比2D要高一些,并且在x,y轴的基础上还会多出一个z轴。 [1]transform属性 还是用这个属性指定变形效果,2D或3D用的都是它。 其中translateZ(z)相当于translate3d(0px...

2017-09-01 20:38:56

阅读数 404

评论数 0

【CSS3学习笔记】17:变形效果 上

本节学习通过CSS3中的变形效果,做到平移、缩放、旋转元素。 [1]transform属性 这个属性用于指定变形效果。 注:以下的参考点只是作为一个不动点来比对参考,并不是操作的基准点,基准点默认在盒子中心*移动前<!DOCTYPE html> &lt...

2017-08-31 21:11:12

阅读数 476

评论数 0

【CSS3学习笔记】16:边框图片效果

通过边框背景这个新特性可以让我们的边框更加丰富。 相关属性 ①border-image-source 引入图片背景地址 ②border-image-slice 切割背景图片 (通过设置四个值来知道四个角要显示的尺寸,在这里加入fill可以将内部填充) ③border-image-widt...

2017-08-31 12:20:00

阅读数 1091

评论数 0

【CSS3学习笔记】15:CSS3渐变效果

本节学习CSS3中背景渐变功能,主要有线性渐变和径向(放射性)渐变。 [1]线性渐变background-image: linear-gradient(方位,起始色,末尾色);方位有:to top,to top right,to right,to bottom,to bottom left,to...

2017-08-31 10:28:52

阅读数 662

评论数 0

【CSS3学习笔记】14:文本效果

本节学习CSS3中一些文本属性的设置。[1]文本阴影text-shadow: 横向 纵向 模糊度 颜色;可以作多重阴影叠加。[2]文本裁剪 把溢出的部分裁剪掉,然后判断是否加省略号。要配合其它属性一起用。 不能换行:white-space: nowrap;控制溢出:overflow: hidd...

2017-08-31 01:00:22

阅读数 590

评论数 0

【CSS3学习笔记】13:浏览器兼容性前缀,新单位rem

本节学习了CSS3中的新属性前缀和新的长度单位rem。前缀 CSS3中一些新属性推出时,还不太稳定,随时可能被修改或者删除,浏览器厂商为了使用它们就要采用自己的前缀。 Chrome前缀-webkit-(手机端的引擎也一般都是webkit,如要加前缀也是加-webkit-),Opera前缀-o-...

2017-08-21 19:30:49

阅读数 363

评论数 0

【CSS3学习笔记】12:颜色,透明度,阴影,轮廓,光标样式

本节主要学习一下颜色和透明度,还有阴影和轮廓等,以及鼠标的光标样式。[1]opacity为透明度,值在0~1之间,它对前景色和背景色都起作用。 [2]box-shadow为盒子的阴影和轮廓,hoffset水平偏移量,voffset垂直偏移量,blur模糊值,spread阴影延伸半径,color阴...

2017-08-20 21:30:10

阅读数 278

评论数 0

【CSS3学习笔记】11:表格和列表的样式

本节学习表格与列表中独有的CSS样式。表格的独有样式 [1]border-collapse边框是否合并,separate为默认的独立,collapse为合并。 [2]border-spacing边框间距,只在上一个属性为独立时有效。 [3]caption-side设置表格标题(caption...

2017-08-20 20:59:51

阅读数 697

评论数 0

【CSS3学习笔记】10:CSS设置背景

本节学习CSS中的背景,边框和背景都可以使盒模型可见化。 ①background-color设置背景颜色,使用transparent可以设置为透明色(默认)。 ②background-image设置背景图片,使用none可以取消背景图片的设置。 ③background-repeat设置背...

2017-07-17 22:28:14

阅读数 412

评论数 0

【CSS3学习笔记】9:CSS中的边框

本节学习CSS中的边框。声明边框主要有三个属性: border-style:边框样式,border-width边框宽度,border-color边框颜色。其中border-style是必须写的。border-style的值: none去掉边框,dashed破折线,dotted圆点线,doubl...

2017-07-16 17:25:36

阅读数 476

评论数 0

【CSS3学习笔记】8:CSS盒模型 下

本节学习元素的可见性、盒子的各种类型、浮动问题。元素可见性 visibility的三种属性:①visible即默认可见。②hidden隐藏。③collapse隐藏表格的行与列(有的浏览器不支持)。*测试代码<!DOCTYPE html> <html la...

2017-07-13 23:39:30

阅读数 624

评论数 0

【CSS3学习笔记】7:CSS盒模型 上

本节学习元素的尺寸、元素的边距以及内容溢出等问题。元素尺寸 ①weight宽度。②height高度。③min-width最小宽度。④min-height最小高度。⑤max-width最大宽度。⑥max-height最大高度。 最大最小主要是应对可能动态产生元素尺寸变大变小的问题,从而限制它的最...

2017-07-13 20:19:32

阅读数 324

评论数 0

【CSS3学习笔记】6:CSS文本样式 下

本节学习CSS中通过文本样式的设置,来更改样式以及文本的方位等。 文本样式 主要分为三种:文本装饰、英文大小写装换、文本阴影。text-decoration用来给文本加线条。 ①underline下划线。②overline上划线。③line-through删除线。④none取消划线。text...

2017-07-13 13:13:52

阅读数 490

评论数 0

【CSS3学习笔记】5:CSS文本样式 上

本节学习CSS中通过文本样式的设置,来更改字体样式等。 font-size用来设置字体大小。 ①直接用数字+px表示多少像素。②用一个层级值xx-small,x-small,small,medium,large,x-large,xx-large从小到大。③使用smaller和larger表...

2017-07-08 12:02:54

阅读数 436

评论数 0

【CSS3学习笔记】4:颜色和度量单位

本节学习CSS颜色和度量单位等问题,包括颜色选取方式,相对长度和绝对长度等。颜色的表示方式有三种:颜色名称/16进制代码/10进制代码。 ①颜色名称表示法,可以查询HTML颜色表。 ②16进制代码表示,即#后跟6位16进制数。 ③10进制代码表示常用有两种,即如rgb(0,128,128)和...

2017-07-06 22:54:57

阅读数 702

评论数 0

【CSS3学习笔记】3:CSS中的选择器 下

伪类选择器可以分为四种:结构性伪类、UI伪类、动态伪类、其它伪类。 伪类都需要加上前置的选择器来限制范围。 结构性伪类选择器 根据元素在文档中的位置选择元素,这类元素都有一个前缀(:)。 1.根元素选择器 匹配文档中的根元素,很少使用,因为总是匹配元素。 :root{ } 2.子元素选择器...

2017-06-23 00:54:19

阅读数 392

评论数 1

提示
确定要删除当前文章?
取消 删除
关闭
关闭