2018年08月_zxuanxuanz

原创 CSS3的其他重要样式和属性——颜色相关样式、用户界面相关样式

1 颜色相关样式CSS3中增加了3种颜色值——RGBA 颜色值、HSL颜色值、HSLA颜色值，并且允许通过对RGBA颜色值和HSLA颜色值设定alpha通道的方法来更加容易地实现将半透明文字与图像互相重叠的效果。对RGB颜色设定alpha通道在CSS3中，可以通过对RGB颜色设定alpha通道的方法来定义RGBA颜色。（1）RGBA颜色是指利用红色值（R）、绿色值（G）...

2018-08-26 21:06:04 245

原创 CSS3中布局相关样式——多栏布局、盒布局、弹性盒布局、calc方法

1 多栏布局使用多栏布局可以将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容的底部对齐。 column-count属性在CSS3中，通过该属性来使用多栏布局方式，该属性的含义是将一个元素中的内容分为多栏进行显示。（1）浏览器书写Firefox：“-moz-column-count”Safari、Chorme、Opera：“-webkit-column-coun...

2018-08-23 21:46:02 614

原创 CSS3中的动画功能——Transitions 功能与Animations 功能

1 Transitions功能（1）浏览器支持：到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上、IE11以上浏览器支持该功能。（2）功能在CSS3中，Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。（3）使用方法transition：property durat...

2018-08-23 16:14:04 978

原创 CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）

1 transform属性在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。（1）浏览器支持到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。 2 旋转使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。...

2018-08-23 14:52:28 29153

原创 CSS3中背景与边框相关样式

1 与背景相关的新增属性background-clip：指定背景的显示范围。background-origin：指定绘制背景图像时的起点。background-size：指定背景中图像的尺寸。background-break：指定内联元素的背景图像进行平铺时的循环方式。注意：Firefox浏览器：支持除了background-size属性之外的其他三个属性，需在属性前加上“...

2018-08-23 00:02:13 1072

原创 CSS3的盒类型和相关属性

1 盒的类型在CSS中，使用display属性来定义盒的类型。 block类型 inline类型 inline-block类型（1）在CSS2.1中追加的一个盒类型。（2）目前为止，它受到了Safari、 Chrome、Firefox、Opera、IE8以上版本浏览器的支持。（3）该类型盒属于block类型盒的一种，但是在显示时具有inline类型盒的...

2018-08-22 13:36:58 777

原创 CSS3文字与字体相关样式

1 text-shadow属性（1）功能给页面上的文字添加阴影效果。（2）使用方法text-shadow：length length length color （阴影离开文字的横方向距离、纵方向距离、阴影的模糊半径、阴影的颜色）注意：阴影离开文字的横方向距离、纵方向距离：必须指定，可指定负值。阴影的模糊半径：代表阴影向外模糊时的模糊范围。这个半径值越大，则阴影向外...

2018-08-21 20:28:43 250

原创 CSS3中使用选择器在页面中插入内容

1 使用选择器来插入内容使用after或before选择器，在选择器的content属性中定义要插入的内容，当插入内容为文字的时候，必须要在插入文字的两旁加上单引号或者双引号。<style type="text/css">h2:before{ content：‘COLUMN’；}</style> 2 指定个别元素不进行插入使用content属...

2018-08-20 23:48:30 707

原创 CSS3选择器

1 CSS中的伪元素选择器选择器：伪元素{属性：值；} first-line 用于向某个元素中的第一行文字使用样式。 first-letter 用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。 before 用于在某个元素所有内容之前插入一些内容。 after 用于在某个元素所有内容之后插入...

2018-08-20 22:40:52 252

原创 HTML5 的 JavaScript Promise

1 Promise（1）Promise是一种抽象异步处理的对象，其核心概念为“确保在一件事做完之后，再做另一件事”。（2）浏览器支持：到目前为止：Safari8、 Chrome 34、Firefox30、Opera20以上版本支持该对象。2 创建Promise对象var promise = new Promise(function(resolve,reject){ /...

2018-08-20 18:05:34 685

原创 HTML5 的 Web Stroage

1 cookie的问题（1）大小：cookie的大小被限制在4KB。（2）带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。（3）复杂性：要正确地操纵cookie是很困难的。2 Web Storage 功能：在客户端本地保存数据。 sessionStorage（临时保存）（1）将数据保存在session对象中。（...

2018-08-20 14:41:48 430

原创 HTML5的表单新增属性和元素

1 表单新增属性1.1 表单内元素的 form 属性（1）作用在HTML4中，表单内的从属元素必须书写在表单内部，而在HTML5中，可以把他们书写在页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。<form id="testform"><input type="text"></form...

2018-08-17 16:05:12 690

原创 HTML5的结构

1 新增的主体结构元素1.1 article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。（如一篇博客或报章杂志中的文章）1.2 section元素用来对网站或应用程序中页面上的内容进行分块。（如对文章分段）1.3 nav元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。1.4 aside元素用来表示...

2018-08-16 23:07:01 504

原创 HTML5和HTML4的区别

1HTML5中的标记方法1.1 内容类型（ContentType）HTML5的文件扩展符与内容类型保持不变。即扩展符仍然为".html"或".htm"，内容类型仍然为“text/html”。1.2DOCTYPE HTML4 <！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...

2018-08-16 21:43:50 5338 1

xuan的博客