您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-M-导航案例(下)

DW-M-导航案例(下)

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-M-导航案例(下)

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好我是M ,上节课呢我们已经完成了这个 ,导航的上半部分了 ,这节课那我们把下面这个弹窗 ,给拿下来 ,首先这个弹窗 ,第一个问题是我们应该把它写在网页的 ,哪个结构里面 ,这里M提醒一下 ,我们导航 ,分成了八个例 ,那么当我鼠标移入其中的一个例的时候显示 ,该 ,例对应的一个 ,弹窗 ,另外一个就是 ,对应的另外一个,所以呢我们要把我们这个弹窗写在 ,每一个例标签的里面 ,也就是这里 ,我们把它 ,当做一个div ,然后要给它一个class命名 ,就叫 ,弹窗 ,好我们再来看设计图 ,这个弹窗我们要怎么写 ,我们要把它分成 ,上面一个部分 ,和下面的内容部分 ,然后每个内容呢 ,看成一块 ,比如说这个 ,基础 ,这是一块 ,然后它分 ,左边 ,就是这一部分,和右边这一个部分 ,看不清楚我们来画一下 ,首先它 ,是一个大的框 ,然后呢我们把它分成 ,上面一个部分 ,和下面一个部分 ,下面呢 ,又分成 ,一个块 ,有另外一个块 ,然后其中这一个呢我们把它分成 ,左边 ,和右边两个部分 ,这个那大概就是我们的思路 ,好我们来 ,

进到DW里面 ,首先弹窗 ,写好了以后 ,给个div ,叫top ,另外一个div同级的 ,叫 ,content ,也就是我们的内容 ,好我们先来看top ,top那我们先分成两块,左边文字和右边的一个 ,按钮 ,先来写最大的这一个 ,我们来量一下它的 ,宽高 ,这个它应该是固定的 ,弹窗 ,点弹窗 ,宽度 ,450px ,高度 ,px ,然后呢背景色是一个纯白色 ,大概就是这样 ,没看到我们来检查一下 ,它是在的只是因为我们 ,整个的背景底也是一个白色所以呢我们这个白色div看不到的 ,那么我们就 ,给它下面增加一个颜色好了 ,这里是应该是一个网站的导航 ,而它的结构那应该是紧挨着我们这个叫背景的div的 ,所以我们写在最外面,然后我们背景的div在这 ,给它写个 ,平级关系的 ,叫banner好了 ,然后我们把banner的样式写在背景的后面 ,当然了为了大家方便看我们写在这里好了 ,banner ,我们只是用给它增加一个颜色 ,宽度呢,百分之100 ,高度我们随便打吧 ,大一点 ,增加一个背景颜色 ,保存 ,

唉我们来看一下为什么没有 ,奥 ,这里的颜色 ,错了 ,是这个 ,保存一下 ,好有了,我们的刚刚写的弹窗也有了 ,弹窗有了以后我们来看一下结构 ,首先是top ,top分成两个部分,左边 ,和右边 ,左边我们直接给一个p标签就好了 ,叫做软件入门 ,然后后面的小灰字呢 ,我们再单独拿一个span标签把它给标注 ,比如说23333 ,人 ,已学习 ,我们来到浏览器看一下什么效果 ,唉我鼠标移入这个字没有了 ,是为什么 ,是因为上节课 ,我写了一个鼠标移入时 ,字体颜色变成白色对不对所以呢我们 ,先来写top ,而且我们可以看到我们这个弹窗为什么会有一个边距 ,要给一个浮动吗 ,弹窗写好以后我们写top ,当然我们可以直接 ,更改弹窗里面文字的颜色啊 ,这里应该是一个 ,黑色吧 ,好像不是黑色 ,保存一下 ,好这里 ,给了字体颜色以后它就不会说我们那个鼠标移入 ,变成白色啊 ,样式 ,影响了 ,那么我们要让这个P标签 ,靠左边对不对 ,

top我们先空着不写 ,我们来写top里面的p ,top里面的p标签要怎么样首先 ,浮动 ,top左 ,然后呢 ,字体大小 ,字体大小14 ,size14 ,px ,保存一下我们来看一下 ,好居左了是没错 ,但是 ,p标签自带的margin,让它往下走了 ,所以那我们要重新来写一下margin ,首先是上,上面是零 ,右0下 ,还是0左边 ,我们来设计图里面 ,量一下 ,十五 ,左边15px ,分号 ,好 ,它已经过来了 ,那么我们再来改这个span标签 ,一样的注意层级,top里面的p标签里面的 ,span标签 ,首先是font-size ,12,12px ,然后呢 ,字体颜色999 ,color ,999当然三个9也可以啦 ,保存一下 ,ok,然后它们中间有个间距 ,间距是多少呢 ,23,22 ,滑了一下 ,margin- ,lift ,22px ,保存 ,好 ,这边 ,没有问题了 ,我们再来写 ,

top的 ,那个but ,也就是 ,这一块 ,奥内容是为自己充值 ,一样的 ,首先是浮动 ,我们可以给它右浮动 ,因为它是靠右边的 ,然后宽高量一量 ,一百的三十 ,宽 ,100px ,高度30px ,然后还有圆角 ,是三像素 ,字体颜色 ,是 ,白色 ,大家可以一次性把刚刚 ,印象里面都有的样式都写下来 ,然后是什么文字需要居中 ,行高 ,不记得我们再来看一下我们差什么 ,字体大小 ,12px ,还有一个背景颜色 ,那就不剩了 ,background-color ,保存 ,啊有是有啦,然后我们需要给它 ,把位置写好 ,可以来量一下 ,上面是七 ,右边是15 ,margin ,上 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

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

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

赞助一下吧

确定学习吗?

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

成为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 个虎课币
.
书山有路勤为径,学海无涯苦作舟
— 唐代文学家 韩愈
虎课网 · 每天进步一点点
分享到