您还没有专辑

开始创建自己的专辑吧

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

DW-电商网站案例-banner

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-电商网站案例-banner

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好,我是M ,?我们继续我们这个电商网站的首页啊 ,?上节课呢我们已经完成了 ,?这个弹窗的一个制作 ,?以及导航下面这个角标 ,我们先来看一下,也就这样,我们鼠标移入时,弹窗出现 ,?然后呢,这个角标 ,?大家如果还有印象的话,是我们通过Wlan ,?来写的啊 ,?给它一个Position,绝对定位 ,?定位到左下角 ,鼠标移入,然后 ,?我们这边字颜色会变,这个是我们前面几节课讲的 ,然后上节课呢,就是这一个弹窗 ,那么这节课的重点是什么呢 ,我们搞定这个Banner图 ,?这个Banner图啊 ,?为什么要花一整节课来讲,应该很简单对不对 ,一个Div ,?然后给一个 ,Background背景 ,就完了吗,对不对 ,?但是呢我们,这个案例啊 ,它其实 ,?有一个小小的坑 ,?上节课,M已经提过了 ,那么这个坑是什么呢 ,?首先我们来看,第一个就是我们这个1-Home ,首页这个设计图 ,我们会发现一个什么问题呢 ,就是说我们 ,?这个导航啊 ,?以及我们这个弹窗 ,它没有背景的,它可以直接透过我们的导航来看到我们 ,?下面这个Banner图对不对 ,?是不是这样子的 ,?那么M是怎么写的呢 ,?看看M的HTML结构啊 ,?导航 ,?给了一个什么 ,Nav背景 ,BJ ,?背景 ,?然后背景里面呢才是 ,Nav ,?以及每个Li ,?这是我们每一个小的一个导航内容 ,

?那么我们这个Nav背景是什么东西呢 ,?我们来看看我们给的什么样式啊 ,其实我们就给了一宽度和高度,什么都没有 ,?没有背景 ,?这是为什么 ,?理论上来说 ,?大家看到这个设计图 ,?应该会怎么去做呢 ,?首先这是一个大的Div ,M用图层呢画好了 ,首先是什么呢 ,?这个 ,?是一个Div ,有点粗糙,大家看懂意思就行了 ,?红色框是个大的Div ,?然后呢 ,?在红色框里面,我们会有一个 ,?这样的一个 ,小的导航的框 ,?大家看到这个设计图,我们会这样做 ,?大的框给一个Banner背景 ,?然后小的框给这样一个导航 ,?我们就可以完完全全的把这一个设计图给展示出来对不对 ,?但是M呢 ,?是单独的写的 ,?首先我们给了一个Nav背景,而且这一个 ,?其实我们还没有给什么样式,只是给了个宽高 ,?其次这里才是我们的导航栏 ,?那么这是为什么呢 ,?因为啊 ,?这个地方我们不能只看 ,?这一张设计图 ,?如果只是单纯的来看这一张设计图的话 ,确实应该是像现在的这样的一个结果就行 ,?我们应该结合着什么 ,?结合着我们剩下的几张图来看一下 ,?剩下的几张图我们会发现 ,?剩下的图的导航栏 ,?它不是透明的,它是有一个背景色的看见没,有一个浅灰色 ,?你看我们这是二 ,?然后第三个 ,设计图也是浅灰色,然后其次下面才是导航 ,

?这里 ,?第四个也是 ,?第五个也是 ,?唯独只有第一张 ,?我们的导航栏是透明的 ,可以看到下面的Banner图 ,好?那么,这意味着什么呢,意味着 ,?如果大家还有印象的话,M在现在这个案例的第一节课 ,就给大家分析过 ,?我们的上半部分 ,?这是顶部 ,?这个黑色条条以及我们这个导航栏 ,?还有 ,?底部这一块 ,?在其它的设计图里面都是公用的,对不对 ,?这点我们应该还记得吧这里 ,和?上面都是公用的 ,?所以呢 ,?我们一定要想办法就是说 ,?其它几个页面能公用的,我们一定要用上 ,?不要自己再给自己增加一个无谓的工作量,去自己写 ,?每页每页都重新写,是很一个很麻烦的一件事 ,好,那么既然要公用的话,这里的背景 ,?是没有的,透明的我们都可以看到下面的图 ,?但是这边呢又是有背景色的,不透明的 ,?那么怎样的一个公用法呢 ,?首先呢,我们第一个首页 ,?我们是没有给背景对不对,你看我们的 ,?这里M很有先见之明啊 ,Nav背景这个Class也就是个框 ,?后面的几个设计图 ,?我们这个背景色就会直接加在这里 ,?这个Div上面 ,?为什么呢,因为我们会看到样式 ,它就是宽和高 ,?它的作用呢 ,?就是这一块位置 ,?我们导航栏的位置 ,所以呢,我们到这儿直接给它增加一个背景色 ,?那么后面几张图,哎完美了 ,?我们只用添加一个样式 ,

?就可以把这些东西全部给复制过去 ,那么,我们第一张设计图怎么办呢 ,第一张设计图,我们当然首先是这一块呢,我们不能给 ,任何的背景颜色,我们得让它透明对不对 ,?其次呢 ,?我们得保证我们现在的这个导航栏 ,?这个导航栏啊 ,它是 ,?在我们这个Banner图的上面 ,?换句话说就是Banner在导航栏的下面 ,?这样做的方法呢有很多 ,?比如说我给这个 ,?导航来一个浮动 ,它是不是就可以 ,跑到我们Banner图的上面了 ,当然了如果给浮动的话,可能会把我们这个顶部的Top条给 ,挤下去 ,?那么给浮动的话呢不给 ,?这个顶部的Top条,也需要增加一个浮动 ,?这就有一点麻烦了 ,?那么还有一个办法,就是直接给Position ,????????用绝对定位的方式 ,?让它不去占这个空间 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

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

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

赞助一下吧

确定学习吗?

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

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