原创力文档- 1、本文档共11页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
;任务4;使用层、表格布局等标签设计网页
;div标签可定义文档中的分区或节，可以把文档分割为独立的、不同的部分。如果用全局属性id、class来标记div，那么该标签的作用会变得更加有效。div是一个块级元素，这意味着它的内容自动地开始一个新行。;span标签用来组合文档中的行内元素，以便通过样式来格式化它们。也可为span标签应用全局属性id、class，便于对span应用样式。
span应用示例：
pspansometext./spansomeothertext./p
说明：span为p增加了额外的结构，可为span标签中的内容单独设置样式。;style标签用于为HTML文档定义样式信息，位于head
部分中。样式信息可以写在标签的开始标签中，以style属性
方式呈现，也可以将样式写于style标签中。
style应用示例：
styletype=text/css
h1{color:red}
p{color:blue}
/style
说明：type属性是必需的，定义style元素的内容，取值“text/css”。style标签中的代码为CSS样式代码。;例1-8
使用DIV+CSS设计以下布局的网页：
上（标题栏）、中（内容区，又分左/右，左边菜单栏，右边正文区）、下（版权信息），如下图所示。;!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd
htmlxmlns=/1999/xhtml
head
titleDIV+CSS网页布局示例/title
styletype=text/css
body{margin:0px;padding:0px;font-size:12px;text-align:center;}
.content{font-size:20px;}
#top{background-color:#FFC}
#middle{background-color:#CFF}
#bottom{background-color:#CCC}
/style
/head
;body
!--页面所有内容--
divid=allstyle=width:1004px;overflow:hidden;margin:0pxauto;
!--主体内容--
divid=mainstyle=height:474px;
!--top--
divid=topstyle=border:redsolid1px;height:72px;
spanclass=content这里是标题栏/span----top
/div
!--middle--
divid=middlestyle=height:400px;overflow:hidden;
!--left--
divstyle=border:bluesolid1px;width:252px;height:400px;float:left;
spanclass=content这里是左边菜单栏/span----left
/div
!--right--
divstyle=border:greensolid1px;height:400px;
spanclass=content这里是右边正文/span----right
/div
/div
/div
!--版权信息--
divid=bottomstyle=border:redsolid1px;height:50px;
spanclass=content这里是底部，版权所有，翻版必究！/span----bottom
/div
/div
/body
/html;例1-8知识点总结
div标签的嵌套使用，不能交叉嵌套；
span标签中的class全局属性的应用，对所有
文档评论（0）