您还没有专辑

开始创建自己的专辑吧

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

DW-导航案例(中)

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-导航案例(中)

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好,我是M ,上节课我们已经将我们这个虎课网的导航 ,完成了一小部分,就是 ,完成到了我们鼠标移动时可以显示,我们之前给它先 ,做了一个伪元素的一个背景层 ,那么完成了这个背景层以后呢,我们来回头看一下效果图 ,这节课我们需要解决的就是 ,这个导航凸出来的这个小的三角形了 ,那么这个三角形我们要怎么去解决它呢 ,首先由于我们这个,效果图是一个PS的截图,没有图层 ,所以我们就不能使用Cutterman将这一块位置 ,把它给单独截出来了 ,所以我们需要先拿钢笔工具 ,照着这个网站 ,索性给它画一个三角形上去 ,相信 ,大家的 ,PS能力应该是 ,完成这个应该是没有什么问题的,好 ,这个小三角形我们就已经做出来了 ,首先写这个东西,我们有两种思路,一个呢就像,像 ,M一样给它单独画一个三角形出来 ,然后我们 ,把它当做图片插入进去 ,这个就像我们前面伪元素里面,让大家写那个异形的 ,聊天框,一个道理 ,再或者呢,我们可以直接写一个div的 ,方块 ,然后通过一个CSS样式,将它旋转 ,50度 ,然后露一半 ,这个也是可以的 ,当然了,这个样式在后面的课程里才会 ,教给大家,所以呢,我们这节课就先 ,用图片的方式把它给完成 ,在 ,截图之前呢,我们需要在上节课的 ,

站点里面去新建一个文件夹 ,用来存放我们的图片 ,然后将我们的这个三角形图层 ,改个英文名 ,就叫它sanjiao好了 ,然后Cutterman ,把它给过去 ,找到我们的站点 ,以及里面的img文件夹 ,导出 ,我们可以去看一下 ,好,有了 ,一个png的一个小三角 ,好,回到DW里面 ,我们要怎么去处理这个小三角呢 ,还是用伪元素对不对,我们已经写过一个伪元素 ,before了,这是我们的立的一个背景层 ,所以呢,我们还剩什么,我们还剩一个after ,那么我们就直接 ,节省时间吧 ,before改成after ,然后 ,首先插入图片怎么插 ,伪元素 ,第一反应,我们先打什么content ,然后在content里面直接插入 ,我们刚刚的 ,三角形图片 ,url一个链接 ,这里大家记住,分号不要掉了 ,完成了这个之后呢 ,我们保存一下 ,过来看好像没有什么哦,我们的三角形是出来了 ,由于它是 ,after所以在标签的后面 ,那么我们要怎么做?我们要通过 ,绝对定位的方式把它钉到上面去,对不对 ,当然由于我们这个顶边了,所以呢 ,我们给整个的背景图,就是我们的大的框架这个 ,背景 ,class的div,一个 ,margin-top ,给上面留一块位置出来 ,

15px就好了 ,对,上面留一块位置,方便我们来待会来看这个三角形 ,好,这个三角形已经出来了 ,那么我们要怎么去处理它 ,绝对定位position absolute ,然后就是top啊,left啊 ,对不对 ,我们不知道数值 ,我们可以通过算的方法把它给算上去,也可以直接,试 ,就像上一节课一样,我们先打一个1px ,

登录后查看更多
换一批

为你推荐

每周一练

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

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

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

赞助一下吧

确定学习吗?

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

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