您还没有专辑

开始创建自己的专辑吧

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

DW-导航案例(上)

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-导航案例(上)

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

?Hello大家好,我是M ,上节课呢,我们已经完成了对伪类以及伪元素的学习 ,?那么这节课开始,我们正式 ,?的,通过一个实际的案例来深入的去了解伪类和伪元素 ,?那么这节课的重点呢,首先是 ,?如何在案例里面合理的去运用伪类和伪元素 ,?这个是我们学习的重点之一 ,?其次呢,就是我们要知道如何的去通过伪类与伪元素的特性 ,?来简化我们 ,?的网页结构,难点呢就在 ,?我们要学习一个新的交互方式 ,就是鼠标移入时显示某一个板块 ,好,我们来看一下我们的案例 ,?我们的案例呢非常的简单 ,也是我们非常熟悉的就是这个虎课网的 ,?我们这个二级导航部分呢 ,就注意啊是这个黄颜色的 ,?这一块位置 ,?我们来截个图,这是我们的 ,?选中的区域 ,?当然了还有,这个 ,?红色框框就是我们的 ,?案例部分了 ,通过这个案例呢,我们要学会就是首先鼠标移入时 ,?我们的这个 ,?导航 ,?会有一个样式的转换,以及新出现的一个新的 ,?板块,好,话不多说,我们先把它截个图 ,保存 ,?然后放到PS里面去打开 ,?我们要做的就是这个 ,?黄颜色的导航部分 ,?好,我们来到DW里面 ,?我们重新的去新建一个站点 ,打个虎课网 ,导航 ,

保存 ,?然后呢,新建一个HTML ,就叫导航好了 ,创建 ,?保存一下 ,保存到我们刚刚的站点里面 ,然后 ,?我们还是先来分析一下 ,?关于这个 ,?导航,我们要怎么去写 ,?首先呢这个 ,?黄颜色的这个DIV肯定少不了的对不对 ,?那么在这个DIV面呢,我们需要去写一个UL和Li的标签 ,来组成这个 ,?导航的内容 ,?然后每一个Li呢,就是我们的一个栏目了 ,?然后Li的里面呢 ,就会有我们的这个弹出的这个框 ,?这是我们大致的一个思路,以及我们这个网页的结构 ,那么我们先开始来写 ,首先写第一个标签 ,?我们就叫它背景 ,?好了,然后背景里面呢,是一个UL ,?这个UL我们就叫Navigation ,导航 ,?然后里面有很多个例,比如说PS ,?好像不是PS哦,是软件入门 ,?好,我都打好吧 ,?软件入门 ,?看一下字体设计 ,海报设计 ,?我们这个导航的 ,?初步结构呢,就已经出来了 ,

我们现在开始来写样式 ,?还是Style标签 ,?在开始之前呢,我们首先给 ,?Body ,?写一点默认样式 ,由于Body自带了Padding和Margin,Margin我们先把它给 ,归零 ,Margin是自动 ,?然后呢 ,?我们可以看到,我们整个导航的大部分字体都是12号字 ,?所以呢我们先 ,?设置 ,网页里面所有的字体都是12号字 ,如果后面碰到不是12号字的,比如说这里 ,?这是14号字,我们在单独的给它增加,14号字的 ,字体样式 ,好,首先来写背景 ,背景的样式是什么样的呢 ,?首先它的宽度是 ,?显示器的宽度,所以我们也可以写作100% ,这里当然我们都不能写成一个固定的数值把它给写死了 ,?100%,高度我们来量一下 ,好,高度是40 ,PX ,?然后还有什么,背景颜色对不对 ,Background-color ,我们来吸一下 ,复制 ,?好,保存一下F12,看一下 ,?好,我们这个 ,DIV好了以后呢,我来写 ,?我们来写这个UL,也就是我们的Nav ,

?首先我们Nav有一些什么特点呢,我们要 ,?来看一下设计图 ,它是这一块位置 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

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

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

赞助一下吧

确定学习吗?

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

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