案例二---溢出属性 & 伪类选择器 & 背景图片属性设置

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量144 收藏
点赞数
分类专栏： 案例 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Flora_hsx/article/details/126083725
版权

一：代码

<!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">
    <title>Document</title>
    <style>
        *{
            padding: 0%;
            margin: 0%;
        }
        #box{
            width: 890px;
            height: 290px;
            margin: 0 auto;
            /* 让盒子自动显示在屏幕中间，记住！！！ */
            overflow: auto;
            /* 溢出设置 */
        }

        .message{
            width: 162px;
            /* 164-两边边框2=162px */
            height: 112px;
            /* 114-两边边框2=112px */
            border: 1px solid #808080;
            /* 设置外边框，记住！！！ */
            float: left;
            margin-right: 48px;
            margin-bottom: 20px;
        }

        /* 伪类选择器 */
        .message:hover div{
            background-color: #219cea;
            /* color: white; */
            /* 文字颜色不能在此设置，优先级不够，不会执行 */
        }
        /* hover属性加到谁身上，说明鼠标滑过此标签时，会做出对应变化 */
        .message:hover  div p{
            color: white;
            /* 文字颜色设置在此 */
        }
        .message:hover .market{
            color: #219cea;

            background-image: url(/photo/11.png);
            background-repeat: no-repeat;
            background-position: right bottom;
            /* 背景图片属性设置 */
        }

        .message div{
            height: 84px;
            width: 162px;
            background-color: #cccccc;
            font-size: 12px;
        }
        .price{
            line-height: 63px;
            height: 63px;
            padding-left: 21px;
            color: #b5b5b5;
        }
        .date{
            padding-left: 21px;
            color: #b5b5b5;
        }
        .market{
            background-color: white;
            height: 28px;
            line-height: 28px;
            /* 以上注意 */
            color: #000;
            text-align: center;
            /* 文本居中 */
            font-size: 12px;
            /* 字体大小 */
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>

        <div class="message">
            <div>
                <p class="price">￥100.00圆</p>
                <p class="date">有效期至：2022-12-30</p>
            </div>
            <p class="market">[店铺][商城]</p>
        </div>
    </div>
</body>
</html>

二：运行效果

 

阿茶阿茶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
背景图片_伪类选择器
unlockmyname的博客
06-06 381
1.background背景图片 background-image: url(地址); 背景图片平铺,默认是铺满整个父区域. 注意地址的准确,和img有点点不一样. background-repeat: no-repeat; 背景图片不平铺,只显示一张,不管一张图够不够 铺满. background-repeat: repeat-x; 横向平铺 background-repeat: repeat-y; 纵向平铺 background-repeat: cover;
overflow 属性 以及元素框溢出实例
Abbey_qi的博客
07-24 357
CSS overflow 属性 详细解说可观看： 菜鸟教程：https://www.runoob.com/css/css-overflow.html w3school：http://www.w3school.com.cn/cssref/pr_pos_overflow.asp 定义：overflow 属性规定当内容溢出元素框时发生的事情。 值： 值 描述 visible ...
背景图+列表+伪类选择器
weixin_30385925的博客
08-18 126
Background-color|image|position|repeat 颜色图片位置重复 图片优先CSS Sprites雪碧图：减少http请求，减小服务器压力。一张大图，通过背景偏移position截取小图。Li列表list-stylelist-style-imagelist-style-positionlist-style-type&lt;a&gt;标签伪类选择器link 未访问v...
html伪类选择器图片,css3 伪类选择器快速复习小结
weixin_35076990的博客
06-25 170
前言如果说 css 作为前端开发的基本功, 那么 "选择器" 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计.本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们:first-childlast-childfirst-of-typelast-of-typeonly-childonly-of-typenth-childnth-last-ch...
html图像用伪类选择器,用HTML写伪类选择器，结构伪类选择器，伪元素选择器样式...
weixin_33049919的博客
06-03 94
Lorem 一很等指似很一者下插近直好一的的有段文，ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, nihi调代求学功解宗维如请框总行断随以移泉动实使时近用码的会能,，护小求架结商的机我动水画现用还近用码的会能,，护小求架结商的机我动水画现用还近用码的会能l?Lorem 一很等指似很一者下插近直好一的的有段文，ipsum ...
personal-library
03-29
1. **选择器**：CSS3新增了伪类（如`:hover`, `:active`, `:focus`）和伪元素（如`::before`, `::after`），以及更强大的类型选择器（如`nth-child()`, `nth-of-type()`, `not()`）等，增强了元素的定位和操作能力。...
html5模板-欧美风范HTML5网站模板.zip
03-15
1. 选择器增强：如:nth-child()、:not()、:before和:after伪元素等，使CSS更具语义化和可维护性。 2. 层叠样式表：CSS3引入了层叠上下文，使得样式层叠规则更加清晰。 3. 动画与过渡：通过transition和animation可以...
CSS 教程(HTM).rar
07-09
1. **选择器增强**：CSS3引入了更强大的选择器，如伪类选择器（`:hover`, `:active`, `:focus`等）、兄弟选择器(`~`)和后代选择器(`&gt;`). 2. **过渡与动画**：`transition`属性允许平滑地改变一个或多个CSS属性，而`...
Curso-HTML-CSS:Curso de HTML 5 e CSS 3 do Curso emV&iacute;deo
03-31
1. **选择器增强**：CSS3引入了更强大的选择器，如类选择器、属性选择器、伪类和伪元素，使得样式规则更加精确和灵活。 2. **边框与背景**：圆角边框（border-radius）、阴影效果（box-shadow）和背景图片渐变等...
Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap)-教案.zip
07-10
1. 选择器扩展：新增伪类和伪元素，如:nth-child()、:nth-of-type()、::before、::after等，更精确地定位元素。 2. 层叠上下文：通过z-index实现元素的层级控制。 3. 动画和过渡：使用@keyframes创建动画，...
html伪类替换图片,css之Content-替换元素
weixin_32357285的博客
06-07 694
壹 替换元素[toc]1、what 替换元素我们根据外在盒子可以分为内联元素和块级元素，根据是否具有可替换内容，我们也可以分为替换元素和非替换元素我们把通过修改某个属性值呈现的内容就可以被替换的元素称为替换元素， 这一类都是典型的替换元素特点：内容不受页面上的css的影响，样式表现在css作用域之外，如果要替换元素本身的外观，需要类似appearance的属性。或者是浏览器本身暴露的接口。但是直...
通过目标伪类实现图片切换
吞石鱼的博客
08-20 981
说起图片切换，我们首先会想到定位+display：hidde的方法，然后点击某个图片时做排他然后使点击的图片显示。 下面我们来说目标伪类实现图片切换的方法，可以很简单的实现图片切换效果。 首先我们来介绍一下目标伪类。 它匹配文档URI中标识符的目标元素。 URI中的这个标识符包含一个“#”字符，后面跟着一个与文档中某个元素的id属性值匹配的标识符名称。 目标伪类选择器需...
html伪类元素加图片,CSS伪类选择器:before、:after使用：插入字符、插入图片、插入项目编号...
weixin_35042833的博客
06-04 3366
before: 伪元素选择器用于在某个元素之前插入一些内容伪类选择器:before使用content属性插入字符、属性插入图片css3.p_before:before {content: 'H';color: #01B4EE;}.p_beforeImg {background: #eeeeee;width: 200px;height: 80px;border-radius: 6px;padding...
css3中伪类选择器:target的使用
Hey firefly
04-04 9827
参考资料　CSS3 target伪类简介今天由于在做任务13，里面有一个子任务是要求用css写出一个简单的图片轮播，刚开始真的是完全没有思路，想着不用js怎么绑定点击事件呢，看了别人的一些实现方法，发现:target是一个神奇的东西。如果想看用css3实现的图片轮播，狠狠点击这里demo刚开始接触:target时，真的是一头雾水，觉得这个是个什么东西，怎么能处理点击事件呢。看了差不多五六篇博客还有简
HTML5中的伪类选择器 实现一张图片翻转特效
Elo的博客
05-30 1660
效果示意图图中，我实现的效果是  当鼠标悬停在图片上面时，图片将围绕下边界旋转90度代码示例:&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;/title&amp;gt; &amp;lt;style&amp;gt; *{ margin:
css 圆形扩散特效 水波
笔记库
10-16 2078
&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1396
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1210
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 635
仅对已定位的元素（）有效，默认值为0，可以为负值。
微型计算机原理-课后习题答案.ppt
11-15
其中包括了对机器字长为6位和8位的数进行原码、补码和移码的转换，以及对一些二进制补码运算和溢出判断的例子进行了详细解答。此外，还给出了将8421 BCD码转换成十进制数和二进制数的方法。最后，根据已知的起始逻辑...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值