滑动门：

    滑动门并不是一项全新的技术，它是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。

CSS精灵

CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。

CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得十分成熟。大部分公司要求前端工程师必须使用CSS 精灵，处理图片；

CSS精灵 优点：

利用CSS 精灵能很好地减少了网页的http请求次数，从而大大的提高了页面的性能，这也是CSS 精灵最大的优点；减少图片大小

CSS精灵 缺点：

降低开发效率；

维护难度加大；

day01- 三层嵌套

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.btn{width:100px; background:url(img/btn.png) repeat-x;}

.btnL{background:url(img/btnL.png) no-repeat;}

.btnR{height:31px; background:url(img/btnR.png) no-repeat right 0;}

<!--  background:url(img/btn.png) 打开图片

repeat    默认。背景图像将在垂直方向和水平方向重复。

repeat-x    背景图像将在水平方向重复。

repeat-y    背景图像将在垂直方向重复。

no-repeat    背景图像将仅显示一次。

inherit    规定应该从父元素继承 background-repeat 属性的设置

-->

</style>

</head>

<body>

<div class="btn">

    <div class="btnL">

        <div class="btnR">写bug小能手</div>

    </div>

</div>

</body>

</html>

图片：

day02-两层嵌套

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.btn{width:200px;background:url(img/btn2.png) no-repeat;}

.btnR{height:31px; background:url(img/btnR.png) no-repeat right 0;}

/*

    扩展要求高，图片比较大的 用三层嵌套

    扩展要求不高，图片比较小的 用两层嵌套

*/

</style>

</head>

<body>

<div class="btn">

    <div class="btnR">写bug小能手</div>

</div>

</body>

</html>

图片：

day03-滑动导航门

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body,ul{margin:0;padding:0;}

li{ list-style:none;}

a{ text-decoration:none;}

body{background:#23232f;padding:50px;}

.nav{ background:#0f0f14 url(img/navL.png) no-repeat;float:left;}

.navR{background:url(img/navR.png) no-repeat right 0;float:left;padding:4px 4px 0 3px;}

.nav li{float:left;padding-left:1px;}

.nav a{float:left;background:url(img/btn2.png) no-repeat;}

.nav span{float:left;background:url(img/btnR.png) no-repeat right 0;height:31px; font-size:14px; line-height:30px;color:#fff;padding:0 18px;}

.nav a:hover,.nav .active{ background-image:url(img/hoverA.png);}

.nav a:hover span,.nav .active span{ background-image:url(img/hoverR.png);}

/*

    元素的宽度由内容撑开

    display:inline;

    display:inline-block;

    float

    position:absolute

    position:fixed

*/

</style>

</head>

<body>

<div class="nav">

    <ul class="navR">

        <li>

            <a href="3_滑动门导航.html" class="active">

                <span>MiaoV</span>

            </a>

        </li>

        <li>

            <a href="3_滑动门导航 - 副本.html">

                <span>课程</span>

            </a>

        </li>

        <li>

            <a href="3_滑动门导航 - 副本 (2).html">

                <span>关于我们</span>

            </a>

        </li>

        <li>

            <a href="3_滑动门导航 - 副本 (3).html">

                <span>加入MiaoV</span>

            </a>

        </li>

    </ul>

</div>

</body>

</html>

图片：

day04-圆角

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{width:200px;height:200px;border:1px solid #e5e5e5;margin:30px auto; border-radius:40px;}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

图片：

day05-css精灵

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

div{width:80px;height:80px;background:url(bigptr.jpg) no-repeat;border:10px solid #000;float:left;margin:10px; display:inline;}

.box1{ background-position:-151px -66px;}

.box2{ background-position:-241px -118px;}

.box3{ background-position:right bottom;}

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

</html>

图片：

html+css第八篇滑动门和可爱的css精灵的更多相关文章

  1. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  2. CSS 小结笔记之滑动门技术

    所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...

  3. [CSS]三层嵌套的滑动门

    原理: 最外层放水平平铺的背景,第二层放左边,第三层放右边,注意这个做法背景图不能透明 结构: <div class="module-title"> <span ...

  4. css超出不换行可滑动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  5. CSS基础(滑动门，雪碧图，网页布局）

    3.11.2017 这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧 CSS可见性(元素可见性) overflow: hi ...

  6. 从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  7. 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

    1  复习昨天知识 1.1 浮动  特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素   作 ...

  8. 认识CSS中精灵技术（sprite）和滑动门

    前端之HTML,CSS(十) 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上.拼接成的大图被称为精灵图.浏览器打开网页时,每一个图片 ...

  9. 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

随机推荐

  1. dp凸优化/wqs二分学习笔记（洛谷4383 [八省联考2018]林克卡特树lct）

    qwq 安利一个凸优化讲的比较好的博客 https://www.cnblogs.com/Gloid/p/9433783.html 但是他的暴力部分略微有点问题 qwq 我还是详细的讲一下这个题+这个知 ...

  2. HTML中的emment

    emment的优点和使用方法: 优点:Emment是前端开发者必备的工具,使用它可以大大提高前端开发效率. 使用方法:Emment的使用方法非常简单,直接在编辑器上输入HTML和CSS代码的缩写,然后 ...

  3. 为什么阿里巴巴开发手册中强制要求 POJO 类使用包装类型？NPE问题防范

    封面:学校内的秋天 背景:写这个的原因,也是我这两天凑巧看到的,虽然我一直有 alibaba Java 开发手册,也看过不少次,但是一直没有注意过这个问题 属于那种看过,但又没完全看过 一起来看看吧冲 ...

  4. [ NOIP2013 D2-T3 ] 华容道

    NOIP2013 华容道 图论好题. 介于网上全是些令蒟蒻头昏的题解和排版一塌糊涂以及过于详细的题解...蒟蒻记录一下.. 显然需要将白格移动到 \(s\) 相邻格,然后交换 \(s\) 与白格,再将 ...

  5. 2021.9.12考试总结[NOIP模拟51]

    T1 茅山道术 仔细观察发现对于每个点只考虑它前面第一个与它颜色相同的点即可. 又仔细观察发现对一段区间染色后以这个区间内点为端点的区间不能染色. 于是对区间右端点而言,区间染色的贡献为遍历到区间左端 ...

  6. [BZOJ4399]魔法少女LJJ----------线段树进阶

    感谢线段树进阶,给了我重新做人的机会.---------------某不知名OIer,Keen_z Description 题目描述 在森林中见过会动的树,在沙漠中见过会动的仙人掌过后,魔法少女LJJ ...

  7. C语言基础资料，可以看看哦

    C语言程序的结构认识 用一个简单的c程序例子,介绍c语言的基本构成.格式.以及良好的书写风格,使小伙伴对c语言有个初步认识. 例1:计算两个整数之和的c程序: #include main() { in ...

  8. TCP/IP参考模型（应用层、传输层、网际层、网络接口层）、五层参考模型（应用层、传输层、网络层、数据链路层、物理层）、OSI与TCP/IP参考模型比较

    文章转自:https://blog.csdn.net/weixin_43914604/article/details/104597450 学习课程:<2019王道考研计算机网络> 学习目的 ...

  9. Access的分页代码

    if giPage = 1 then begin sSQL := 'SELECT TOP 10 * FROM dw_demo WHERE '+sWhere +' ORDER BY '+sOrder+' ...

  10. hash 哈希表 缓存表

    系统初始hash表为空,当外部命令执行时,默认会从 PATH路径下寻找该命令,找到后会将这条命令的路径记录到 hash表中,当再次使用该命令时,shell解释器首先会查看hash 表,存在将执行之,如 ...