您还没有专辑

开始创建自己的专辑吧

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

DW--电商网站案例-首页内容

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW--电商网站案例-首页内容

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好我是M ,上节课呢我们 ,已经完成了 ,这个 ,首页网站的这个Banner ,这节课我们来做的是什么呢就是 ,中间这块位置 ,好话不多说我们来看一下这一块去怎么做它 ,我们去到DW里面这个是我们上节课做完了 ,Banner部分 ,可以 ,先来看一下我们之前做的 ,Banner以及这个弹窗好都有了 ,那么我们来接着写 ,写之前呢注释一下 ,这里是 ,Banner ,然后呢我们要写的是 ,所谓的内容部分顺便也一起注释了吧 ,我们先来看一下设计图 ,我们这节课来做这一块位置 ,我们来分析一下 ,这一块要怎么去做它 ,首先看到这根线没有 ,上面的线以及,下面的线 ,这个线呢就很好的帮我们划分了一个大的结构 ,这样 ,它们是一个Div对不对 ,我们让这个Div ,宽高写好之后呢让它 ,居中 ,居中之后呢里面怎么分呢我们分成3块第一块 ,就这个小的导航了 ,这用一个的UL的LI ,是不是然后给一个鼠标移入时变成颜色 ,然后另外一块另外两块是怎么分呢 ,这一块 ,和这一块我们分成两块,为什么 ,因为我们发现这个图片啊,是上下参差不齐的 ,但是这样一块是很整齐的 ,这一块50% ,这一块,50% ,

它们就OK啦 ,这个呢,是我们这节课的思路啊 ,那么我们开始来写 ,首先大的Div ,Contten ,Contten里面 ,我们要有一个UL,UL里面有LI ,我们先把大的结构写一下啊 ,然后呢UL下面 ,是一个 ,我们先把两个50%的框放在一个大的Div里面 ,比如叫 ,Photo ,Big好了好不好 ,然后Photo Big里面呢 ,有什么 ,一半 ,Half ,这样有两个 ,这个呢,我们的结构就出来了 ,是不是 ,我们这节课可能讲的会有一点点快 ,之前我们都是写好一个Class,就是增加样式 ,写好一个Class增加样式,M这次呢 ,直接把我们今天用到的整个的结构说出来了 ,回顾一下 ,这个Div ,是我们这个内容部分的一个大的盒子 ,然后呢,里面先分成两个大块儿 ,一个是UL和LI,也就是我们的 ,导航这一块 ,一个呢,是这个叫Photo Big ,也就是配点大照片嘛,大照片框 ,也是我们这些所有的照片框 ,然后这个里面呢 ,我们分了两个叫Half ,一半 ,为什么 ,左边50%3张图片,右边50% ,3张图片 ,我们结构就是这个样子的 ,好来开始写样式 ,

Contten ,Contten我们要写什么样式 ,最基本的就是宽与高对不对 ,来我们看一下 ,我们给个双数吧 ,高 ,40Px ,然后呢 ,然后我们 ,宽高有了要让它居中对不对 ,Margin ,上下 ,上下多少我们来看一下 ,下面有一个这个距离 ,上面也有应该是一样的 ,上下是44Px左右,我们让它居中就是Auto自动对不对 ,然后 ,边框 ,上下边框 ,Border ,-Top ,上边框 ,1Px ,Solid实线颜色我们量一下 ,这个 ,当然啦 ,还有Border-Bottom ,下边距 ,一样的对不对 ,或者大家还记得我们整个的写法嘛,写四个Px ,上右下左 ,这是上1右0下1 ,

左0 ,大家也可以尝试的写成一个M这里写成两个 ,方便大家去理解 ,保存一下 ,这边也保存一下然后看一下网站 ,好,我们这个框已经出来了 ,在这儿 ,Contten ,缩小一点看,因为咱们这个录屏的 ,宽度是1280但是我们 ,光这个Div就已经是1294了对不对 ,所以会超出我们现在看的这个 ,屏幕范围所以M这里缩小一点给大家看一下它是居中的 ,好 ,然后呢就是UL和LI了 ,来看下都有些什么东西啊 ,我们打吧 ,这是我们的 ,小导航 ,我们给它取个名吧 ,叫什么呢 ,Nva- ,X好了或者S吧 ,S是衣服里面的 ,小码对吧 ,我们给它起这个名 ,好 ,Contten ,Nva-S ,首先它的宽度是100% ,对吧我们要跟我们的父级是一样的 ,其次高呢 ,量一量 ,高从这个地方 ,

到这个地方 ,9190我们这里宽了一点,像素上框了一下 ,一个边框我们再看一下边框是两个像素好 ,90Px ,然后呢我们刚刚发现我们的边框是两个像素M ,习惯性的打了1 ,这里我们改一下 ,然后呢 ,高给了我们顺便把行高也写一下吧,也是90px ,对吧顺便再设置一下字体的大小来看一眼 ,10像素好了 ,

登录后查看更多
换一批

为你推荐

每周一练

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

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

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

赞助一下吧

确定学习吗?

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

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