HTML网页设计 教学课件 作者 翁高飞、王鹏chapter6.ppt

HTML网页设计 教学课件 作者 翁高飞、王鹏chapter6.ppt

ID:50301045

大小:1.62 MB

页数:16页

时间:2020-03-07

HTML网页设计 教学课件 作者 翁高飞、王鹏chapter6.ppt_第1页
HTML网页设计 教学课件 作者 翁高飞、王鹏chapter6.ppt_第2页
HTML网页设计 教学课件 作者 翁高飞、王鹏chapter6.ppt_第3页
HTML网页设计 教学课件 作者 翁高飞、王鹏chapter6.ppt_第4页
HTML网页设计 教学课件 作者 翁高飞、王鹏chapter6.ppt_第5页
资源描述:

《HTML网页设计 教学课件 作者 翁高飞、王鹏chapter6.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、超链接伪类、表单设计、导航菜单LearningHTML&CSS第六章目标掌握如何使用超链接伪类掌握如何使用CSS进行表单设计掌握如何使用CSS美化导航菜单超链接伪类的四种样式提示:在CSS定义中,a:hover必须被置于a:link和a:visited之后,才是有效的。提示:在CSS定义中,a:active必须被置于a:hover之后,才是有效的。提示:伪类名称对大小写不敏感。将链接转换为块级元素链接在默认状态下是内联元素,转换为块级元素后可以获得更大的点击区域,可以设置宽度和高度,将链接转换为块状,只需要增加一个dis

2、play:block的CSS属性即可。用CSS制作按钮按钮默认状态鼠标划过状态用CSS制作按钮,只需要增加一个按钮的背景图片即可实现。CSS属性为:background首字下沉#layout{background:#CCCCCC;width:100px;height:100px;}p:first-letter

3、{font-size:36px;color:#FF0000;}

网页设计

首字下沉CSS表单设计图片美化按钮.btn2{background:url(nav_bg1.gif);width:85px;h

4、eight:30px;border:none;font-size:12px;font-weight:bold;cursor:pointer;padding-top:2px;}

默认按钮

美化后按钮

用图片美化按钮

5、"text/html;charset=utf-8"/>下拉列表select{border:1pxsolid#f60;background:#ff9;height:40px;width:160px;}请选择科目:

6、变下拉列表样式IE6浏览器Google浏览器总结(1)超链接伪类的四种样式注意:四种状态的顺序一定不能颠倒,否则有些不会生效将链接转换为块级元素:(display:block)用CSS制作按钮:(background)首字下沉:(:first-letter)改变文本框和文本域的样式用图片美化按钮改变下拉列表样式导航菜单掌握列表变化为制作横向导航菜单掌握导航菜单-应用图片的美化掌握CSSSprites技术(组合多张图片)页面导航菜单试图模型导航菜单代码案例制作横向导航菜单body{font-family:Verdana;f

7、ont-size:12px;line-height:1.5;}a{color:#000;text-decoration:none;}a:hover{color:#F00;}#menu{border:1pxsolid#CCC;height:26px;background:#eee;}#menuul{list-style:none;margin:0px;padding:0px;}#menuulli{float:left;padding:0px8px;height:26px;line-height:26px;}图片美化导航菜单

8、#menu{width:500px;height:28px;margin:0auto;border-bottom:3pxsolid#E10001;}#menuul{list-style:none;margin:0px;padding:0px;}#menuulli{float:left;margin-left:2px;

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。