css基础 精灵图 简单示例

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">
        .full{
            height:200px;
            width:220px;
            border:1px solid red;
            background:url("jingling.png") no-repeat;
        }
        div[class*="show"] {
            height:40px;
            width:40px;
            border:1px solid blue;
            background:url("jingling.png") no-repeat;
        }
        .show-a {
            background-position:0px 0px;
        }

        .show-b {
            /* 没有 !important,居然会发生权重异常并覆盖。。。 */
            background-position:0px -45px!important;
        }
    </style>
</head>
<body>
    <div class="full">

    </div>

    <hr />

    <div class="show-a">

    </div>
    <hr />
    <div class="show-b">

    </div>
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8442457.html

时间: 2024-11-06 09:29:43

css基础 精灵图 简单示例的相关文章

css基础 class选择器 简单示例

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

CSS之精灵图与字体图标

本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓存机制是会略去本地已经有的资源,如果前一次获取到了这个资源,那么后面不会再访问了,直到缓存的资源失效了.[意思有点类似去游乐园,有些票能玩所有游戏,而有些票只能玩一个游戏,如果你拿着能玩所有游戏的票,那你就不用麻烦去一次次买票了]). 将

浮动的特性/常用的CSS属性/精灵图技术(background-image)/定位

一.关于上篇博客的回顾 1.浮动: (1).标准文档流 (2).作用:实现元素并排 (3).特点:第一个盒子会贴父盒子的边,第二个会贴第一个盒子的边... (4).特性: ①.脱离标准文档流 ②.收缩效果 ③.字围 ④.设置浮动,任意的标签都可以设置宽高 (5).总结:要浮动一起浮动,有浮动,清除浮动 (6).浮动带来的影响:如果父盒子不设置高度,子盒子浮动了,因为子盒子脱离了标准文档流,那么他们不在页面上占位置,撑不起父盒子的高度 2.清除浮动: (1).给父盒子设置固定高度(后期不好维护)

html基础 隐藏域简单示例

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css基础语法,简单选择器,文本样式2018/4/26

MDN-CSS 介绍 MDN-CSS如何工作 MDN-CSS 语法 MDN-选择器 MDN-简单选择器 MDN-属性选择器 MDN-基本文本和字体样式 color font-family font-style font-weight font-size text-align text-decoration text-indent line-height text-shadow 验证 今天代码部分其实比较简单,主要是多尝试,学习之后,回顾以下自己是否已经掌握以下概念: 什么是CSS,CSS是如何工

css3基础 :nth-last-child(3n) 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

awk基础语法与简单示例

awk介绍 ??awk:Aho, Weinberger, Kernighan,报告生成器,格式化文本输出 ?? 有多种版本:?? ??New awk(nawk),GNU awk( gawk) ????gawk:模式扫描和处理语言 ?? 基本用法: ???? awk [options] 'program' var=value file- ???? awk [options] -f programfile var=value file- ???? awk [options] 'BEGIN{ acti

Python3基础 三元运算符 简单示例

? ???????Python : 3.7.0 ?????????OS : Ubuntu 18.04.1 LTS ????????IDE : PyCharm 2018.2.4 ??????Conda : 4.5.11 ???typesetting : Markdown ? code """ @Author : 行初心 @Date : 18-9-24 @Blog : www.cnblogs.com/xingchuxin @Gitee : gitee.com/zhichengji

css过渡属性transition简单示例

2.transition 简单实例 demo1→在线预览源代码 效果 demo2→在线预览源代码 效果 demo3→在线预览源代码 效果 原文地址:https://www.cnblogs.com/roseAT/p/12090863.html