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

超链接伪类、表单设计、导航菜单 Learning HTMLCSS第六章 目标 掌握如何使用超链接伪类 掌握如何使用CSS进行表单设计 掌握如何使用CSS美化导航菜单 超链接伪类的四种样式 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 提示：伪类名称对大小写不敏感。 将链接转换为块级元素 链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需要增加一个display：block的CSS属性即可。 用CSS制作按钮 按钮默认状态 鼠标划过状态 用CSS制作按钮，只需要增加一个按钮的背景图片即可实现。 CSS属性为:background head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title首字下沉/title style type=text/css #layout{ background:#CCCCCC; width:100px; height:100px; } p:first-letter { font-size:36px; color:#FF0000; } /style /head body div id=layout p网页设计/p /div /body 首字下沉 CSS表单设计 head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title图片美化按钮/title style type=text/css .btn2{ background:url(nav_bg1.gif); width:85px; height:30px; border:none; font-size:12px; font-weight:bold; cursor:pointer; padding-top:2px; } /style /head body pinput type=submit value=提交/ 默认按钮/p pinput type=submit class=btn2 value=提交/ 美化后按钮/p /body 用图片美化按钮 head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title下拉列表/title style type=text/css select{ border:1px solid #f60; background:#ff9; height:40px; width:160px; } /style /head body 请选择科目： select name=select optionHTML/option optionSQL/option optionJAVA/option /select /body 改变下拉列表样式 IE6浏览器 Google浏览器 总结（1） 超链接伪类的四种样式 注意：四种状态的顺序一定不能颠倒，否则有些不会生效 将链接转换为块级元素：（display：block） 用CSS制作按钮:(background) 首字下沉：（：first-letter） 改变文本框和文本域的样式 用图片美化按钮 改变下拉列表样式 导航菜单 掌握列表变化为制作横向导航菜单 掌握导航菜单-应用图片的美化 掌握CSS Sprites技术（组合多张图片） 页面导航菜单试图模型 导航菜单代码案例 制作横向导航菜单 body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { border: 1px solid #CCC; height:26px; background: #eee;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26