** 第二章**
用户交互设计
导航设计
dos------------color c dir/s 遍历当前文件夹所有文件
继续以案例的形式
1.导航栏(变换菜单,多级菜单)
复习 javascript html以及css
代码实现:
ul li实现
<style type=“text/css”>
a {color:#fff99;text-decoration:none;} a:hover
{color;#FFFFF;text-decoration:none;}
.top-nav{padding:10px 10px 0;font-size:12px; font-weight:bold;
margin:1px 0 0 0 ;list-style:none;boeeder-bottom;8px solid #dc4e1b;overfiow:hiddenbackground-color:#33b5e5;}
.top-nav li{fioat:left;margin-right:1px;}
color:#666666;display:block;width:80px;text-align:center;}
.top-nav li a span {posstion:absolute;visibility;hidden;}
.top-nav li a span:hover span { line-height: 20px; text - decoration:none; background:#DDDDD; color : #666666;
display:block;width:80px;text-align:center;}
</style>
</head>
<body>
<div>
<li><a href="#">首页<span>Home</span></a></li>
<li><a href="#">课程大厅<span>Course</span></a></li>
<li><a href="#">学习中心<span>Learn</span></a></li>
<li><a href="#">关于我们<span>About</span></a></li>
</div>
</body>
2.JQuery 基础------------------------js框架 简单易用 代码量少
js十行,JQuery 两行就可以搞定.
完