您还没有专辑

开始创建自己的专辑吧

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

DW-电商网站案例-导航栏

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-电商网站案例-导航栏

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好我是M ,上节课呢我们已经完成了我们这个,网页的这个顶部的 ,一个top条top栏对不对 ,那么我们这节课呢搞定这个导航栏 ,这个导航栏我们 ,光看这一张设计图其实发现不了问题的,我们多看几套 ,记不记得M在第一节课的时候跟大家分析了的 ,就是我们这个顶部 ,上面这一部分包括导航这部分和下面这部分 ,其实是每一个 ,页面都有的,对不对 ,但是我们会发现一个问题啊,我们这个首页的导航栏 ,它的背景是透明的,我们可以直接 ,通过导航栏看到我们这个下面的banner部分对不对 ,但是呢 ,其它的页面,我们的导航栏都是有它自己的一个 ,背景色,也就是这个浅灰色 ,那么我们怎么样去 ,共用 ,我们第一个 ,导航栏,就是我们第一个写的也是这个首页的导航栏 ,我们怎么样,既能够 ,将我们这个导航栏的样式用到后面去 ,又不让后面的这个背景色来影响我们前面首页的设计图效果呢 ,这个是我们需要考虑的一个问题 ,那么先不多说我们 ,先来到PS里面去 ,来到PS里面干嘛呢?我们要把我们 ,这节课需要用到的一个 ,东西也是我们上节课 ,没有去 ,讲到是M忘记的一个东西 ,说一下就是我们这个字体了 ,Helvetical ,上节课录完之后呢,就同学向我反应说 ,

唉,M ,我们这个字体好像不太对 ,对不对 ,字体不对 ,那么首先呢,我相信大家打开这个psd文件 ,PS一定会弹出一个框,说缺失字体对不对 ,确实M自己也缺失,你看这里的感叹号 ,所以呢我们 ,就统一一下应用这个helvetical ,这是一款非常非常经典的英文字体 ,一个无衬线的一个字体 ,相信大家如果有学过平面设计或者之类的对这款字体应该 ,了解还蛮深的 ,反正用这款字体就没有错,对不对 ,我们就不扯远了 ,那么既然整个网页都是用这个字体 ,我们也可以放到我们这个公用的样式里面,对不对 ,字体怎么写大家还记得吗 ,好久没有写过这个css了对不对 ,Font-family ,记得打引号 ,Helvetica我就直接复制过来了,不拼了 ,好我们这边字体已经改变了 ,那么我们就正式开始来写这个,导航栏 ,这个导航栏啊 ,和我们后面 ,要做的一定要结构是一致的,那么我们 ,首先第一个 ,后面是有背景的对不对 ,所以呢和第一个top栏一样 ,我们也需要有一个专门的一个背景层 ,一个div ,你看我们的这个 ,外面是有个top背景对不对,我们再做一个什么呢 ,Div. ,NavBJ ,我要统一 ,虽然我们这一张是没有背景的,但是后面的有 ,所以呢 ,我们现在,虽然不给它写背景样式 ,

后面我们会需要单独去给它增加一个背景的样式的 ,好 ,然后里面是什么ul一样的 ,然后这个ul叫什么叫 ,Nav ,然后里面有li ,有几个li123456 ,7个 ,第一个 ,这个字啊 ,直接复制过来 ,或者呢,我们也可以把它给切出来,我们把它切出来吧 ,切出来然后呢直接把它当做一个 ,图片 ,然后,就是我们的内容了 ,WOMENS ,MENS ,然后最后有一个 ,这个是什么?大家还记得吗 ,这是一个 ,Input对不对 ,一个 ,文本的输入文本的框对不对input ,我们先这样放着 ,这就是我们的一个结构 ,已经出来了 ,好我们一个一个来写 ,这个 ,这个导航的背景 ,导航的背景我们可以看一下,我们前面这个背景是怎么写的 ,

宽度高度背景色对不对 ,我们也写 ,宽度100% ,高度,高度我们得量一量了 ,当然了而且我们量这个没有用 ,我们要量一个其它的 ,一个背景 ,你看这个是缺失字体 ,我们看一下82我们就 ,80好了,就不搞那么复杂了 ,背景色呢我们当然现在是不写的对不对 ,因为现在是没有背景色的 ,然后写nav ,Nav和前面的,这个top是一样的 ,我们需要让它居中 ,

登录后查看更多
换一批

为你推荐

每周一练

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

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

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

赞助一下吧

确定学习吗?

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

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