《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-03_第1页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-03_第2页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-03_第3页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-03_第4页
《网页设计与制作（HTML+CSS+JavaScript）》课件-CORE-03_第5页
已阅读5页，还剩49页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

<li>以发展为目标

<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>天津卡巴斯基企业版开放空间代理商..<li>迅腾科技公司成功代理卡巴斯基企业..</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>以发展为目标

<li>以落实为重点

<li>以结果为导向

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

<li>以发展为目标

<li>以落实为重点

<li>以结果为导向

</ul></body></html>无序列表更改标号样式：使用列表更改标号样式<html><head> <title>更改标号样式</title></head><body><imgsrc="images/qywh.gif"><ultype="circle"> <li>以责任为理念

<li>以发展为目标

<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>台积电研发副总裁：摩尔定律或10..</menu><imgsrc="images/wzjs.gif"><lh><li>滨海迅腾科技集团荣获天津市“河东..<li>天津卡巴斯基企业版开放空间代理商..<li>迅腾科技公司成功代理卡巴斯基企业..<li>中国科技统计汇编

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

<dl>

<dt><b>滨海迅腾科技集团荣..</b><dd>3月18日下午，天津市河东区首届科学<br>

技术创新奖颁奖大会在河东区政府礼<br>

堂隆重举行，滨海迅腾科技集团荣获<br>“河东区骨干科技企业”称号。<br> <b><dt>中小企业CRM软件..</b><dd>一般情况下，CRM的功能可归纳为三个<br>

方面：对销售、营销和客户服务三部分业务流程的信息化。<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的作用是合并单元格，我们将在后面章节中讲到--><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>·中国科技统计汇编</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的作用是合并单元格，我们将在后面章节中讲到--><tdcolspan="2"><imgsrc="rtop2.gif"></td></tr><tr><td>·中国科技统计汇编</td><td>2010-11-13</td></tr><tr><td>·网站税收优惠概述</td><td>2010-11-10</td></tr></table> </body></html>各种表格样式表格高宽的控制：使用表格表格高宽的控制<html><head> <title>表格高宽的控制</title><head><body><tableborder="1"width="349"height="144"><tr><!--colspan的作用是合并单元格，我们将在后面章节中讲到--><tdcolspan="2"><imgsrc="rtop2.gif"width="339"></td></tr><tr><td>CSS之父批评Flash..</td><td>2010-11-25</td></tr><tr><td>谷歌收购3D台式桌面创新公司..</td><td>2010-11-13</td></tr><tr><td>台积电研发副总裁：摩尔定律..</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的作用是合并单元格，我们将在后面章节中讲到--><tdcolspan="2"><imgsrc="rtop2.gif"width="339"></td></tr> <trheight="30"bordercolor="green"bgcolor="gray"><td>张高丽：科技型中小企业是..</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级劳动关系和谐企业</td><td>2010-11-10</td></tr></table></body></html>各种表格样式单元格的设置：使用表格<html><head><title>单元格的外框和背景颜色</title><head><body><tablewidth="327"border="2"><tr><!--colspan的作用是合并单元格，我们将在后面章节中讲到--><tdcolspan="2"><imgsrc="images/rtop4.gif"></td></tr><tr><tdbordercolor="#66FFCC"bgcolor="#FFFF00">Android第二款木马现身...</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">怎样激发技术人员的...</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的作用是合并单元格，我们将在后面章节中讲到--><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>发布时间</th> </tr>

<trvalign="middle"><td>迅腾科技公司成功代理..</td><td>2010-11-13</td></tr><trvalign="bottom"><td>天津卡巴斯基企业版开放..</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>以发展为目标</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. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论