您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-响应式布局原理

DW-响应式布局原理

手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

VIP优惠升级 21大分类,畅享48000+设计教程特权!

为自己充值升华学习
今日剩余学习次数:1

按住画面移动小窗

DW-响应式布局原理

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

学习意犹未尽?成为VIP,继续提升

免费学习即将结束

关闭继续学习>

发表评论
收起宽屏
分享给朋友:
手机观看

扫一扫下载虎课app

支持离线缓存,随时随地学习

添加到专辑收藏已收藏收藏成功,可进入个人中心-课程收藏 查看!
目录信息笔记
课后练习学员评价 (64条评论)视频字幕查看优秀作品>

课后练习在紧急制作中。。。

课程综合评分:9.9
课程难易程度:太简单(5)简单(17)适中(37)有点难(4)太难了(1)
您需要学习后才可以评价,立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

Hello大家好,我是M ,上节课呢我们完成了我们的动画案例的整个的一个制作 ,分别是平移动画,旋转动画,斜切动画以及缩放动画 ,那么完成了这四个动画的效果之后呢 ,这节课我们来学习一个新的东西 ,就是我们的响应式布局的一个基本的原理 ,这节课的重点呢首先我要学习两个样式一个Min Width ,一个是Max Width ,就是最小宽度与最大宽度这两个CSS样式 ,难点呢,我们就是要了解媒体查询的原理 ,以及媒体查询里面条件的格式以及写法 ,那么大家一定要问了 ,媒体查询是什么东西 ,媒体查询呢 ,它就是通过不同的媒体类型和条件定义样式规则媒体查询 ,可以让CSS更精确作用于不同的媒体类型 ,和同一媒体的不同条件 ,这里说的同一媒体的不同条件,大家可以理解为 ,同一浏览器,但是不同宽度下的不同样式 ,媒体查询的大部分媒体特性呢都接受Min和Max ,就是最小与最大 ,用于表达 ,大于或等于,或者小于或等于 ,比如Width会有Min Width以及Max Width ,也就是我们前面刚刚说到的最小宽度于最大宽度了 ,那么媒体查询 ,的格式是什么样的首先是@ ,然后是Media媒体 ,然后空格Screen再空格And,And后面的括号呢就是我们 ,写的条件了 ,然后后面的大括号 ,就是条件里面,我们想让它拥有的一个样式 ,说的这么多,可能大家还不是很清楚 ,让我们来看一下我们前面的动画案例就知道了 ,现在我们看到的是,之前大家跟随M课程写的一个动画案例 ,我们可以看到假如我们把浏览器 ,

它的宽度变小,变小变小我们3个盒子Div ,也会随之变小因为大家还记得吧我们给的宽度是33.3% ,但是呢这么小我们就已经看不到图片的 ,本身的内容了对不对 ,这个时候呢我们的响应式布局就有作用了 ,这就是我们这节课最终要达到一个效果,我们可以看到 ,当我们的浏览器变小的时候 ,诶 ,一排变成两个显示了第3个调到第2排去了看到没有 ,然后紧接着我们再小一点,再小一点,再小一点 ,诶现在又变成一排,只显示一个图片了 ,这个就是我们响应式布局的一个优点就是 ,方便 ,用户在各种不同的分辨率下 ,都可以 ,有一个很良好的用户体验 ,好,那么我们要怎么样做到 ,这个响应式布局呢 ,我们来到DW里面 ,这个呢就是前面四节课我们写好的一个动画的样式 ,那么呢我们现在需要加上媒体查询 ,以及它的条件 ,这里呢,我们要把它分成三个条件 ,首先我们看一下刚刚的PPT ,格式Media Screen ,然后And后面用括号括住我们的条件 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与
虎课网为您推荐DW-响应式布局原理视频教程、图文教程、素材源文件下载,学员课后练习、作品以及评价等内容。DW-响应式布局原理教程讲师:M,使用软件:DW(CC2017),难度等级:新手入门,视频时长:9分45秒 查看全部

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
客户端
虎课桌面客户端
置顶播放器,边看边学习
虎课移动APP
支持离线缓存,随时随地学习
我的排行
建议意见
官方客服

官方客服

您可以与在线客服进行沟通或者拨打客服热线获得帮助

客服热线:021-80344319工作日:9:30-18:30

在线咨询:联系客服工作日:9:00-22:00

节假日:9:00-18:00

虎课积分
免费学习48000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了121,690
并提交了1,449份作业!
登录后立即学习!
loading
微信扫码关注即可登录
登录后立即学习!
手机号
验证码
立即登录
您需要同意协议才可以进行登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到
全站48000+课程免费学!昨日已有26682位学员免费领取~点我领取