您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-案例制作-产品展示模块

DW-案例制作-产品展示模块

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-案例制作-产品展示模块

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello,大家好我是M ,上节课呢我们这个科技网站已经做到了,关于我们这个版块 ,我们先来看一下 ,KWF12 ,好,做完了,关于我们这个版块 ,那么这节课呢我们今天 ,就继续把产品展示这个板块给它给 ,拿下来 ,首先呢,产品展示这里我们会看到有 ,背景图以及四个产品图我们先把它们 ,这五张图片给切出来 ,找到 ,找到背景图 ,这里注意啊注意看右边PS里面的图层啊 ,这里也是背景图的一部分所以是这3个 ,我们把它合并成一个组 ,叫做 ,产品 ,背景 ,BJ ,好 ,然后用Cutterman ,找到我们的站点 ,里面的Image文件夹 ,导出 ,好了这是我们的背景然后就是我们一个一个的产品 ,找到它这样 ,叫它产品1 ,导出 ,然后这是产品2啊 ,产品2导出 ,产品3 ,好,我们这五张图片都已经OK了 ,那我们就进入到DW里面继续来接着做 ,

首先呢还是 ,给一行注释 ,这里需要什么,产品展示 ,产品展示首先还是Div ,点 ,怎么写呢叫Show好了 ,这个呢,就是我们整个带背景的了 ,这里我们就不需要去用Image标签了我们直接 ,写成一个背景就好了,我们先来量一下 ,首先宽度呢,肯定不用说了,100% ,Width ,样式表里面 ,宽度 ,100% ,然后 ,高度我们来量一下 ,哦,前面这里是个毫米我们要把首先要把单位 ,给改成像素,这改成像素确定 ,再来量一遍 ,566 ,高度566Px然后呢 ,居中对不对Margin 0 ,自动 ,再就是背景了 ,Background Image ,Url浏览一下 ,找到我们刚刚的背景 ,产品背景刚刚我们的切图 ,然后 ,保存一下 ,F12 ,看一下 ,就出来了,对不对 ,出来了,好,我们看一下 ,产品展示这里 ,和我们刚刚的关于我们还有一个间距对不对 ,这个高度是74像素 ,所以呢,我们这里的间距 ,就不是0自动的,就是上74Px ,左右自动下0 ,

保存一下再来看一遍 ,它就下来了,对不对 ,好背景OK了 ,接下来就是这个标题了 ,我们可以看到这个标题 ,和上面我们之前写的关于我们是不是一样的 ,除了字的颜色不一样以外 ,那么我们可以怎么做呢 ,我们可以直接把这里的关于我们这个标签复制过来 ,我们不修改它的 ,Class我们把这几个字 ,改掉叫做产品 ,介绍 ,这里呢?为什么可以这样做,大家都叫 ,Tittle的时候呢,它们共用的是同一个样式我们保存看一下 ,可以看到我们的产品介绍四个字在这里,然后呢 ,样式里面的这个背景横线已经在了只是 ,我们的设计图里面,这个产品展示四个字是白颜色的 ,其余都是一模一样 ,道理是同理的后面的新闻中心以及客户案例,我们都是 ,可以直接把那个Class命名给复制过来,这样 ,我们前面课堂写的样式也就跟着过来了好我们可以看到 ,剩下的新闻中心,客户案例,以及之前的关于我们 ,都是黑色字,只有这个产品展示是白色字 ,那么我们就不要去动 ,Tittle的这个样式了,我们来找一下 ,这边写的Tittle ,在这里 ,我们不要去动这个样式了,那我们怎么去修改呢 ,还记得我们前面关于样式的优先级 ,

是不是之前的课堂说过 ,离标签越近的样式优先级越高 ,所以我们这里直接在 ,标签里面给它添加一个颜色样式 ,Color白色 ,保存一下 ,再来看 ,刷新F5刷新 ,好这里我们可以看到 ,这个字体的颜色变成白色了,然而前面的关于我们没有动 ,这就是因为我们这里的颜色样式是优先于Tittle的 ,所以这里呢我们字体样式就变成了 ,白色 ,然后呢 ,这里有一个间距对不对 ,量一下37 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

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

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

赞助一下吧

确定学习吗?

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

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