php基礎(chǔ)班筆記課件html5css3課程

1、泰牛程序員PHP學(xué)院-做中國(guó)搶手程序員 第20頁(yè) 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特點(diǎn) PAGEREF _Toc449992333 h

2、1 HYPERLINK l _Toc449992334 3.HTML5新增標(biāo)簽及屬性 PAGEREF _Toc449992334 h 1 HYPERLINK l _Toc449992335 4.主體結(jié)構(gòu)標(biāo)簽 PAGEREF _Toc449992335 h 1 HYPERLINK l _Toc449992336 5.details,summary,mark標(biāo)簽 PAGEREF _Toc449992336 h 1 HYPERLINK l _Toc449992337 6.多媒體的標(biāo)簽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.新增偽類(lèi)選擇器 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的屬性來(lái)實(shí)現(xiàn)div在屏幕居中左右上下居中 PAGEREF _Toc449992347 h 1

5、HYPERLINK l _Toc449992348 6.2d旋轉(zhuǎn)的效果transform transform-origin PAGEREF _Toc449992348 h 1 HYPERLINK l _Toc449992349 7.css3的斜切效果 PAGEREF _Toc449992349 h 1 HYPERLINK l _Toc449992350 8.圖片旋轉(zhuǎn)的效果 PAGEREF _Toc449992350 h 1 HYPERLINK l _Toc449992351 9.3d的沿著x軸底部旋轉(zhuǎn) PAGEREF _Toc449992351 h 1HTML5HTML5介紹HTML5 將成為

6、 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。官方概念：HTML5草案的前身名為Web Applications 1.0，是作為下一代互聯(lián)網(wǎng)標(biāo)準(zhǔn),用于取代html4與xhtml1 的新一代標(biāo)準(zhǔn)版本,所以叫html5。它增加了新的標(biāo)簽和屬性，加強(qiáng)了網(wǎng)頁(yè)的標(biāo)準(zhǔn)、語(yǔ)義化與web表現(xiàn)性能，同時(shí)還增加了本地?cái)?shù)據(jù)庫(kù)等 Web 應(yīng)用的功能。HTML5一般現(xiàn)在都在制作動(dòng)畫(huà)。HTML5特點(diǎn)更簡(jiǎn)單-寫(xiě)法更簡(jiǎn)單，如：doctype 標(biāo)簽語(yǔ)義化-所有的標(biāo)記都是有意義的了，如：div calss=”header”，header nav 語(yǔ)法更寬松- 增加了強(qiáng)

7、大的畫(huà)布標(biāo)簽-必須配合js使用一些標(biāo)簽不再建議使用(比如: applet、font、basefont、center、dirs、strike、u等)多設(shè)備跨平臺(tái)自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì),兼容性好-響應(yīng)式-網(wǎng)頁(yè)根據(jù)屏幕大小自動(dòng)的改變頁(yè)面的內(nèi)容大小主體結(jié)構(gòu)標(biāo)簽details,summary,mark標(biāo)簽-動(dòng)態(tài)下拉展示效果多媒體的標(biāo)簽video和audioInput公共屬性Input元素屬性Text/submit/password/checkbox/select/radio/textarea/image/reset/button/file/hidden/通用屬性contenteditable, 和hiddenC

8、ontenteditable：把普通元素做成可以輸入內(nèi)容的元素Hidden：隱藏屬性CSS3新增選擇器新增偽類(lèi)選擇器案例：網(wǎng)頁(yè)標(biāo)題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 的各個(gè)屬性值的說(shuō)明 :box-shadow:3px 3px 3px 3px #f00 inset;box-shadow 的各個(gè)屬性值的說(shuō)明 :水平陰影 垂直陰影 羽化值 陰影的大小 陰影顏色 陰影類(lèi)別內(nèi)陰影|外陰

10、影案例：網(wǎng)頁(yè)標(biāo)題.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：以原點(diǎn)為坐標(biāo)進(jìn)行移動(dòng)的方式6.2d旋轉(zhuǎn)的效果transform transform-origin7css3的斜切效果圖片旋轉(zhuǎn)的效果9.3d的沿著x軸底部旋轉(zhuǎn)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倍*/案例：照片墻網(wǎng)頁(yè)標(biāo)題.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