15實(shí)現(xiàn)案例css3的引入方式及盒子模型教學(xué)_第1頁
15實(shí)現(xiàn)案例css3的引入方式及盒子模型教學(xué)_第2頁
15實(shí)現(xiàn)案例css3的引入方式及盒子模型教學(xué)_第3頁
15實(shí)現(xiàn)案例css3的引入方式及盒子模型教學(xué)_第4頁
15實(shí)現(xiàn)案例css3的引入方式及盒子模型教學(xué)_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、HTML5 App 商業(yè)開發(fā)實(shí)戰(zhàn)教學(xué)案例能簡介使用 HTML5 引入 CSS3 的樣式，使用 CSS3 的樣式屬性實(shí)現(xiàn)盒子模型，同時使用 CSS3 的動畫實(shí)現(xiàn)按鈕.二、創(chuàng)建或搜集相關(guān)搜集：H5 創(chuàng)新學(xué)院搜集時間：2016-8-29來源：三、適用對象學(xué)生、教師、及 H5 App 開發(fā)、相關(guān)技術(shù)等。四、程序代碼案例一：引入 CSS3 樣式css/layout.css: header,nav,article,footerborder:solid 1px #666; padding:5px; color:#F00;headerwidth:500pxnavfloat:left; width:60px;

2、height:100pxarticlefloat:left;width:428px;height:100pxfooterclear:both; width:500pxhtml 頁面：<!DOCTYPE html><head><meta charset=utf-8><title>頁面結(jié)構(gòu)</title><link href="css/layout.css" rel="stylesheet" type="text/css" /></head><bod

3、y><header class="bgColor">導(dǎo)航部分</header><nav>菜單部分</nav><article>內(nèi)容部分</article><footer>底部說明部分</footer></body></html><!DOCTYPE html><head><meta charset=utf-8><title>頁面結(jié)構(gòu)</title><style type="te

4、xt/css"> import "css/layout.css"</style></head><body><header class="bgColor">導(dǎo)航部分</header><nav>菜單部分</nav><article>內(nèi)容部分</article><footer>底部說明部分</footer></body></html><!DOCTYPE html><head

5、><meta charset=utf-8><title>頁面結(jié)構(gòu)</title><style type="text/css">header,nav,article,footerborder:solid 1px #666;padding:5px;color:#F00 headerwidth:500pxnavfloat:left;width:60px;height:100px articlefloat:left;width:428px;height:100px footerclear:both;width:500px<

6、/style></head><body><header class="bgColor">導(dǎo)航部分</header><nav>菜單部分</nav><article>內(nèi)容部分</article><footer>底部說明部分</footer></body></html><!DOCTYPE html><head><meta charset=utf-8><title>頁面標(biāo)題</ti

7、tle></head><body><p style="color:#f00; font-size: 16px;">H5 創(chuàng)新學(xué)院</p></body></html>案例二：盒子模型<!doctype html><html><head><meta charset="utf-8"><title>CSS Box M</title><style type="text/css"> bo

8、dybackground: #eee;divheight: 240px; width: 360px;border: 5px solid yellow; background: blue; margin: 0 auto;spandisplay: block; width: 50%;height: 50%; background: red;border: 5px solid yellow; color: White;font-size: 14px; font-weight: bold; margin: auto; margin-top: 60px; line-height: 120px; text

9、-align: center;vertical-align: middle;</style></head><body><div><span>Box M</div></body></html>的內(nèi)容</span>案例三：動畫按鈕css/page.css:*margin:0; padding:0;bodycolor:#eee;background:url('./img/page_bg.jpg') repeat-x #f3f3f3; font:15px Calibri,Aria

10、l,sans-serif;border-top:5px solid #212121;#buttonContainer background:url('./img/section_bg.png'); border:1px solid #F4F4F4; margin:120px auto 0;overflow:hidden;padding:20px 0 35px 45px;width:440px;-moz-box-shadow:0 0 10px #C4C4C4;-webkit-box-shadow:0 0 10px #C4C4C4; box-shadow:0 0 10px #C4C

11、4C4;#buttonContainer a float:left;margin:15px 15px 0 0;#footerbackground-color:#212121; position:fixed; width:100%;height:70px; bottom:0;left:0;a.tzinebackground:url("./img/tzine.png") no-repeat right top; border:none;color:#FCFCFC; font-size:12px; height:70px; left:50%;line-height:31px; m

12、argin:23px 0 0 110px; position:absolute; top:0;width:290px;p.notecolor:#999999; font-style:italic;margin:50px 0 120px; text-align:center;text-shadow:1px 1px 0 #FFFFFF;.triborder-color:transparent transparent #212121; border-style:solid;border-width:20px 17px; height:0;left:50%;margin:-40px 0 0 -400p

13、x; position:absolute;top:0;width:0;h1font-size:20px;font-weight:normal; left:50%;margin-left:-400px; padding:25px 0; position:absolute;width:400px;a, a:visited text-decoration:none; outline:none;border-bottom:1px dotted #97cae6; color:#97cae6;a:hoverborder-bottom:1px dashed transparent;.clearclear:b

14、oth;buttons/ buttons.css:.buttonfont:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important;white-space:nowrap;display:inline-block; vertical-align:baseline;position:relative;cursor:pointer;padding:10px 20px;background-repeat:no-repeat; backgroun

15、d-position:bottom left; background-image:url('button_bg.png');background-position:bottom left, top right, 0 0, 0 0;background-clip:border-box;-moz-border-radius:8px;-webkit-border-radius:8px; border-radius:8px;-moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset; box-shad

16、ow:0 0 1px #fff inset;-webkit-transition:background-position 1s;-moz-transition:background-position 1s; transition:background-position 1s;.button:hoverbackground-position:top left;background-position:top left, bottom right, 0 0, 0 0;.button:activebottom:-1px;.button.big.button.medium font-size:30px;

17、 font-size:18px;.button.small font-size:13px;.button.rounded-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em;.blue.buttoncolor:#0f4b6d !important;border:1px solid #84acc3 !important;background-color: #48b5f2;background-image: url('button_bg.png'), url('button_bg.png'

18、;),-moz-radial-gradient(center bottom, circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7, #3faeeb);background-image: url('button_bg.png'), url('button_bg.png'),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,from(rgba(89,208,244,1), to(rgba(89,208

19、,244,0),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb);.blue.button:hoverbackground-color:#63c7fe;background-image: url('button_bg.png'), url('button_bg.png'),-moz-radial-gradient(center bottom, circle,rgba(109,217,250,1) 0,rgba(109,217,250,0)100px),-moz-linear-g

20、radient(#63c7fe, #58bef7);background-image: url('button_bg.png'), url('button_bg.png'),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,from(rgba(109,217,250,1), to(rgba(109,217,250,0),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7);.green.buttoncolor:#345903 !

21、important; border:1px solid #96a37b !important; background-color: #79be1e;background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);background-image:ur

22、l('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0,50% 100%, 100, from(rgba(162,211,30,1), to(rgba(162,211,30,0),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317);.green.button:hoverbackground-color:#89d228;background-image:url('butto

23、n_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0,50% 100%,

24、100, from(rgba(183,229,45,1), to(rgba(183,229,45,0),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e);.orange.buttoncolor:#693e0a !important; border:1px solid #bea280 !important; background-color: #e38d27;background-image:url('button_bg.png'), url('button_bg.png'),

25、-moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0,50% 100%, 100, from(rgba(232,189,45,1), to(rgba(232,189,

26、45,0),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f);.orange.button:hoverbackground-color:#ec9732;background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-g

27、radient(#f9a746, #e18f2b);background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0,50% 100%, 100, from(rgba(241,192,52,1), to(rgba(241,192,52,0),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b);.gray.buttoncolor:#525252 !imp

28、ortant; border:1px solid #a5a5a5 !important; background-color: #a9adb1;background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);background-image:url

29、('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0,50% 100%, 100, from(rgba(197,199,202,1), to(rgba(197,199,202,0),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c);.gray.button:hoverbackground-color:#b6bbc0;background-image:url('butto

30、n_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0,50% 100%

31、, 100, from(rgba(202,205,208,1), to(rgba(202,205,208,0),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9);html 頁面：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3 Animated B

32、ubble Buttons | Tutorialzine Demo</title><link rel="stylesheet" type="text/css" href="css/page.css" /><link rel="stylesheet" type="text/css" href="buttons/buttons.css" /></head><body><div id="buttonContainer"><a href="#" class="button big blue">Big Button</a><a href="#" class="button big green">Big Button</a><a href="#" class="button big orange">Big Button</a><a href

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論