您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-网页布局模型与三种定位

DW-网页布局模型与三种定位

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-网页布局模型与三种定位

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好,我是M ,?上节课我们学习了盒模型,那么这节课呢 ,?我们将要学习的是网页布局模型 ,首先这节课的重点 ,就是了解我们网页的三种布局模型啊 ,它们就是流动模型、浮动模型还有层模型 ,难点呢,就是我们将要学习到的三种不同的定位方式 ,分别是绝对定位、相对定位还有固定定位 ,?什么是网页布局模型呢 ,?网页布局模型与盒模型一样呢 ,都是CSS最基本、最核心的概念 ,但布局模型呢,是建立在盒模型的基础之上的 ,所以呢又不同于我们常说的CSS布局样式 ,或者CSS布局模板 ,?如果说布局模型是本的话呢 ,?那么CSS布局模板就是末了 ,是外在的表现形式 ,CSS包含了三种基本的布局模型 ,用英文概括呢就是Flow、Layer和Float ,也就是我们的流动模型 ,浮动模型还有层模型 ,我们先来看一下流动模型 ,流动是默认的网页布局模式 ,?也就是说在网页默认状态下的HTML网页元素 ,?都是根据流动模型来分布网页内容的 ,?这个呢,其实本质上就是M之前给大家讲的关于 ,?各种元素的分类 ,?我们接着往下看 ,流动布局模型呢具有2个比较典型的特征 ,第一点 ,就是块状元素都会在所处的包含元素自 ,上而下按顺序垂直延伸分布 ,

?这个就是我们之前学到的块状元素的一个特点 ,然后呢它们的宽度呢都是为100% ,块状元素会以行的形式来占据位置 ,?第二点呢就是流动模型下呢 ,内联元素会处在包含元素内从左到右水平分布显示 ,这个呢就是我们之前学到的内联元素 ,的一个本质的特点 ,那么我们看一下浮动模型 ,浮动模型呢其实就是我们上节课学到的 ,盒模型,关于float式 ,?设置元素浮动呢 ,?就可以实现块状元素并排显示 ,任何元素在默认的情况下是不能浮动的 ,?但是可以用CSS定义为浮动 ,就是我们上节课说到的float ,?最后我们来看一下层模型 ,层布局模型呢就像我们设计师经常使用的 ,PhotoShop中非常流行的图层编辑功能一样 ,?每个图层呢都可以做到精确的定位操作 ,?但是呢,在网页设计领域 ,?由于网页大小的活动性 ,层布局没有受到热捧 ,?但是呢在一个网页的局部使用上呢 ,还是有非常方便的地方的 ,?如何让我们的HTML元素在网页中精确定位呢 ,这里CSS定义了一组定位属性 ,叫做Position来支持层布局模型 ,层模型呢有三种形式 ,一种叫绝对定位Position absolute ,一种呢是相对定位就是我们的Position relative ,还有一种是固定定位,就是Position fixed ,

好,我们进入到DW里 ,首先呢,还是新建一个HTML文档 ,然后呢我们还是把它给保存一下 ,保存到我们的站点课程 ,?这里我们先去了解一下绝对定位 ,也就是Position absolute ,我们先写一个DIV ,叫它Box1好了 ,然后呢给它写一点样式 ,给一个边框好了吧 ,1像素 ,好然后呢 ,我们再给它一个宽高 ,宽100px ,高也是100px ,这样我们的,为了 ,方便看,我们点一下px ,这里我们就可以看到,我们的Box1就已经出来了 ,?那么绝对定位要去怎么使用呢,首先 ,

登录后查看更多
换一批

为你推荐

每周一练

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

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

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

赞助一下吧

确定学习吗?

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

成为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位学员免费领取~点我领取