您还没有专辑

开始创建自己的专辑吧

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

DW-电商网站案例-弹窗(上)

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-电商网站案例-弹窗(上)

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello,大家好,我是M ,上节课呢,我们已经做到了这个 ,?介绍网站的导航栏 ,?这块位子 ,那么这节课呢我们要解决的就是这一个弹窗的问题了 ,?关于弹窗 ,M在前面的课程就已经给大家讲到过了 ,有一个专门的一个导航的案例,如果大家还有印象的话 ,是做的一个我们虎课网平台的一个导航的一个案例 ,和我们现在的这一个导航呢很像,就是什么呢 ,?我们鼠标移入到一个项目中去之后呢 ,?会弹出一个相对应的一个框 ,?也是我们这个弹窗 ,?那么如果大家 ,?有听过那节课的话 ,?那么我们制作这个弹窗 ,?应该来说是没有什么大的问题的啊 ,好,我们来看一下 ,?首先把DW打开 ,我们可以先 ,?来回顾一下我们前面做了一些东西 ,?首先就是顶部这个,然后就是我们的导航栏 ,?那么我们来看 ,?现在的这个弹窗 ,?我们应该怎么去 ,写它 ,M?给大家分享一下 ,M自己的一个思路啊 ,?首先 ,?这个 ,是一个大的Div ,这个Div就不用说了,对不对 ,?然后呢这个Div里面我们分成两个部分 ,?一个就是上面这里 ,?一个就是下面这个黑色低 ,?那么上面这一块呢 ,?我们再把它分成两个左以及右 ,?首先这个大的我们写死它的宽度之后 ,?我们左边给个50%,然后文字向左居中右边给个50% ,嗯?这边 ,

?文字是向左居中啊 ,?向左对齐,左对齐 ,?然后这边也是50%,然后文字还是左对齐 ,?这样呢 ,这一块我们就OK啦,下面就是一个Div嘛,一个 ,?白字黑底 ,然后字怎么居中呢,文字居中对齐 ,?然后通过行高来控制它 ,?这个就是我们的一个思路 ,?当然,这里可能通过行高,我们 ,不太能控制这个东西,我们可以给一个 ,上上边的一个????? ,?把文字往下挤 ,?这也是一个方法 ,?那么这个就是我们整个的一个思路,好我们来看一下 ,首先我们来回顾一下我们的CSS ,?这里是顶部的 ,然后从 ,?这里开始 ,?这是我们的导航栏部分了 ,?导航栏部分呢 ,?外面有个大的Div ,?然后里面包了一层UL,这个UL叫Nav ,?然后里面每个Li就是我们的 ,?导航栏的大标题了 ,?弹窗要写在什么写在我们每个Li的里面对不对 ,?我们直接 ,?外面那个大的Div就叫Div弹窗好了 ,?那么这个呢,我们可以 ,?直接在后面写 ,点弹窗 ,?首先外面这个大框它有什么样式呢 ,?就是一个 ,行高嘛对不对 ,?340的390 ,宽 ,?340Px,注意分号 ,高 ,?390px ,

?那么我们还可以加上什么呢 ,我们可以看到这边有个边距对不对 ,?下面也有 ,?左边也有 ,?右边也有,那么其实上面也是有的 ,?那么我们来看一下它这个边距是多少 ,?所以这个边距我们可以给一个什么,内填充也是Padding ,?上下左右所以我们就这么多写一个就是22Px ,好 ,?这个写好了之后呢 ,?我来看一下 ,?刚刚说到的什么 ,?框架,外面一个大的 ,?然后呢 ,里面分成了上和下两个部分 ,好我们再来接着往里面写 ,?上面 ,大家注意看这种 ,?这种命名叫什么,驼峰式命名 ,就是两个单词或者两个词组吧 ,?中间通过大写字母 ,进行一个隔开,驼峰式命名 ,?为什么不直接写Top呢 ,?因为我们前面有个Class叫Top ,看见没有,为了防止我们的代码样式冲突 ,所以呢我们这里叫弹窗Top ,好 ,?刚刚说到的弹窗的Top ,的里面 ,?就是这一块的里面 ,?我们还要分对不对,还要分左和右 ,那么 ,Left以及 ,Right ,?左右嘛 ,?这个是我们上边的一个结构 ,还有下面的 ,Bottom ,?那么我们整个弹窗呢一个Html的结构呢,就已经出来了 ,

?接下来的是什么 ,?慢慢的写 ,?我们先写 ,?上面的样式,也就是这个弹窗Top ,弹窗Top,首先它的宽度 ,?我们可以写100%对不对 ,让它继承它的父级,也就是整个弹窗的这个 ,?高度呢 ,高度呢我们可以怎么样我们可以量 ,?200 ,?200Px ,注意啊为什么从这里量呢,而不是从上面量 ,?是因为什么,是因为上面这是一个Padding对不对,我们刚刚 ,给了弹窗整个外部一个大的一个内填充20像素 ,所以我们从字母这个地方开始量 ,好?宽高好了以后 ,

登录后查看更多
换一批

为你推荐

每周一练

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

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

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

赞助一下吧

确定学习吗?

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

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