HTML5+CSS3 制作动态菜单.docxVIP

HTML5+CSS3 制作动态菜单 通过本章的学习，用户了解了HTML 5 中，怎么使用 Transitions 功能制作简单的动画。例如，使用 Transitions 属性实现某个属性中两个属性值的平滑过渡。 在本练习中，将使用 Transitions 功能制作一个网站首页，并为网站添加一个动画菜单，实现简单的动画效果，帮助用户更好的了解 Transitions 功能的含义和应用。 操作步骤： div id=menu1ullia href=#首页/a/lili class=current_page_itema href=#画廊/a/lilia href=# div id=menu1 ul lia href=#首页/a/li li class=current_page_itema href=#画廊/a/li lia href=#关于我们/a/li lia href=#新闻/a/li lia href=#联系/a/li /ul /div /div 为页头添加 CSS 样式，包括导航列表 ul 和列表项 li 的样式。 #menu1 ul #menu1 ul { height: 45px; margin: 0; padding: 0; background: url(images/img03.gif) no-repeat; list-style: none; } #menu1 li { float: left; height: 45px; background: url(images/img03.gif) no-repeat right top; } 为页头中的超链接添加样式，包括链接的高度、字体大小和链接的颜色。 #menu1 a #menu1 a { float: left; height: 20px; margin: 0px; padding: 10px 15px; text-decoration: none; text-transform: uppercase; font-size: smaller; font-weight: bold; color: #000000; } 在页面中使用 ul 列表添加动画菜单，名称为 nav。 ul class=nav ul class=nav lia href=#XHTML/a/li lia href=#HTML5/a/li lia href=#CSS/a/li lia href=#jQuery/a/li lia href=#Ajax/a/li lia href=#PHP/a/li /ul 为动画菜单添加样式，包括列表ul 和列表项 li 的样式。 .navbox .navbox { position: relative; position: relative; float: left;} ul.nav { list-style: none; display: block; width: 100px; position: relative; top: 0px; left: 10px; background: url(shad2.png) no-repeat; -webkit-background-size: 50% 100%;} li { margin: 5px 0 0 0;} ul.nav li a { ul.nav li a { -webkit-transition: all 0.3s ease-out; background: #cbcbcb url(border.png) no-repeat; color: #174867; padding: 7px 15px 7px 15px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; width: 100px; display: block; text-decoration: none; -webkit-box-shadow: 2px 2px 4px #888; } ul.nav li a:hover { background: #ebebeb url(border.png) no-repeat; color: #67a5cd; padding: 7px 15px 7px 30px; } （8）为页面主体添加样式，设置页面字体大小和颜色。 body { body { margin: 0; padding: 0; background: #FFFFFF url(images/img01.gif) repeat-x; font-family: Arial, Helvetica, sans-serif; font-f