- 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全局属性的应用,对所有
您可能关注的文档
- 开幕词的概念和特点现代殡葬技术与管理专业.pptx
- 开幕词的结构和写法现代殡葬技术与管理专业.pptx
- 楷书四大家书风特点比较.ppt
- 看起来朴素的高热量食物.pptx
- 康复评定躯体功能评定.pptx
- 康复评定言语语言与吞咽功能评定.pptx
- 康复训练方案的制定FORMULATIONOFREHAB.pptx
- 科技殡葬将现代科技数字技术与殡葬的管理和经营模式相结合.pptx
- 科技基础与 管理-1728968959886.pptx
- 科技基础与 管理-1728969159502.pptx
- 2024教学心得:解读新课标把握目标与内容有效实施劳动教育.docx
- 2024教学心得:解读新课标初中生物学新课标新在哪里.docx
- 2024八年级上册第5课:第2课:时预防犯罪课时练习.docx
- 2024《军神》课例新课标教学设计学习.docx
- 2024大单元任务情境八角楼上比赛获奖课例.docx
- 2024观摩音乐课比赛学习心得.docx
- 2024教学心得:情境打开语文新课标大门的一把钥匙.docx
- 2024《道德与法治》人教版六年级下册第四单元第10课《 我们爱和平》教学设计第一课时.docx
- 2024《草船借箭》《景阳冈》《猴王出世》《红楼春趣》反思.docx
- 2024宝葫芦的秘密任务群教学比赛课例学习.docx
文档评论(0)