Web前端开发
主讲人：李娜
创建网页导航条
【教学目标】
知识
目标
能力
目标
素质
目标
熟悉变形动画的语法及功能；
掌握变形动画的属性设置及应用。
能够利用transform属性改
变元素的位置。
培养学生的知识迁移能
力和创新设计意识。
【任务实现】
1.效果示例
【任务实现】
2.分析页面效果图
【任务实现】
3.制作页面结构
<div><ul>
<li><a href="#">首页</a></li>
<li><a href="#">素材</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">拓展</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
【任务实现】
3.制作页面结构
【任务实现】
4.定义页面CSS样式
★ 定义基础样式
★设置列表及列表项样式
★控制超链接样式
【任务实现】
4.定义页面CSS样式
★ 定义基础样式
【任务实现】
4.定义页面CSS样式
★ 定义基础样式
body,ul,li{
padding: 0;
margin: 0;
list-
style:none;
}
【任务实现】
4.定义页面CSS样式
★设置列表及列表项样式
【任务实现】
4.定义页面CSS样式
★设置列表及列表项样式
ul li{
width:220px;
line-height:55px;
background:rgba(212,133,5,
);
border-radius:7px;
font-size:25px;
margin-left:4px;
text-align: center;
}
ul{
margin-top:20px;
display:flex;
justify-content:center;
}
【任务实现】
4.定义页面CSS样式
★控制超链接样式
【任务实现】
4.定义页面CSS样式
★控制超链接样式
li a{
display:block;
text-decoration:none;
color:#fff;
}
a:hover{
background:rgba(212,68,6,);
border-radius:7px;
transform:translate(5px,9px);
}
【任务小结】
这节课我们完成了“网页导航条”的制作，并利用
transform属性对导航菜单进行了2D变形操作。在制作时，可以
根据所学习的缩放、倾斜、旋转，一一尝试导航菜单项的变形
操作。
“业精于勤，荒于嬉；行成于思，毁于随”。一个人，学
问和品行的精疏成败，关键在于是“勤”还是“嬉”，是“思
”还是“随”；如果要想取得学业上的精进和成功，就要务必
做到勤和思。
谢 谢 大 家
