滑动门：

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

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. 舌头算法的C++实现

    观察生活,我们不难发现,吃饭的时候,有时候左边的东西会到右边来,这是为什么呢?就是舌头的作用了. 下面的代码将模拟舌头的运动: #include <iostream> #include & ...

  2. PublishFolderCleaner 让你的 dotnet 应用发布文件夹更加整洁

    大家都知道,在 dotnet 发布时,将会在输出的 publish 文件夹包含所需的依赖.在 .NET Core 开始,引入了 AppHost 的概念,即使是单个程序集,也需要独立的 Exe 可执行文 ...

  3. Java（31）泛型和可变参数

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228443.html 博客主页:https://www.cnblogs.com/testero ...

  4. NX9.0和NX10.0做自定义操作可以用的函数

    NX9.0:LIBUFUNX.DLL int UF_OPER_ask_check_geom(void *,int *,unsigned int * *) int UF_OPER_ask_first_o ...

  5. nexus设置npm下载管理

    nexus设置npm下载管理 第一步 登录私服网页 第二步 创建存储空间(如果使用默认的存储空间,此步骤可省略) 第三步 输入空间的名称,点击create创建 第四步 创建仓库 npm的仓库有三种: ...

  6. 必备的60个常用的Linux命令

    Linux必学的60个命令Linux提供了大量的命令,利用它可以有效地完成大量的工 作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令. ...

  7. 攻防世界 杂项 6.pure_color

    图片隐写 工具 使用StegSolve一把梭 另一种解法 右击图片编辑,画图工具打开,属性设置黑白.

  8. 【做题记录】CF1428E Carrots for Rabbits—堆的妙用

    CF1428E Carrots for Rabbits 题意: 有 \(n\) 个萝卜,每个萝卜的初始大小为 \(a_i\) .现在要把这些萝卜切为为 \(k\) 个.吃每一个萝卜的时间为这个萝卜的大 ...

  9. 极速上手 VUE 3—v-model 的使用变化

    本篇文章主要介绍 v-model 在 Vue2 和 Vue3 中使用变化. 一.Vue2 中 v-model 的使用 v-model 是语法糖,本质还是父子组件间的通信.父子组件通信时有两种方式: 父 ...

  10. 数字孪生 3D 科技馆的科学传播新模式

    前言 科技馆是一种参与型体验型的博物馆,以传播科学知识.培养公众的科学创新技术为宗旨,并以其生动的展现方式得到公众的广泛欢迎.一直以来,我国科技馆的发展受到各种因素的制约和影响,发展缓慢.如今在我国经 ...