《網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML+CSS+JavaScript）》課件-CORE-06_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML+CSS+JavaScript）》課件-CORE-06_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML+CSS+JavaScript）》課件-CORE-06_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML+CSS+JavaScript）》課件-CORE-06_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML+CSS+JavaScript）》課件-CORE-06_第5頁(yè)
已閱讀5頁(yè)，還剩54頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第六章CSS應(yīng)用美化網(wǎng)頁(yè)多樣的超鏈接鏈接顏色的設(shè)置不同的鏈接顏色<html><head><title>不同的鏈接顏色</title><styletype="text/css"> <!-- a:link{color:red} a:visited{color:blue} a:hover{color:green} a:active{color:yellow} --></style></head><body><ahref="">天津迅騰濱海科技有限公司新聞網(wǎng)</a>（注意點(diǎn)擊時(shí)的顏色變化）

</body></html>美化網(wǎng)頁(yè)多樣的超鏈接去除下劃線的鏈接<html><head><title>無(wú)下劃線的鏈接</title><styletype="text/css"> <!-- a{text-decoration:none} a:link{color:red} a:visited{color:blue} a:active{color:yellow} a:hover{color:green;font-size:18px} --></style></head><body><ahref="">天津迅騰濱?？萍加邢薰拘侣劸W(wǎng)</a></body></html>美化網(wǎng)頁(yè)華麗的滾動(dòng)條立體滾動(dòng)條的制作多彩的滾動(dòng)條<html><head><title>多彩的滾動(dòng)條</title><styletype="text/css"> <!-- body{scrollbar-face-color:lightgreen;scrollbar-shadow-color:purple; scrollbar-highlight-color:purple;scrollbar-track-color:red; scrollbar-3dlight-color:yellow;scrollbar-darkshadow-color:green; scrollbar-arrow-color:red} --></style></head><body><imgsrc="images/top.jpg"></body></html>美化網(wǎng)頁(yè)炫目的光標(biāo)取值樣式取值樣式取值樣式取值樣式auto同defaultpointer手伸食指nw-resize西北箭頭s-resize向南箭頭help問(wèn)號(hào)move十字箭頭n-resize向北箭頭w-resize向西箭頭crosshair“十”字e-resize向東箭頭se-resize東南箭頭text“工”字default默認(rèn)ne-resize東北箭頭sw-resize西南箭頭wait沙漏<html><head><title>光標(biāo)樣式</title><styletype="text/css"> <!-- a:link{color:red} a:visited{color:blue} a:active{color:yellow} a:hover{color:green;cursor:help} --></style></head><body><ahref="">天津迅騰濱?？萍加邢薰拘侣劸W(wǎng)</a></body></html>區(qū)域與層區(qū)域的概念在網(wǎng)頁(yè)上劃出特定的一塊，在這個(gè)塊可以包含文字、圖片和表格等各種網(wǎng)頁(yè)組件，這個(gè)塊就是區(qū)域。區(qū)域的作用是劃分網(wǎng)頁(yè)——把密切相關(guān)的組件組織在一起，以便集體設(shè)置；并把它們同別的組件區(qū)分開來(lái)——各區(qū)域之間彼此獨(dú)立?！?lt;div></div>”標(biāo)記就是區(qū)域標(biāo)記。區(qū)域與層區(qū)域的概念區(qū)域的定義：制作3個(gè)相鄰的區(qū)域區(qū)域的概念<html><head><title>區(qū)域的概念</title><styletype="text/css"><!-- #d1{background-color:red;width:400;height:100} #d2{background-color:blue;width:300;height:80}#d3{background-color:green;width:200;height:50} --></style></head><body><center><divid="d1">區(qū)域一</div><divid="d2">區(qū)域二</div><divid="d3">區(qū)域三</div></center></body></html>區(qū)域與層區(qū)域的概念區(qū)域的定位：區(qū)域的定位區(qū)域的位置<html><head><title>區(qū)域位置</title><styletype="text/css"> <!-- div{width:300;height:100} #d1{background-color:red;position:absolute;top:0;left:0} #d2{background-color:blue;position:absolute;top:50;left:50} #d3{background-color:green;position:absolute;top:100;left:100} --></style></head><body><center><divid="d1"></div><divid="d2"></div><divid="d3"></div></center></body></html>區(qū)域與層區(qū)域的概念區(qū)域的定位：區(qū)域的相對(duì)位置區(qū)域的相對(duì)位置<html><head><title>區(qū)域的相對(duì)位置</title><styletype="text/css"> <!-- div{width:150;height:50} #d1{background-color:red;position:relative;top:0;left:0} #d2{background-color:blue;position:relative;top:20;left:20} #d3{background-color:green;position:relative;top:50;left:50} --></style></head><body><center><divid="d1"></div><divid="d2"></div><divid="d3"></div></center></body></html>區(qū)域與層網(wǎng)頁(yè)組件的分段管理分段顯示不同的文字字體<html><head><title>區(qū)域的分段管理</title><styletype="text/css"> <!-- #d1{color:red;font-family:"宋體";font-size:18px;width:500;height:30} #d2{color:red;font-family:"幼圓";font-size:18px;width:400;height:35} #d3{color:red;font-family:"隸書";font-size:18px;width:300;height:40} --></style></head><body><center><divid="d1"><tableborder="1"><tr><td>

迅騰濱?？萍加邢薰荆ê?jiǎn)稱：迅騰科技）是天津?yàn)I海迅騰科技集團(tuán)旗下一家以軟件研發(fā)、軟件外包為主導(dǎo)的科技型企業(yè)。

</td></tr></table></div><p><divid="d2"><tableborder="1"><tr><td>

迅騰濱海科技有限公司（簡(jiǎn)稱：迅騰科技）是天津?yàn)I海迅騰科技集團(tuán)旗下一家以軟件研發(fā)、軟件外包為主導(dǎo)的科技型企業(yè)。

</td></tr></table></div><p><divid="d3"><tableborder="1"><tr><td>

迅騰濱?？萍加邢薰荆ê?jiǎn)稱：迅騰科技）是天津?yàn)I海迅騰科技集團(tuán)旗下一家以軟件研發(fā)、軟件外包為主導(dǎo)的科技型企業(yè)。

</td></tr></table> </div></center></body></html>區(qū)域與層層的概念層的定義：區(qū)域的重疊層的重疊<html><head> <title>層的重疊</title> <styletype="text/css"> <!-- #d1{background-color:red;width:300;height:250;position:absolute;top:30;left:30} #d2{background-color:blue;width:250;height:200;position:absolute;top:30;left:60} #d3{background-color:green;width:200;height:150;position:absolute;top:30;left:30} --></style></head><body><center><divid="d1"></div><divid="d2"></div><divid="d3"></div></center></body></html>

區(qū)域與層層的概念層的定義：改變區(qū)域的重疊順序?qū)拥酶拍?lt;html><head><title>層的概念</title><styletype="text/css"> <!-- #z1{background-color:red;width:300;height:250;position:absolute;top:30;left:30; z-index:1} #z2{background-color:blue;width:250;height:200;position:absolute;top:30;left:60; z-index:3} #z3{background-color:green;width:200;height:150;position:absolute;top:30;left:30; z-index:2} -->層得概念</style></head><body><center><divid="z1"></div><divid="z2"></div><divid="z3"></div></center></body></html>區(qū)域與層層的概念三維空間的建立：圖片和文字層次的建立三維空間的建立<html><head><title>三維空間的建立</title><styletype="text/css"> <!-- #z1{position:absolute;top:25;left:45;z-index:1} #z2{position:absolute;top:30;left:50;font-family;楷書;font-size:30;color:red;z-index:3} #z3{position:absolute;top:40;left:60;font-family;隸書;font-size:40;color:blue;z-index:2} --></style></head><body><center><divid="z1"><imgsrc="images/top.jpg"></div><divid="z3">網(wǎng)<br>頁(yè)<br>設(shè)<br>計(jì)</div><divid="z2">HELLO!CSS</div></center></body></html>CSS與HTML結(jié)合的方式HTML的內(nèi)部定義對(duì)HTML標(biāo)記直接定義：對(duì)HTML標(biāo)記的直接定義<html> <head> <title>對(duì)HTML標(biāo)記直接定義</title><styletype="text/css"> <!-- h1{font-family:"黑體";color:red} h2{font-family:"華文楷體";color:blue} --> </style> </head> </body><p><h1>此行文字為紅色，字體為黑體</h1><p><h2>此行文字為藍(lán)色，字體為華文楷體</h2> </body></html>CSS與HTML結(jié)合的方式HTML的內(nèi)部定義在HTML標(biāo)記內(nèi)直接定義：HTML標(biāo)記內(nèi)的直接定義<html> <head> <title>HTML標(biāo)記內(nèi)的直接定義</title> </head> <body> <p><h1style="font-family:'黑體';color:red">

這字體被定義為紅色黑體</h1></p> <p><h1style="font-family:'華文楷體';color:green">

這字體被定義為綠色華文楷體</h1></p> </body></html>CSS與HTML結(jié)合的方式HTML的內(nèi)部定義利用class或id選擇性定義：CLASS定義樣式的使用<html> <head> <title>class定義樣式的使用</title> <styletype="text/css"> <!-- p.a1{font-family:"華文楷體";color:#FF0000} *.a2{font-family:"黑體";color:#00FF00} --> </style> </head> <body> <pclass="a1">此行文字為紅色華文楷體</p> <h3class="a2">此行文字為綠色黑體</h3> <h3class="a1">此行文字為瀏覽器默認(rèn)</h3> </body></html>CSS與HTML結(jié)合的方式HTML的外部定義以嵌入方式調(diào)用CSS文件：嵌入外部樣式表<html><head><title>嵌入外部樣式表</title> <styletype="text/css"><!--@importurl("cs.css");--></style></head><bodybgcolor="lightyellow"><centerclass="text">

歡迎光臨<i>迅騰科技</i>歡迎光臨

</center><br/><br/><center> <imgsrc="images/top.jpg"></center></body></html>CSS與HTML結(jié)合的方式HTML的外部定義以鏈接方式調(diào)用CSS文件：鏈接外部樣式表<html> <head> <title>鏈接外部樣式表</title> <linktype="text/css"rel="stylesheet"href="cs.css"> </head> <bodybgcolor="lightyellow"> <centerclass="text">

歡迎光臨<i>迅騰科技</i>歡迎光臨

</center><br><br> <center><imgsrc="images/top.jpg"> </center> </body></html>CSS與HTML結(jié)合的方式CSS的調(diào)用順序CSS的調(diào)用順序<html><head><title>CSS的調(diào)用順序</title><linktype="text/css"rel="stylesheet"href="cs.css"><styletype="text/css"><!--@importurl("cs2.css");--></style></head><bodybgcolor=lightyellow><centerclass="text">

歡迎光臨<i>迅騰科技</i>歡迎光臨

</center><br><br><center><imgsrc="images/top.jpg"></center></body></html>CSS與HTML結(jié)合的方式CSS的繼承性質(zhì)標(biāo)記中的包含繼承：包含繼承

包含繼承<html> <head> <title>CSS的包含繼承</title> <styletype="text/css"> <!-- h1{color:blue} --> </style> </head> <body> <h1>歡迎光臨<i>迅騰科技</i>歡迎光臨</h1> </body></html>CSS與HTML結(jié)合的方式CSS的繼承性質(zhì)標(biāo)記中的包含繼承：定義沖突

CSS的定義沖突<html> <head> <title>CSS的定義沖突</title> <styletype="text/css"> <!-- h1{color:blue} i{color:red} --> </style> </head> <body> <h1>歡迎光

溫馨提示

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

評(píng)論

0/150

提交評(píng)論