Web前端开发项目教程 课件 7.1.2 响应式图片网页_第1页
Web前端开发项目教程 课件 7.1.2 响应式图片网页_第2页
Web前端开发项目教程 课件 7.1.2 响应式图片网页_第3页
Web前端开发项目教程 课件 7.1.2 响应式图片网页_第4页
Web前端开发项目教程 课件 7.1.2 响应式图片网页_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端开发主讲人：李娜响应式图片网页【任务目标】知识目标能力目标素质目标理解响应式布局、视口的概念；掌握媒体查询的使用。能够根据案例制作出适合不同设备的页面。培养学生精益的工匠精神。【任务实现】1.效果示例

【任务实现】2.分析页面效果图

【任务实现】3.制作页面结构

<divclass="box"> <div><imgsrc="img/01.jpg"></div><div><imgsrc="img/02.jpg"></div><div><imgsrc="img/03.jpg"></div><div><imgsrc="img/04.jpg"></div><div><imgsrc="img/05.jpg"></div><div><imgsrc="img/06.jpg"></div><div><imgsrc="img/07.jpg"></div><div><imgsrc="img/08.jpg"></div>

<div><imgsrc="img/09.jpg"></div></div> 【任务实现】4.设置viewport

<metaname="viewport"content="width=device-width,initial-scale=1.0">【任务实现】5.定义页面CSS样式

★

整体控制页面显示样式

★

设置图片显示样式

★

设置媒体查询样式【任务实现】5.定义页面CSS样式

★

整体控制页面显示样式

【任务实现】5.定义页面CSS样式

★

设置图片显示样式

【任务实现】5.定义页面CSS样式

★

设置媒体查询样式【任务拓展】【任务小结】这节课我们完成了“响应式图片网页”的制作，在任务完成过程中，需要考虑到不同屏幕尺寸下的显示效果。“玉不琢，不成器”。在学习过程中，我们要求真求实，掌握事物发展规律，通晓天下之

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论