Dreamweaver CS6网页设计案例教程 第2版 教学课件 ppt 作者 主编 王春红 王瑾瑜 模块7使用DIV CSS布局并美化网页.ppt

Dreamweaver CS6网页设计案例教程 第2版 教学课件 ppt 作者 主编 王春红 王瑾瑜 模块7使用DIV CSS布局并美化网页.ppt

  1. 1、本文档共64页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
步骤7 执行【文件】→【保存】命令,保存文件。 模块七—使用div+CSS布局并美化网页 选择菜单栏【格式】→【列表】→【项目列表】命令,如图7-14所示。 图7-14 步骤3 执行【文件】→【保存】命令,保存文件。标签的默认样式为每一行前面有一个点,且四周有空隙。 模块七—使用div+CSS布局并美化网页 步骤4 为了改变这种单一的标签样式,需要另创建样式表把标签的默认样式给清除掉,选择项目列表,点击“新建CSS规则”,如图7-15所示。 图7-15 模块七—使用div+CSS布局并美化网页 在弹出的窗体中再单击“确定”按钮,在出现的“#菜单 ul的CSS规则”窗体选择“分类”中的“列表”,选列表风格样式(list-style-type)为无,如图7-16所示。再选择“方框”,把填充(padding)的top和边框(margin)的top都键入0值。 图7-16 模块七—使用div+CSS布局并美化网页 在弹出的窗体中再单击“确定”按钮,在出现的“#菜单 ul的CSS规则”窗体选择“分类”中的“列表”,选列表风格样式(list-style-type)为无,如图7-16所示。再选择“方框”,把填充(padding)的top和边框(margin)的top都键入0值。 图7-16 模块七—使用div+CSS布局并美化网页 步骤5 执行【文件】→【保存】命令,保存文件。在浏览器中的显示如图7-17所示。 图7-17 模块七—使用div+CSS布局并美化网页 2.美化完善一级纵向菜单 步骤1 为了能够整体修改列表中的文字显示情况,需要对body新建CSS规则,点击“新建CSS规则”按钮,在“选择器类型”中选择“标签(重新定义HTML元素)”,“选择器名称”中则键入body,如图7-18所示。 图7-18 模块七—使用div+CSS布局并美化网页 步骤2 对body中的文字样式进行修改,如图7-19所示,在字体系列(font-family)中选择 “Verdana, Geneva, sans-serif”,字号选择18px,字体加粗,字的颜色为#0e6964,行高键入24px。 图7-19 模块七—使用div+CSS布局并美化网页 步骤3 为“#菜单”建立CSS规则。在“分类”列表中选择“边框”,设定为上下有边,样式(Style)为实心,宽度(width)为3px,颜色(color)为#83C691,如图7-20所示。设置“#菜单”的宽度为100px,如图7-21所示。这样纵向菜单的边框就有了。 图7-20 图7-21 模块七—使用div+CSS布局并美化网页 步骤4 框选一个li,单击“新建CSS规则”,单击确定。分别选择“分类”列表中的选项,在“背景”栏中选择背景色#CAF1F8。在“方框”中输入li的高度为35px,填充的左右为8px,上下为0px。在“类型”中设定行高为35px。在“边框”中选择下边框,创建一个下边沿。 模块七—使用div+CSS布局并美化网页 步骤5 通过上述设置,一个简单的纵向导航菜单就创建完成了。接下来我们为这个导航菜单创建链接。选择要添加链接的文字,如“各大新闻”,然后在其属性页面链接上输入要链接的页面网址,这里输入个#,表示为虚拟链接,不指向任何页面。如图7-22。 图7-22 模块七—使用div+CSS布局并美化网页 步骤6 创建一个交互方式,当鼠标划过有链接的文字时,文字显示黑色。这时需要用到:hover这个伪类。首先定义一个新标签,选择“新建CSS规则”,在“选择器类型”中选择“标签(重新定义HTML标签)”,在 “选择器名称”中输入a,单击“确定”后,在出现的“a的CSS规则定义”窗体的“类型”一栏中,在“Text-decoration”中选无下划线,颜色为原来的颜色#0E6964,如图7-23所示,单击“确定”后,菜单没有变化。 图7-23 模块七—使用div+CSS布局并美化网页 步骤7 当鼠标划过有链接的文字时,文字显示黑色。首先定义一个新标签,选择“新建CSS规则”,在“选择器类型”中选择“复合内容(基于选择的内容)”,在“选择器名称”中选择a:hover,单击“确定”后, “确定”后。 在出现的“a:hover的CSS规则定义”窗体的“类型”一栏中,在“Text-decoration”中选无下划线,颜色为#00

您可能关注的文档

文档评论(0)

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

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

1亿VIP精品文档

相关文档