HTML5教案第13讲 CSS3新增属性-综合应用_第1页
HTML5教案第13讲 CSS3新增属性-综合应用_第2页
HTML5教案第13讲 CSS3新增属性-综合应用_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

web前端开发CSS3新增（教案）教学内容及教学过程说明步骤一问题引入网站设计中，首页经常需要对于内容页面的导航处理，如何利用CSS和CSS3制作网站的水平导航呢？问题1：导航的样式？回答1：。问题2：导航的位置？回答2：。步骤二讲授5.1综合练习水平导航栏制作利用无序列表制作水平导航栏。5.1.1任务分析(1)用无序列表生成水平导航内容，但每个列表项前面有图片并且水平显示；(2)利用ul标签的list-style属性去掉列表项前面的图片；(3)利用li标签的float属性将内容水平显示。5.1.2知识点1．无序列表的应用无序列表是HTML的基本元素，常用于水平和垂直导航、水平或垂直列表布局，图片或者div页面布局。通常无序列表ul在网页中显示为树状结构，其最常见的用途就是作为导航栏的菜单使用，在后面的学习中通过JavaScript或jQuery可以生成弹出式快捷菜单。(1)float:会使元素沿着水平方向左或者右移动(只能左右移动，不能上下移动)，其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。一个元素被设置成浮动属性后它后面的元素和当前元素的关系是四周环绕型，但是不会影响前面元素的位置。(2)display:此属性设置一个元素应如何显示。可以通过display属性设置使一个块级元素按照内联元素的方法显示，也可以让一个内联元素按照块级元素的方式显示，当属性值为none时元素不可见。(3)list-style:设置列表项前面的图形标记类型。5.1.3完整代码<!doctypehtml><html><head><metacharset='utf-8'><title>水平导航</title><style>*{margin:0;padding:0;}ul{list-style-type:none;margin:100px;text-align:center;font-size:10px;}li{float:left;/*采用float:left;的方式制作水平导航，设置浮动属性使列表项水平显示*/ display:block;/*对比inline-block*/width:80px;padding:10px; margin:10px;background-color:black;}a:hover{color:blue; text-decoration:none;}a{ color:white; text-decoration:none;display:block;}</style></head><body><p>水平导航</p><hr><ul><li><ahref="#">首页</a></li><li><ahref="#">新闻</a></li><li><ahref="#">产品</a></li><li><ahref="#">关于</a></li></ul></body></html>5.1.4效果图5.2练习总结本次练习还可以添加CSS3效果选项，鼠标悬浮导航项时，可以设置字体变大，背景变色等特效，这样就达到应用CSS3，效果美观。步骤三课堂小结1．2D、3D制作水平导航2．过渡和动画对比重点理解CSS3新增属性对于网页设计的意义步骤四作业问题引入第1题（2）课后作业1.熟练利用2D3D方法处理图片。2.补充过渡、动画等效果添加到水平导航。通过网站样式引出本次课综合练习的题目利用CSS和CSS3制作网站导航栏CSS实现水平导航基

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论