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

下載本文檔

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

文檔簡介

第六章CSS應(yīng)用美化網(wǎng)頁多樣的超鏈接鏈接顏色的設(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(wǎng)</a>（注意點擊時的顏色變化）

</body></html>美化網(wǎng)頁多樣的超鏈接去除下劃線的鏈接<html><head><title>無下劃線的鏈接</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ǎng)</a></body></html>美化網(wǎng)頁華麗的滾動條立體滾動條的制作多彩的滾動條<html><head><title>多彩的滾動條</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)頁炫目的光標取值樣式取值樣式取值樣式取值樣式auto同defaultpointer手伸食指nw-resize西北箭頭s-resize向南箭頭help問號move十字箭頭n-resize向北箭頭w-resize向西箭頭crosshair“十”字e-resize向東箭頭se-resize東南箭頭text“工”字default默認ne-resize東北箭頭sw-resize西南箭頭wait沙漏<html><head><title>光標樣式</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)頁上劃出特定的一塊，在這個塊可以包含文字、圖片和表格等各種網(wǎng)頁組件，這個塊就是區(qū)域。區(qū)域的作用是劃分網(wǎng)頁——把密切相關(guān)的組件組織在一起，以便集體設(shè)置；并把它們同別的組件區(qū)分開來——各區(qū)域之間彼此獨立?！?lt;div></div>”標記就是區(qū)域標記。區(qū)域與層區(qū)域的概念區(qū)域的定義：制作3個相鄰的區(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ū)域的相對位置區(qū)域的相對位置<html><head><title>區(qū)域的相對位置</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)頁組件的分段管理分段顯示不同的文字字體<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>

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

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

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

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

迅騰濱?？萍加邢薰荆ê喎Q：迅騰科技）是天津濱海迅騰科技集團旗下一家以軟件研發(fā)、軟件外包為主導的科技型企業(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>頁<br>設(shè)<br>計</div><divid="z2">HELLO!CSS</div></center></body></html>CSS與HTML結(jié)合的方式HTML的內(nèi)部定義對HTML標記直接定義：對HTML標記的直接定義<html> <head> <title>對HTML標記直接定義</title><styletype="text/css"> <!-- h1{font-family:"黑體";color:red} h2{font-family:"華文楷體";color:blue} --> </style> </head> </body><p><h1>此行文字為紅色，字體為黑體</h1><p><h2>此行文字為藍色，字體為華文楷體</h2> </body></html>CSS與HTML結(jié)合的方式HTML的內(nèi)部定義在HTML標記內(nèi)直接定義：HTML標記內(nèi)的直接定義<html> <head> <title>HTML標記內(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">此行文字為瀏覽器默認</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ì)標記中的包含繼承：包含繼承

包含繼承<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ì)標記中的包含繼承：定義沖突

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

溫馨提示

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

評論

0/150

提交評論