您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > 软件入门 > DW-伪元素的用法

DW-伪元素的用法

手机观看

扫一扫下载虎课app

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

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

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

按住画面移动小窗

DW-伪元素的用法

播放卡顿?建议切换线路

宽屏取消宽屏

学设计上虎课网

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

免费学习即将结束

关闭继续学习>

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

扫一扫下载虎课app

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

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

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

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

Hello大家好,我是M ,上节课我们学习的剩余几个伪类的用法 ,那么这节课呢我们再正式来开始学习伪元素的用法 ,我们常用的为元素就是before和after ,那么我们这节课的重点那就是首先 ,学习这两个伪元素一个叫做before ,一个叫做after以及呢它们相 ,对应的一个CSS样式叫content ,那么这节课的难点呢就是我们会做一个输入框的案例练习 ,好,我们首先来看一下伪元素 ,常用的伪元素呢,就是刚刚说到的before和after ,就是之前和之后 ,那么content是一个什么样的属性的 ,before和after呢是必须配合content属性来使用的 ,content主要是用来定义插入的内容 ,content必须有值 ,至少呢是空的,默认情况下 ,伪元素的display是inline ,也就是我们所说的行内元素啊 ,我们可以通过设置display:block ,来改变其显示 ,content属性里面呢可以选择attr ,调用当前的元素属性 ,或者呢通过URL也就是我们的链接来引用 ,一些媒体文件 ,比如说我们的图片 ,好,说了这么多我们进入到DW里面来看一下 ,伪类和伪元素是怎么使用的 ,首先还是新建一个HTML ,写好一个标题之后呢创建 ,然后顺手呢就复制到我们的站点里面 ,这都是老规矩啦 ,好 ,我们首先来 ,看一下 ,在开始之前呢我们写一个a标签 ,

如果大家记得的话是我们的链接标签 ,这里比如说我们是hao123 ,然后我们把hao123的网址 ,给复制过来 ,在这个href里面写上 ,保存一下 ,就会看到这里有一个hao123的链接了 ,我们这里已经有啦 ,那我们在样式里面我们来写一下 ,首先我们把 ,a标签里面的 ,自带的下划线给去掉 ,接着我们就要请我们的 ,伪元素出场 ,刚说到我们可以通过伪元素来添加 ,图片 ,那么要注意的是我们的伪元素无论是after还是before ,我们都是使用两个冒号的,after是在后面 ,before是在之前 ,如果我们想在前面插入一个 ,图片的话所以我们要用before ,然后刚刚说到了 ,content是必须配合 ,before或者after使用的,所以我们第一个就直接 ,写上content然后 ,找到url ,这里浏览我们 ,如果想插入这个hao123图片怎么办呢 ,我们把它给保存到我们的站点文件夹里面去 ,好,然后我们在我们的image文件夹里面找到这个图片 ,这里记得啊要打上分号,保存一下 ,我们在浏览器里面可以看到 ,这个图片就出现在我们这个标签的 ,

前方了,并且呢 ,我们鼠标可以点击这个图片 ,来进行一个链接的跳转 ,这个呢就是before ,before是之前的意思,所以会出现在我们这个标签的前面 ,好,我们可以来检查一下我们这个网页的HTML ,我们可以看到 ,HTML文档里面呢其实是找不到这个 ,伪类元素的这个呢也是我们 ,之前课堂提到的伪元素 ,是在实际的文档里面是找不到的 ,好这个是before我们来看下after ,a-f-t-e-r,after ,还是一样的content这个是必须得有的 ,然后我们来看下attr ,我们可以在这个括号里面 ,直接选上href ,来看一下是起到了一个什么样的作用 ,我们可以看到 ,这个呢会直接把我们的链接地址 ,给显示上去 ,这个就是我们这个attr的作用了 ,当然了,可能大家会觉得有一点挤啊什么的我们还可以 ,给这个伪元素 ,设置一些其它的东西 ,打个比方 ,不明显对不对 ,好,这样就隔开了 ,我们可以把我们的伪元素 ,看成是一个 ,盒模型 ,我们可以给它设置margin ,padding甚至 ,绝对定位,相对定位都是可以的 ,它只是 ,不存在于HTML中,但其实是我们是可以通过样式来控制它的 ,这个呢就是我们伪类的一个优点 ,经常使用伪类呢可以简化我们的HTMLl结构 ,

好,我们初步了解了 ,before和after之后呢 ,以及我们这个content CSS样式之后呢 ,我们要完成一个今天的案例 ,我们先在PS里面看一下 ,好,我们今天案例呢就是做一个 ,这种异形的对话框 ,因为我们知道现在许多手机端的app ,也都是用HTML进行开发的 ,如果大家 ,尝试这方面的工作的话呢 ,也许会遇到 ,要开发这种异型的 ,聊天框 ,那么这个东西我们应该怎么去写呢 ,

登录后查看更多
换一批

为你推荐

每周一练

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

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

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

赞助一下吧

确定学习吗?

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

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