您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-什么是盒模型

DW-什么是盒模型

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-什么是盒模型

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好,我是M ,?上节课我们学习了边距与填充的CSS样式 ,?那么这节课呢 ,?我们要学习的是网页设计排版中 ,要用到的盒模型 ,?这节课的重点也同样是我们的难点 ,?就是了解盒模型在网页排版中的作用 ,然后熟悉并掌握它 ,M会通过对一个网页案例的实际讲解 ,来使大家对盒模型有一个清晰的认识 ,?我们先来看看我们今天的案例 ,这是一个好奇心日报的网站 ,?好奇心日报呢,它是一个新闻网站 ,?为什么要选择它呢 ,?主要M还是觉得 ,它整个网页的版式比较简洁大方 ,?换个说法呢,就是比较简单 ,?适合我们初学者去模仿它 ,?好,我们可以看到这个网站呢 ,主要是分成三个大的部分 ,?首先呢,就是 ,?这个顶部的导航栏了 ,其次是中间它这些各个新闻的 ,?链接版块,以及它底部的这一个 ,?声明啊,还有一些合作的 ,等其他的一些信息 ,?然后我们可以进入到DW里面 ,?先去新建这个网页 ,好,创建了一个html ,之后呢,我们还是 ,?养成习惯,把它保存到我们的 ,?站点中去 ,?这里我们今天就不再使用这个拆分界面了 ,因为整个网页 ,?内容会比较多,然后我们可能会 ,?倾向于将我们的界面全部调成代码模式 ,?还是 ,?增加一个style的区域 ,?刚刚我们有说到,回头看一下 ,

?整个网站呢是分成三个大的部分 ,顶部,中间以及我们的底部 ,?所以呢,我们可以先在body里面 ,给它增加三个div,首先是 ,?我们可以叫它top,也可以叫 ,Nav就是导航的意思 ,?其次呢是中间的部分 ,叫Middle ,?然后还有底部,底部呢我们叫Bottom ,BOTTOM ,?好,这就是三个大的区域 ,然后我们一个一个的来看 ,?当然这个左上角它们的Logo ,凸出来的部分呢 ,我们就忽略掉了,毕竟我们今天 ,学习的是网页的排版 ,首先我们可以来量一下它顶部的这个黑色的 ,导航栏是有多高,我们可以看到 ,?高度是80像素 ,?这里呢我们先 ,在Style里面,首先我们要做的呢 ,是给Body ,?一个样式,因为Body它 ,身上是自带了Padding和Marging ,就是我们上节课讲到的 ,边距与填充,所以呢 ,?在一开始,我们需要将它的这两个 ,给清除掉,首先先Marging呢 ,姓名,自动 ,?上下间距零,左右居中 ,Padding ,内填充是零 ,OK ,?然后我们来看第一个导航栏 ,点 ,?首先是它的宽度 ,?宽度是多少呢,我们给100% ,?因为我们可以看到它整个是横穿了网页的左右的 ,?宽度是100% ,?高度我们刚刚有量到,是80px,对吧 ,

?然后 ,?背景色,背景色我们就用黑色 ,黑色 ,Black ,Blackground-color黑色是000000 ,?怎么预览呢,我们可以按F12 ,哦对了,首先要保存一下 ,F12可以到,我们打开我们的默认浏览器 ,然后我们可以看到这个黑色的 ,导航区域呢,就已经有了 ,?接着是中间Middle ,?我们可以回到PS里面去看一下 ,Middle呢,就是这个浅灰色的区域了 ,可以看一下颜色,颜色是111111 ,Middle的高是多少呢,这里的高,我们就 ,随意测一下吧,今天我们的课 ,可以随便给个大概给个1000吧 ,好,我们来设置一下middle ,?宽度 ,?还是和上面一样100% ,?高度呢,我们给一个1000PX这样子 ,?然后 ,?背景色 ,我们刚?刚 ,测的是eeeeee ,?六个e ,?保存一下 ,回到我们的浏览器,好我们的背景色就已经变了 ,?当然,可能大家看的不是很明显 ,毕竟这是一个浅灰色 ,?然后我们回到PS里面来继继续看下这个设计图 ,?中间的部分呢,我们会发现左右两边是有 ,?空隙的,也就是说我们中间整个内容区域呢 ,?是一个居中的状态,所以呢 ,?我们需要将这个内容区域,看作是一个大的 ,

?盒子 ,这里我们就要Middle的里面 ,?去增加一个DIV,我们就叫做 ,Center就好了 ,中心 ,?好那么这个Center有什么特点呢,我们可以看一下 ,?首先它是左右居中的 ,左右居中怎么写呢 ,?还记得吗,对跟我们的Body是一样的 ,Marging上下间距零,左右自动这样它就是居中 ,?然后我们可以来量一下它的宽度 ,这里我们就要需要放大一点来仔细地去量一下 ,好,到这里 ,?宽度是1010 ,?1010PX ,?高度呢,我们就不去管它了,因为它的 ,?这里如果我们不设置高度的话 ,它会随着里面内容的 ,?高度来去 ,?改变它自己的高度 ,?然后我们给一个背景颜色 ,Background-color ,?这是一个白色FFFFFF ,六个F ,好 ,?中间的这个Center盒子 ,写好之后呢,我们 ,就要开始写第一个 ,?这个大方块区域了 ,?我们可以 ,?先还是量一下它的宽高 ,?这里一定要量仔细了 ,?好我来看一下 ,?宽度是755,高度是450 ,755,450,我们需要在Center的 ,

Center这个盒子里面 ,?去新建一个DIV我们就叫Box1好了 ,?然后 ,Box1 ,这里你就要注意了,我们首先要给它一个浮动 ,?然后呢 ,?宽度是755PX ,分号不能掉 ,?高度是450PX ,?颜色,颜色我们随便去吸一个颜色好了吧 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

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

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

赞助一下吧

确定学习吗?

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

成为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

虎课积分
登录注册
使用手机号码登录
使用手机号码登录
手机号码格式错误
换一个
图形验证码错误,请重新输入
验证码错误,请重新输入
登录
已连续签到0
第一天
5个虎课币
第二天
10个虎课币
第三天
15个虎课币
第四天
20个虎课币
第五天
40个虎课币
第六天
20个虎课币
第七天
20个虎课币
立即签到
已签到
每周一重置签到奖励
已连续签到0
本周斩获110个虎课币,下周也要来哦
我知道了
已连续签到0
哎呀,签到失败了!
再次签到
哎呀,系统出现错误,请稍后重试!
上上签 · 今日宜学习
恭喜!签到成功,获得 10 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到