伪类元素选择器仿土豆效果实现方案（73）

最新推荐文章于 2022-08-24 20:17:43 发布
最新推荐文章于 2022-08-24 20:17:43 发布
阅读量247 收藏 1
点赞数
分类专栏： css3基础100问 文章标签： css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45147894/article/details/106882589
版权

当年我们是怎么做的呢？是利用加入多个盒子标签，现在我们学习了伪元素就可以使得结构html变的非常简单明了了！ 

这是以前的代码： 

 有很多子div套在里面。

我们现在删除掉子盒子 

原来的： 

改后的： 

鼠标经过有效果： 

伪类元素选择器使用过程中标签之间是不能有空格的，这一点一定要记清哟！否则会失效！ 

㼛思雨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS伪类/伪元素选择器整理
09-25
CSS伪类及伪元素选择器，如超链接的a：link、a：visited、a：hover等等，本文整理了一些，喜欢的朋友可以收藏下
css伪类伪元素域高级选择器的介绍
09-25
css伪类伪元素域高级选择器的介绍，需要的朋友可以参考一下
伪元素选择器应用场景
weixin_56917972的博客
08-24 446
伪元素选择器应用场景
伪元素选择器使用场景
DIUDIUjiang的博客
03-04 278
1：伪元素字体图标 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪元素选择器使用场景-字体图标</title> &l...
综合案例：伪元素（字体图标，仿土豆效果，清除浮动）
shy的博客
04-14 277
伪元素字体图标 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
仿土豆首页图片切换效果
weixin_30952103的博客
10-05 79
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...
CSS案例：土豆网鼠标经过显示遮罩
icemwj的博客
09-17 906
案例：土豆网鼠标经过显示遮罩 目的： 练习元素的显示与隐藏 练习元素的定位 核心原理： 原先半透明的黑色遮罩看不见， 鼠标经过大盒子，就显示出来。 遮罩的盒子不占有位置， 就需要用绝对定位 和 display 配合使用。 鼠标经过显示遮罩的效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿土豆网显示隐藏遮罩案例
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
css3之UI元素状态伪类选择器实例演示
09-27
主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下
仿土豆网显示隐藏遮罩案例（HTML、CSS）
...
08-11 386
仿土豆网显示隐藏遮罩案例（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&
js+css打造的仿土豆网带缩略图的图片幻灯切换效果
瞎几把学
08-11 928
最近要实现一个带锁略图的幻灯片图片切换效果，从网上
伪元素选择器使用场景【视频播放遮罩层】
weixin_43837268的博客
10-11 497
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>伪.
仿土豆显示透明盒子
qq_32942247的博客
11-02 310
仿土豆，鼠标放上去会出现播放页面 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp
显示与隐藏——仿土豆视频
weixin_39150852的博客
09-21 298
通过现实与隐藏，实现仿土豆视频的做法，即当鼠标经过图片时显示播放按钮，代码如下： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/ti
仿土豆做法（display继模式转化后的第二个作用：显示与隐藏）
youguang_的博客
10-18 153
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
:before和:after伪类元素创造神奇效果
chelen_jak的专栏
03-10 2165
转自：http://www.alixixi.com/web/a/2011090273706.shtml 文章简介：伪类元素之美. 通过使用:before和:after，你能创作出让人称奇的视觉效果。对页面中的每个元素，你都有两个额外的可以控制的元素，本来这些是需要额外的元素来实现。他们给设计带来了更多的趣味性的空间，而不是增加无语义的有负面影响的标签。这里给
重温CSS3 的新特性
秋泊酱的博客
10-24 185
CSS3 新增选择器 CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 属性选择器 结构伪类选择器 伪元素选择器 1、属性选择器 属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器 注意:类选择器、属性选择器、伪类选择器，权重为10。 2、结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素 nth-child (n) 选择某个父元素的一个或多个特定的子元素 n 可以是数字，关键字和公式 n 如果是数字，就是选择第
jquery实现遮罩层
发疯的土豆
03-29 223
遮罩层的实现 你确定要删除吗？     #bg{ display:none; position: absolute; top:0; left:0; width:100%; height:100%; z-index:1; background:#000; opacity: 0.5; } #content{ dis
h1到h6的字体大小（93）
weixin_45147894的博客
07-06 7123
不同浏览器默认的字体大小不同，若按照16px的话，h1到h6的大小如下： 浏览器默认为body:100%=16px; 计算得出： h1=32px h2=24px h3=18.72px h4=16px p=16px h5=13.28px h6=12px
css3的伪类选择器和伪元素选择器
最新发布
04-01
CSS3的伪类选择器和伪元素选择器是用来选择不是文档树中实际存在的元素或状态的选择器。 伪类选择器： 1. :hover - 当鼠标悬停在元素上时触发 2. :active - 当元素被激活时触发（例如，当按钮被点击时） 3. :focus...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值