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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第三章使用列表、表格、框架使用列表有序列表基本制作：有序列表的基本制作<html> <head> <title>有序列表</title> </head> <body> <imgsrc="images/qywh.jpg"> <ol><li>以責任為理念

<li>以發(fā)展為目標

<li>以落實為重點

<li>以結果為導向

</ol> </body></html>使用列表有序列表改變序號：改變序號<html> <head> <title>改變序號</title> </head> <body> <imgsrc="images/zngg.gif"> <oltype="A"><li>迅騰科技公司成功代理卡巴斯基...<li>迅騰科技—戴爾天津代理

<li>天津迅騰濱海科技公司入圍天津... </ol> <imgsrc="images/zfxm.gif"> <oltype="a"><li>CSS之父批評Flash：HTM..<li>李開復：蘋果應用商店模式在中國行..<li>雅虎JavaScript架構師：..</ol><imgsrc="images/wzjs.gif"><oltype="i"><li>濱海迅騰科技集團榮獲天津市“河東..<li>天津卡巴斯基企業(yè)版開放空間代理商..<li>迅騰科技公司成功代理卡巴斯基企業(yè)..</ol><imgsrc="images/hyzx.gif"><oltype="I"><li>消息稱“谷歌殺手”Cuil永久性關閉...<li>Linux之父訪談錄：設計內核只為了...<li>Google將Instantiations制作的...</ol> </body></html>使用列表有序列表指定序號：指定序號<html><head> <title>指定序號</title></head><body> <imgsrc="images/qywh.jpg"><oltype="A"start="3"><li>以責任為理念

<li>以發(fā)展為目標

<li>以落實為重點

<li>以結果為導向

</ol> </body></html>無序列表基本制作：使用列表無序列表的基本制作<html><head> <title>無序列表</title></head><body><imgsrc="images/qywh.gif"><ul> <li>以責任為理念

<li>以發(fā)展為目標

<li>以落實為重點

<li>以結果為導向

</ul></body></html>無序列表更改標號樣式：使用列表更改標號樣式<html><head> <title>更改標號樣式</title></head><body><imgsrc="images/qywh.gif"><ultype="circle"> <li>以責任為理念

<li>以發(fā)展為目標

<li>以落實為重點

<li>以結果為導向

</ul></body></html>無序列表三種列表標記比較：使用列表三種列表標記比較<html><head> <title>三種列表標記比較</title></head><body><imgsrc="images/zngg.gif"><ul><li>迅騰科技公司成功代理卡巴斯基...<li>迅騰科技—戴爾天津代理

<li>天津迅騰濱海科技公司入圍天津...<li>天津迅騰濱海科技公司入圍天津...</ul><imgsrc="images/zfxm.gif"><menu><li>CSS之父批評Flash：HTM..<li>李開復：蘋果應用商店模式在中國行..

<li>雅虎JavaScript架構師：..<li>臺積電研發(fā)副總裁：摩爾定律或10..</menu><imgsrc="images/wzjs.gif"><lh><li>濱海迅騰科技集團榮獲天津市“河東..<li>天津卡巴斯基企業(yè)版開放空間代理商..<li>迅騰科技公司成功代理卡巴斯基企業(yè)..<li>中國科技統(tǒng)計匯編

</lh> </body></html>定義列表使用列表定義列表<html><head> <title>定義列表</title><head><body><imgsrc="images/wzjs.gif">

<dl>

<dt><b>濱海迅騰科技集團榮..</b><dd>3月18日下午，天津市河東區(qū)首屆科學<br>

技術創(chuàng)新獎頒獎大會在河東區(qū)政府禮<br>

堂隆重舉行，濱海迅騰科技集團榮獲<br>“河東區(qū)骨干科技企業(yè)”稱號。<br> <b><dt>中小企業(yè)CRM軟件..</b><dd>一般情況下，CRM的功能可歸納為三個<br>

方面：對銷售、營銷和客戶服務三部分業(yè)務流程的信息化。<br></dl></body></html>表格的建立最簡單的表格：使用表格單元格的使用<html><head> <title>單元格</title></head><body><center><tableborder="1"><tr><td>這是一個單元格</td></tr></table></center></body></html>使用表格表格的建立多單元表格：多單元表格<html><head> <title>多單元格表格</title><head><body> <center><tableborder="1"><tr><!--colspan的作用是合并單元格，我們將在后面章節(jié)中講到--><tdcolspan="2"><imgsrc="rtop2.gif"></td></tr><tr><td>·政府資金支持項目名錄</td><td>2010-12-9</td></tr><tr><td>·高新所得稅問題關注</td><td>2010-11-25</td></tr><tr><td>·中國科技統(tǒng)計匯編</td><td>2010-11-13</td></tr></table></center> </body></html>各種表格樣式表格邊框的設置：使用表格表格邊框的設置<html><head> <title>表格邊框的設置</title><head><body><tablewidth="459"border="10"cellpadding="20"cellspacing="30"><tr><!--colspan的作用是合并單元格，我們將在后面章節(jié)中講到--><tdcolspan="2"><imgsrc="rtop2.gif"></td></tr><tr><td>·中國科技統(tǒng)計匯編</td><td>2010-11-13</td></tr><tr><td>·網(wǎng)站稅收優(yōu)惠概述</td><td>2010-11-10</td></tr></table> </body></html>各種表格樣式表格高寬的控制：使用表格表格高寬的控制<html><head> <title>表格高寬的控制</title><head><body><tableborder="1"width="349"height="144"><tr><!--colspan的作用是合并單元格，我們將在后面章節(jié)中講到--><tdcolspan="2"><imgsrc="rtop2.gif"width="339"></td></tr><tr><td>CSS之父批評Flash..</td><td>2010-11-25</td></tr><tr><td>谷歌收購3D臺式桌面創(chuàng)新公司..</td><td>2010-11-13</td></tr><tr><td>臺積電研發(fā)副總裁：摩爾定律..</td><td>2010-11-10</td></tr></table></body></html>各種表格樣式表格相關顏色的設定：使用表格表格的顏色設置<html><head> <title>表格的顏色設置</title><head><body><tableborder="2"bordercolor="red"bgcolor="lightyellow"><tr><!--colspan的作用是合并單元格，我們將在后面講到--><tdcolspan="2"><imgsrc="rtop2.gif"width="339"></td></tr><tr><td>·消息稱“谷歌殺手”Cuil永久性..</td><td>2010-11-25</td></tr><tr><<td>·Linux之父訪談錄：設計內核只..</td><td>2010-11-13</td></tr><tr><td>·Google將Instantia..</td><td>2010-11-10</td></tr></table></body></html>各種表格樣式表格的水平位置：使用表格表格的水平位置<html> <head> <title>表格的水平位置</title> <head> <body><tableborder="1"align="left"><tr><td>表格居左</td></tr></table><br><br><tableborder="1"align="center"><tr><td>表格居中</td></tr></table><br><tableborder="1"align="right"><tr><td>表格居右</td></tr></table> </body></html>各種表格樣式表格行的控制：使用表格<html> <head> <title>表格行的控制</title> <head><body><tablewidth="347"border="1"><tr><!--colspan的作用是合并單元格，我們將在后面章節(jié)中講到--><tdcolspan="2"><imgsrc="rtop2.gif"width="339"></td></tr> <trheight="30"bordercolor="green"bgcolor="gray"><td>張高麗：科技型中小企業(yè)是..</td><td>2010-11-25</td></tr><trheight="60"bordercolor="red"bgcolor="silver"><td>迅騰集團表彰大會暨迅騰..</td><td>2010-11-10</td></tr><trheight="40"bordercolor="blue"><td>天津市A級勞動關系和諧企業(yè)</td><td>2010-11-10</td></tr></table></body></html>各種表格樣式單元格的設置：使用表格<html><head><title>單元格的外框和背景顏色</title><head><body><tablewidth="327"border="2"><tr><!--colspan的作用是合并單元格，我們將在后面章節(jié)中講到--><tdcolspan="2"><imgsrc="images/rtop4.gif"></td></tr><tr><tdbordercolor="#66FFCC"bgcolor="#FFFF00">Android第二款木馬現(xiàn)身...</td><tdbordercolor="#339900"bgcolor="#339900">2010-11-25</td></tr><tr><tdbordercolor="red"bgcolor="#99FF00">微軟宣布10月11日關閉...</td><tdbordercolor="red"bgcolor="#FFFF00">2010-11-13</td></tr><tr><tdbordercolor="#3333FF"bgcolor="#FFFF00">怎樣激發(fā)技術人員的...</td><tdbordercolor="#3333FF"bgcolor="#66FFCC">2010-11-10</td></tr></table></body></html>各種表格樣式控制每個單元格中內容的位置：使用表格<html><head><title>單元格中文字的相對位置</title><head><body><tablewidth="327"border="1"><tr><!--colspan的作用是合并單元格，我們將在后面章節(jié)中講到--><tdheight="48"colspan="2"><imgsrc="images/rtop4.gif"></td></tr><tr><tdwidth="243"height="51"align="right"valign="top">慶迅騰科技公司成立一周年</td><tdwidth="103"align="left"valign="middle">2010-11-25</td></tr><tr><tdheight="77"valign="middle">福布斯：馬云是中國的..</td><tdalign="right"valign="bottom">2010-11-13</td></tr><tr><tdheight="80"valign="bottom">前員工曝ZyngaCEO軼事..</td><tdalign="center"valign="top">2010-11-10</td></tr></table></body></html>各種表格樣式標題標記：使用表格<html><head><title>標題標記</title><head> <body><tableborder="1"><captionalign="center">站內公告</caption> <trvalign="top"><th>新聞標題</th><th>發(fā)布時間</th> </tr>

<trvalign="middle"><td>迅騰科技公司成功代理..</td><td>2010-11-13</td></tr><trvalign="bottom"><td>天津卡巴斯基企業(yè)版開放..</td><td>2010-11-10</td></tr> </table> </body></html>各種表格樣式表格中單元格的水平合并：使用表格<html><head><title>單元格的水平合并</title><head><body><tableborder="1"><tr><tdcolspan="2"><imgsrc="images/zngg.gif"></td></tr><tr><td>天津迅騰濱海科技公司..</td><td>2010-11-25</td></tr><tr><td>濱海迅騰科技集團榮獲..</td><td>2010-11-13</td></tr></table></body></html>表格中單元格的垂直合并：<html><head><title>單元格的垂直合并</title><head> <body> <tableborder="1"><tr> <tdrowspan="4"><imgsrc="images/xt.jpg"alt="迅騰"></td> <td>以責任為理念<br></td></tr><tr><td>以發(fā)展為目標</td></tr><tr><td>以落實為重點</td> </tr><tr><td>以結果為導向</td></tr></table> </body></html>窗口框架窗口框架的建立：框架窗體的垂直分割<html><head><title>窗體的垂直分割</title></head><framesetcols="30%,*"><frame><frame></frameset></html>窗口框架子窗口的邊框設置：框架窗口框的粗細<html><head> <title>窗口框架的粗細</title></head><framesetcols="30%,*"><frame><framesetrows="30%,*"border=15><frame><frame> </frameset> </frameset></html>窗口框架窗口滾動條的設置：

溫馨提示

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

評論

0/150

提交評論