php基础班笔记课件html5css3课程

1、泰牛程序员PHP学院-做中国抢手程序员 第20页 HTML5+CSS3目录 TOC o 1-3 h z u HYPERLINK l _Toc449992330 HTML5+CSS3 PAGEREF _Toc449992330 h 1 HYPERLINK l _Toc449992331 第一章HTML5 PAGEREF _Toc449992331 h 1 HYPERLINK l _Toc449992332 1.HTML5介绍 PAGEREF _Toc449992332 h 1 HYPERLINK l _Toc449992333 2.HTML5特点 PAGEREF _Toc449992333 h

2、1 HYPERLINK l _Toc449992334 3.HTML5新增标签及属性 PAGEREF _Toc449992334 h 1 HYPERLINK l _Toc449992335 4.主体结构标签 PAGEREF _Toc449992335 h 1 HYPERLINK l _Toc449992336 5.details,summary,mark标签 PAGEREF _Toc449992336 h 1 HYPERLINK l _Toc449992337 6.多媒体的标签video和audio PAGEREF _Toc449992337 h 1 HYPERLINK l _Toc44999

3、2338 7.Input公共属性 PAGEREF _Toc449992338 h 1 HYPERLINK l _Toc449992339 8.Input元素属性 PAGEREF _Toc449992339 h 1 HYPERLINK l _Toc449992340 9.通用属性contenteditable, 和hidden PAGEREF _Toc449992340 h 1 HYPERLINK l _Toc449992341 第二章CSS3 PAGEREF _Toc449992341 h 1 HYPERLINK l _Toc449992342 1.新增选择器 PAGEREF _Toc4499

4、92342 h 1 HYPERLINK l _Toc449992343 2.新增伪类选择器 PAGEREF _Toc449992343 h 1 HYPERLINK l _Toc449992345 3.border-radius属性 PAGEREF _Toc449992345 h 1 HYPERLINK l _Toc449992346 4.box-shadow属性 PAGEREF _Toc449992346 h 1 HYPERLINK l _Toc449992347 5.使用css3的transform的属性来实现div在屏幕居中左右上下居中 PAGEREF _Toc449992347 h 1

5、HYPERLINK l _Toc449992348 6.2d旋转的效果transform transform-origin PAGEREF _Toc449992348 h 1 HYPERLINK l _Toc449992349 7.css3的斜切效果 PAGEREF _Toc449992349 h 1 HYPERLINK l _Toc449992350 8.图片旋转的效果 PAGEREF _Toc449992350 h 1 HYPERLINK l _Toc449992351 9.3d的沿着x轴底部旋转 PAGEREF _Toc449992351 h 1HTML5HTML5介绍HTML5 将成为

6、 HTML、XHTML 以及 HTML DOM 的新标准。大部分现代浏览器已经具备了某些 HTML5 支持。官方概念：HTML5草案的前身名为Web Applications 1.0，是作为下一代互联网标准,用于取代html4与xhtml1 的新一代标准版本,所以叫html5。它增加了新的标签和属性，加强了网页的标准、语义化与web表现性能，同时还增加了本地数据库等 Web 应用的功能。HTML5一般现在都在制作动画。HTML5特点更简单-写法更简单，如：doctype 标签语义化-所有的标记都是有意义的了，如：div calss=”header”，header nav 语法更宽松- 增加了强

7、大的画布标签-必须配合js使用一些标签不再建议使用(比如: applet、font、basefont、center、dirs、strike、u等)多设备跨平台自适应网页设计,兼容性好-响应式-网页根据屏幕大小自动的改变页面的内容大小主体结构标签details,summary,mark标签-动态下拉展示效果多媒体的标签video和audioInput公共属性Input元素属性Text/submit/password/checkbox/select/radio/textarea/image/reset/button/file/hidden/通用属性contenteditable, 和hiddenC

8、ontenteditable：把普通元素做成可以输入内容的元素Hidden：隐藏属性CSS3新增选择器新增伪类选择器案例：网页标题div border:1px solid red;height:27px;input height:20px;float:left;div:before content:;background:url(./images/tu1.png) no-repeat;width:25px;height:25px;display:inline-block;float:left;margin-right:5px;div:after content:;background:url(

9、./images/tu2.png) no-repeat;width:25px;height:25px;display:inline-block;float:left;margin-left:5px;border-radius属性Border-radius是圆角的意思box-shadow属性box-shadow:3px 3px 3px 3px #f00 inset;box-shadow 的各个属性值的说明 :box-shadow:3px 3px 3px 3px #f00 inset;box-shadow 的各个属性值的说明 :水平阴影 垂直阴影 羽化值 阴影的大小 阴影颜色 阴影类别内阴影|外阴

10、影案例：网页标题.iphone width:250px;height:450px;background:#2e2e2e;margin:50px auto;border:10px solid #3b3b3b;border-radius:40px;position:relative;.iphone:before content:;width:40px;height:8px;background:#2e2e2e;display:block;border-radius:3px 3px 0px 0px;position:absolute;top:-16px;right:50px;.iphone:afte

11、r content:;width:8px;height:60px;background:#2e2e2e;display:block;border-radius:3px 0px 0px 3px;position:absolute;top:50px;left:-17px;.sxt width:8px;height:8px;border-radius:50%;border:5px solid #4a4a4a;position:absolute;top:20px;left:47%;box-shadow:1px 1px 1px 0px #000;.tt width:80px;height:7px;bor

12、der-radius:50px;border:5px solid #4a4a4a;position:absolute;top:50px;left:33%;box-shadow:1px 1px 1px 0px #000;.pm width:220px;height:300px;background:#000;border:5px solid #1a1a1a;position:absolute;top:80px;left:10px;.aj width:40px;height:40px;background:#1a1a1a;border-radius:50%;box-shadow:2px 2px 2

13、px 0px #000 inset;position:absolute;bottom:10px;left:43%;.home width:20px;height:20px;border:3px solid #fff;border-radius:5px;margin-top:7px;margin-left:7px; 块元素居中显示（transform定位）Translate：以原点为坐标进行移动的方式6.2d旋转的效果transform transform-origin7css3的斜切效果图片旋转的效果9.3d的沿着x轴底部旋转10.放大效果/*transform:scale(0.5);*/ /

14、*x轴和Y轴都是缩放0.5倍*/*transform:scaleX(0.5);*/*在x的方向上缩放0.5倍*/transform:scale(2,3); /*X轴缩放2倍，Y轴缩放3倍*/案例：照片墙网页标题.box margin-top:100px;.pic width:160px;img padding:10px 10px 15px 10px;border:1px solid #eee;box-shadow:2px 2px 2px 0px #bbb;position:absolute;z-index:1;transition:all 0.5s;.pic1 top:50px;left:300px;transform:rotate(36deg);.pic2 top:50px;left:200px;transform:rotate(36deg);.pic3 top:30px;left:100px;transform:rotate(36deg);.pic4 top:0px;left:600px;transform:rotate(36deg);.pic5 top:0px;left:700px;tran