滑动门：

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

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. 专业网络损伤仪HoloWAN meme只需5999元！

    在人们对互联网的依赖度越来越高的今天,人类社会逐步买入元宇宙时代,为了大大提高整个互联网的用户体验,HoloWAN团队推出每一个互联网应用开发团队都能用得起的专业网络损伤仪HoloWAN meme!售 ...

  2. g++ 常用命令

    g++ --help

  3. 【转载-Andrew_qian】stm32中断学习

    [转载]stm32中断学习 中断对于开发嵌入式系统来讲的地位绝对是毋庸置疑的,在C51单片机时代,一共只有5个中断,其中2个外部中断,2个定时/计数器中断和一个串口中断,但是在STM32中,中断数量大 ...

  4. 分布式事物SAGA

    目录 概述SAGA SAGA的执行方式 存在的问题 重试机制 SAGA VS TCC 实现SAGA的框架 概述SAGA SAGA是1987 Hector & Kenneth 发表的论文,主要是 ...

  5. [no code][scrum meeting] Alpha 13

    项目 内容 会议时间 2020-04-21 会议主题 OCR技术对接会议 会议时长 45min 参会人员 全体成员 $( "#cnblogs_post_body" ).catalo ...

  6. SpringBoot整合Prometheus

    SpringBoot整合Prometheus 一.需求 二.实现步骤 1.引入jar包 2.application.prometheus文件配置 3.查看指标数据 4.接入到 prometheus 中 ...

  7. Noip模拟71 2021.10.7

    T1 签到题 结论题,找到规律就会做 规律是每个点的度数$\mod$颜色种数,如果不是$0$则贡献一个答案 1 #include<bits/stdc++.h> 2 #define int ...

  8. Spring Security：如何在Postman中优雅地测试后端API（前后端分离）

    前言 在Postman中可以编写和执行自动化测试,使用 JavaScript 编写基本的 API 测试,自由编写任何用于自动化测试的测试方案. 在POSTMAN中读取Cookie值 1. 我们需要向& ...

  9. nginx 支持https访问

    1,先确认nginx安装时已编译http_ssl模块. 就是执行nginx -V命令查看是否存在--with-http_ssl_module.如果没有,则需要重新编译nginx将该模块加入.yum安装 ...

  10. 干货分享之spring框架源码分析02-(对象创建or生命周期)

    记录并分享一下本人学习spring源码的过程,有什么问题或者补充会持续更新.欢迎大家指正! 环境: spring5.X + idea 之前分析了Spring读取xml文件的所有信息封装成beanDef ...