滑动门：

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

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. 洛谷3176 [HAOI2015]数字串拆分 （矩阵乘法+dp）

    qwq真的是一道好题qwq自己做基本是必不可能做出来的. 首先,如果这个题目只是求一个\(f\)数组的话,那就是一道裸题. 首先,根据样例 根据题目描述,我们能发现其实同样数字的不同排列,也是属于不同 ...

  2. 3D渲染

    3d渲染的本质是在三维坐标系中绘制很三角形,用三角形拼成物体,然后投影到二维图像上,所以做渲染就是画好这些三角形;3d渲染输入的是很多三角形的3个顶点和属性,输出的是一张2d图.画好三角形要研究给三角 ...

  3. PTA实验4-2-3 验证“哥德巴赫猜想” (20分)

    实验4-2-3 验证"哥德巴赫猜想" (20分) 数学领域著名的"哥德巴赫猜想"的大致意思是:任何一个大于2的偶数总能表示为两个素数之和.比如:24=5+19, ...

  4. javascript运算符和表达式

    1.表达式的概念 由运算符连接操作组成的式子,不管式子有多长,最终都是一个值. 2.算术运算符 加+ 减- 乘* 除/ 取模% 负数- 自增++ 自减-- 3.比较运算符 等于==  严格等于=== ...

  5. MAC 安装 apache ab 压力测试工具以及遇到的坑

    ab 是apache对 http服务器进行压力测试的工具,它可以测试出服务器每秒可以处理多少请求.本文记录mac版本安装 ab 的步骤以及遇到的坑. 下载 进入 apache ab官网 下载页面. 安 ...

  6. 【UE4 C++ 基础知识】<7> 容器——TSet

    概述 TSet是一种快速容器类,(通常)用于在排序不重要的情况下存储唯一元素. TSet 类似于 TMap 和 TMultiMap,但有一个重要区别:TSet 是通过对元素求值的可覆盖函数,使用数据值 ...

  7. 6月2日 Scrum Meeting

    日期:2021年6月2日 会议主要内容概述: 取消账单类别自定义 图表属性分析取消函数输入 增加新的主题模板 一.进度情况 组员 负责 两日内已完成的工作 后两日计划完成的工作 工作中遇到的困难 徐宇 ...

  8. logstash的mutate过滤器的使用

    logstash的mutate过滤器的使用 一.背景 二.需求 三.实现步骤 1.安装 `csv codec` 插件 2.准备需要读取的文件数据 3.编写 pipeline ,读取和输出数据 4.mu ...

  9. CODING 助力江苏高速信息实现组织敏捷与研发敏捷，领跑智慧交通新基建

    疫情之下的高速公路管控重任 江苏高速公路信息工程有限公司(以下简称:江苏高速信息)成立于 2002 年,是江苏交通控股旗下,专业从事高速公路领域机电系统集成.智能交通软硬件研发.大数据分析运营的高新技 ...

  10. C++ Qt 项目实战(一)之文本编辑器

    文本编辑器例图 项目开发环境 系统版本:windows10 QT 版本: 5.9.9 开发语言:C++ 已实现功能 文件操作:新建,打开,保存,另存为,打印,退出 编辑操作:复制,粘贴,剪切,查找,替 ...