项目三 使用CSS样式美化网页.ppt

  1. 1、本文档共50页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
在HTML中使用CSS样式的方法 任务实施 1.站点配置 根据所提供的素材完成站点的配置。 2.手工编写HTML文件 在已经配置好的站点下创建网页文件index.html,网页的内容通过手工编定HTML代码来完成。 单元三:使用CSS样式美化页面 任务实施 3. 为网页设计CSS样式并应用 (1)设置body样式 重定义body标签,主要用于定义页面的整体设置。对于当前页面,需要进行整体设置的是页面文字和背景效果。 单元三:使用CSS样式美化页面 图 body的样式规则定义及效果 任务实施 3. 为网页设计CSS样式并应用 (1)设置body样式 样式代码如下: body { font-family: 宋体; font-size: 12px; color: #666; background-image: url(images/bodybg.gif); background-repeat: repeat-x; background-color: #D3F3FB; } 单元三:使用CSS样式美化页面 任务实施 3. 为网页设计CSS样式并应用 (2)重定义table标记 通过重定义table标记定义表格的整体效果,包括:宽度、边框、背景、文字对齐方式等。 单元三:使用CSS样式美化页面 图 table的样式规则定义 任务实施 3. 为网页设计CSS样式并应用 (2)重定义table标记 样式代码为: table { text-align: left; background-color: #FFF; border-bottom-width: 8px; border-bottom-style: double; border-bottom-color: ##32B5D2; width: 700px; } 单元三:使用CSS样式美化页面 图 table的样式规则定义 任务实施 3. 为网页设计CSS样式并应用 (3)重定义H2标记样式 H2的内容只有一幅图片,定义为居中显示。 单元三:使用CSS样式美化页面 h2 { text-align: center; height: 40px; } 任务实施 3. 为网页设计CSS样式并应用 (4)重定义H3标记样式 单元三:使用CSS样式美化页面 h3 { font-size: 13px; font-weight: bold; } 任务实施 3. 为网页设计CSS样式并应用 (5)分别定义类样式.title1,.title2,.title3 单元三:使用CSS样式美化页面 由于各H3标记对应的内容在颜色上是不一样的,所以分别定义三个类样式.title1,.title2,.title3来设置文字的颜色。.title1的样式定义规则如图所示。.title2和.title3的样式定义规则与.tilte1相同,只是文字颜色分别为#006600和#ff9933。 图 .title1的样式规则定 任务实施 3. 为网页设计CSS样式并应用 (5)分别定义类样式.title1,.title2,.title3 样式代码为: 单元三:使用CSS样式美化页面 .title1 { color: #006600; } .title3 { color: #ff9933; } .title2 { color: #206996; } 任务实施 3. 为网页设计CSS样式并应用 (5)分别定义类样式.title1,.title2,.title3 单元三:使用CSS样式美化页面 类样式定义完成后,分别应用在三个H3标记上,效果如图所示。 图 应用了类样式后的h3效果 任务实施 3. 为网页设计CSS样式并应用 (6)重定义P标记 单元三:使用CSS样式美化页面 p { line-height: 20px; text-indent: 2em; } 任务实施 3. 为网页设计CSS样式并应用 (7)设置底部图片之间的间距 为了控制底部两幅图片之间的距离,可以定义一个类样式.pic1(设置其margin属性),然后应用于第一幅图片的img标记上。 单元三:使用CSS样式美化页面 .pic1 { margin-right: 25px; margin-left

文档评论(0)

rijindj + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档