网页设计16-菜单.ppt

网页设计与制作〔16〕CSS样式〔11〕----菜单

知识技能目标1、通过实训工程了解并掌握用css设置菜单样式。

实训内容在网页中用css设置菜单样式实训一：菜单实例

实训工程通过实例了解利用CSS实现页面的菜单效果1、菜单实例1

课堂实践centerbrimgsrc=://baidu/img/baidu_logo.gifbrbrbrbrdivid=navigationul liid=h/li liahref=#资讯/a/li liclass=current网页/li liahref=#贴吧/a/li liahref=#知道/a/li liahref=#MP3/a/li liahref=#图片/a/li liid=moreahref=#更多gt;gt;/a/li/ul/divpstyle=height:44px;nbsp;/ptablewidth=600border=0cellpadding=0cellspacing=0 tr tdwidth=92/td tdforminputtype=textname=wdclass=ffsize=35 inputtype=submitvalue=百度搜索/form/td tdwidth=92valign=topahref=#搜索帮助/abrahref=#高级搜索/a/td /tr/table/center(1)搭建页面框架

课堂实践(2)设置导航的样式

课堂实践(3)设置列表样式不显示工程符号列表水平方向排列

课堂实践(4)设置列表中a标记的样式

课堂实践(5)设置列表中a标记的伪属性鼠标经过

课堂实践(6)设置#navigation.current

课后作业1.参照课本P261-264中的例子，创立一网页15-1.htm—设计一简单的导航菜单

TheEndThanksalot!