css第六天预习笔记基础day.pptx

CSS基本入门第六天-DAY08Top 课程内容1、补充知识点2、精灵图3、阳光科技的准备工作和页面开发1.1 鼠标样式课程信息课程时长：12分钟课程名称：../视频/01%20鼠标样式.avi鼠标样式../视频/01%20鼠标样式.avi.../视频/01%20鼠标样式.aviavi课程详情1、默认样式：2、小手样式：3、移动样式：4、文本样式：1.2 轮廓和防止拖拽文本域课程信息课程时长：6分钟课程名称：../视频/02%20轮廓和防止拖拽文本域.avi轮廓和防止拖拽文本域../视频/02%20轮廓和防止拖拽文本域.avi.../视频/02%20轮廓和防止拖拽文本域.aviavi课程详情outline：0 去掉input轮廓resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。1.3 vertical垂直对齐课程信息课程时长：8分钟课程名称：../视频/03%20vertical垂直对齐.avivertical垂直对齐../视频/03%20vertical垂直对齐.avi.../视频/03%20vertical垂直对齐.aviavi课程详情1、图片和文字是基线对齐方式2、顶部对齐：3、中线对齐：1.4 vertical去除图片底侧空白缝隙课程信息课程时长：6分钟课程名称：../视频/04%20vertical去除图片底测空白缝隙.avivertical去除图片底侧空白缝隙../视频/04%20vertical去除图片底测空白缝隙.avi.../视频/04%20vertical去除图片底测空白缝隙.aviavi问答与练习1、给img vertical-align:middle | top等等。 让图片不要和基线对齐。2、给img 添加 display：block; 转换为块级元素就不会存在问题了。1.5 精灵技术产生的背景课程信息课程时长：5分钟课程名称：../视频/06%20css精灵技术产生的背景.avi精灵技术产生的背景../视频/06%20css精灵技术产生的背景.avi.../视频/06%20css精灵技术产生的背景.aviavi问答与练习1、精灵图的作用是什么？2.1 精灵技术的本质课程信息课程时长：3分钟课程名称：../视频/07%20css精灵技术的本质.avi精灵技术的本质../视频/07%20css精灵技术的本质.avi.../视频/07%20css精灵技术的本质.aviavi问答与练习1、什么是精灵图？2.2 精灵技术的使用课程信息课程时长：12分钟课程名称：../视频/08%20css精灵技术的使用.avi精灵技术的使用../视频/08%20css精灵技术的使用.avi.../视频/08%20css精灵技术的使用.aviavi问答与练习精灵图的使用步骤？2.3 精灵技术拼出自己的名字课程信息课程时长：10分钟课程名称：../视频/09%20css精灵技术拼出自己名字.avi精灵技术拼出自己的名字../视频/09%20css精灵技术拼出自己名字.avi.../视频/09%20css精灵技术拼出自己名字.aviavi问答与练习10分钟完成此案例3.1 制作css精灵图课程信息课程时长：9分钟课程名称：../视频/10%20制作css精灵图.avi制作css精灵图../视频/10%20制作css精灵图.avi.../视频/10%20制作css精灵图.aviavi问答与练习1.0精灵图必须是一些小的图片。2.0精灵图的多个小图之间一定要留有足够的间隙3.0完成精灵图以后一定要在精灵图的下方留足够的空隙，方便将来再次添加其它的精灵图。3.2 鼠标经过更换精灵图片课程信息课程时长：6分钟课程名称：../视频/11%20鼠标经过更换精灵图片.avi鼠标经过更换精灵图片../视频/11%20鼠标经过更换精灵图片.avi.../视频/11%20鼠标经过更换精灵图片.aviavi问答与练习完成此案例3.3 阳光科技网站的准备工作课程信息课程时长：9分钟课程名称：../视频/12%20阳光科技网站准备工作.avi阳光科技网站的准备工作../视频/12%20阳光科技网站准备工作.avi.../视频/12%20阳光科技网站准备工作.aviavi问答与练习完成准备工作3.4 顶部制作（一）课程信息课程时长：8分钟课程名称：../视频/13%20顶部制作（一）.avi顶部制作（一）../视频/13%20顶部制作（一）.avi.../视频/13%20顶部制作（一）.aviavi问答与练习分析顶部导航的结构4.1 顶部制作（二）课程信息课程时长：7分钟课程名称：../视频/14%20顶部制作（二）.avi顶部制作（../视频/14%20顶部制作（二）.avi二../视频/14%20顶部制作（二）.avi）..