您还没有专辑

开始创建自己的专辑吧

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

DW-电商网站案例-lookbook

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-电商网站案例-lookbook

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好,我是M ,上节课呢我们完成了我们 ,电商网站案例首页部分的 ,图片内容 ,也就是 ,这一块的内容 ,当然啦,上节课的作业是让同学们完成右边这一块 ,不要忘了 ,我们这节课呢,主要做的是 ,这个,这个lookbook ,我们来完成这个板块的 ,这个制作 ,首先我们来分析一下 ,这个版块第一个Box就是这个 ,这个Box挨着我们上面 ,我们来看一下,回顾一下我们的 ,那个吧 ,我们上节课做的就是这个photoBig ,这个框里面分成了两部分 ,然后是左边 ,也就是 ,这块位置了 ,然后还有右边这边 ,那么我们挨着photoBig ,在那个div写这个 ,我们这叫lookbook ,Box,好 ,好写在哪 ,写在 ,这个的下面 ,look,book ,大写B ,Box ,这样 ,好,我们来写样式 ,点contten ,里面的这个 ,它主要是什么样式呢 ,宽和高对不对 ,然后我们再让给它一个居中 ,我们量一下它的宽,宽是 ,1500px ,高呢 ,

来量其中的一个 ,刚刚是量的388 ,然后这根线我们应该是在上面的那个盒子里面就有写过了 ,保存来到浏览器里面看一下 ,对这根线,我们从上节课就已经写过了,然后我们 ,刚刚写的,那个Box ,LookboobBox,就在这个地方 ,当然啦,还要干嘛,让它居中,对不对 ,Margin ,Margin,它是上边距是不是还有一 ,一点点,44,46吧 ,上 ,46px,左右居中,好 ,下的话我们暂时先给0 ,当然啦我们可以先直接给上或者给下 ,给上吧,下面是90px ,这样我们后面就可以少写一点 ,来到浏览器里面刷新一下 ,好间距出来了 ,间距出来了我们来看一下 ,这里面就好说了对不对,三个小的div ,每一个长的都是一样,首先是一个图片 ,然后字 ,字 ,然后这里有个按钮,这个按钮我们可以写成div ,然后图片样式写出来之后我们就直接换图片以及文字 ,这是我们的一个思路 ,好我们来 ,M就先写这个把,以这个为标准 ,来看一下,这个是490的宽 ,好这个盒子里面怎么的 ,

好lookbook ,差些什么 ,Lookbook宽度是 ,490px ,高度 ,和上面一样对不对100% ,然后呢 ,我们先写一个出来 ,看一下设计图 ,得有个背景色对不对 ,f8 ,Background ,然后还有什么吗 ,还有一个 ,我们可以注意到我们这个文字 ,跟它的最右边是不是有一个,间隔 ,这个间隔我们可以写成,外面这个Box的一个 ,内填充 ,内填充50 ,Padding-right50px ,这样话有,有一个什么好处呢,这样我们待会写P标签 ,然后直接可以让它文字向右对齐 ,文字右对齐之后 ,它就会到P标签的最右边 ,如果我们不给这个padding的话呢 ,这个P标签的最右边就在现在的鼠标浮动的区域了 ,但是给了个这个padding之后我们就会把文字给挤到这个地方来 ,好我们可以来试一下 ,P ,Your ,我们来看一下 ,它现在这个地方对不对 ,在我们的右上角 ,那么我们要怎么写呢 ,它里面的P标签,首先 ,Text-align:right ,我们顺便 ,把文字的样式都写下把,比如说这里有一个加粗对不对 ,

我们这里先不写加粗,为什么呢 ,或者我们这样把 ,给这个P标签起个名 ,叫,tittle ,这样我们可以专心写 ,然后,文字 ,加粗以及颜色 ,顺便看一下字号把 ,颜色 ,以及font-size ,其实讲老实话 ,26作为网页设计的来说这个字体还是比较大的 ,刷新一下 ,我们的字已经到右边来了,而且我们可以看到是什么呢 ,就是我们并没有到最右边,因为我们给了一个padding-right ,50像素 ,所以把这个地方给空出来了 ,大家做的是什么 ,把这个距离给找到 ,Margin ,Top对不对,72px ,刷新一下 ,怎么没有用 ,这里,我们可以看到我们这个margin ,是给到这个地方来了 ,所以我们要做一个什么事情呢 ,我这里得选择解决这个问题,我们可以看到是什么情况呢,就是 ,我们的这个P标签 ,给了margin-top之后,它针对的是什么 ,

这并没有针对这个lookbook做一个向上的一个间距而是针对它 ,来去做这么一个间距 ,那么我们要怎么做呢 ,我们可以选择给 ,P标签一个浮动 ,或者呢我们换一个标签 ,因为我们知道我们这个P标签是一个块元素 ,

登录后查看更多
换一批

为你推荐

每周一练

立即参与

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

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

赞助一下吧

确定学习吗?

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

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