DIV+CSS网页制作实战第37次课(2课时)CSS 3.0 新增属性应用举例.pptxVIP

课次 37 课时 2 教具 投影仪 项目 项目3 网页外观制作技术 任务 任务3.8 CSS 3.0 新增属性应用举例 知识点 1. CSS 3.0 新增属性应用举例（90分钟） 重点 CSS 3.0 的应用实例 难点 CSS 3.0 的应用实例 备注 上机操作90分钟 / 11 1 / 11 2 知识技能目标 CSS 3.0 新增属性应用实例 / 11 3 3.4.3 CSS 3.0应用实例 1．任务场景 将CSS3.0的有关属性应用到网页中。本任务是利用CSS3.0实现如图3-63所示的可折叠栏目动态效果。   2．操作环境 Windows 7、Dreamweaver、多种常用浏览器 3．操作步骤 设置HTML及CSS代码如下： head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title使用CSS 3.0实现可折叠栏目/title style type=text/css * { margin: 0px; padding: 0px; border: 0px; } / 11 4 body { font-family: 宋体; font-size: 12px; color: #333333; line-height: 20px; background-image: url(images/84402.jpg); background-repeat: repeat-x;background-color: #E1E1E1;} #top { width: 960px; height: 182px; background-image: url(images/84401.jpg); background-repeat: no-repeat; margin: 0px auto; text-align: center; padding-top: 29px; } #main img { vertical-align: middle; margin-right: 10px; } #main a{ display: block; height: 40px; background-color: #D4D4D4; border-bottom: 1px solid #E1E1E1; font-family: 黑体; font-size: 14px; font-weight: bold; color: #FFFFFF; line-height: 40px; text-decoration: none; padding-left: 10%; padding-right: 10%; } / 11 5 #main a:hover{ background-color: #E1E1E1; border-bottom: 1px solid #FFFFFF; } #main div{ height: 0px; overflow: hidden; background-image: url(images/84405.gif); background-repeat: repeat-x; background-color: #FFFFFF; padding-left: 10%; padding-right: 10%; transition: height 600ms ease; -webkit-transition: height 600ms ease;} #main div p{ padding: 20px; } #main div:target{ height:150px; } /style/headbodydiv id=topimg src=images/84403.png width=598 height=150 //divdiv id=maina href=#firstimg src=images/84404.png width=12 height=12 /关于我们设计室/a div id=firstp　　新势力数码互动是专注于高品质多媒体互动制作的全方位互动营销公司，同时也拥有实力雄厚的技术研发团队、顶尖素养的设计团队及思维活跃的数字营销运营团队，新势力数码互动（ideaDun Interactive）一直致力于建立更多更好的互联网实用性品牌形象，提供权威专业的互联网品牌策划，并实施高标准、高回报的营销推广