课程主题 使用层表格布局等标签设计网页-网页客户端技术 课程-1728973512315.pptx

;任务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全局属性的应用，对所有