滑动门：

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

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#开发BIMFACE系列50 Web网页中使用jQuery加载模型与图纸

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在前一篇博客<C#开发BIMFACE系列49 Web网页集成BIMFACE应用的技术方案>中介绍了目前市场主流 ...

  2. 开源协同OA办公平台教程：O2OA服务管理中，接口的调用权限

    ​ 本文介绍O2OA服务管理中,接口的权限设定和调用方式. 适用版本:5.4及以上版本 创建接口 具有服务管理设计权限的用户(具有ServiceManager角色或Manager角色)打开" ...

  3. 分享一份软件测试项目实战（web+app+h5+小程序）

    大家好,我是谭叔. 本次,谭叔再度出马,给大家找了一个非常适合练手的软件测试项目,此项目涵盖web端.app端.h5端.小程序端,可以说非常之全面. 缘起 在这之前,谭叔已经推出了九套实战教程. 但是 ...

  4. 微信小程序的实现原理

    一.背景 网页开发,渲染线程和脚本是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应的原因,本质就是我们常说的 JS 是单线程的 而在小程序中,选择了 Hybrid 的渲染方式,将视图层和逻 ...

  5. Noip模拟80 2021.10.18

    预计得分:5 实际得分:140?????????????? T1 邻面合并 我考场上没切掉的大水题....(证明我旁边的cty切掉了,并觉得很水) 然而贪心拿了六十,离谱,成功做到上一篇博客说的有勇气 ...

  6. 五分钟搞懂spring-cloud-square

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 初识spring-cloud-square 2021年 ...

  7. picGo+gitee搭建Obsidian图床，实现高效写作

    1 picGo安装 [picgo下载链接](https://molunerfinn.com/PicGo/) 选择安装目录,可以选择安装在D:\Program Files 然后点击安装即可 2. git ...

  8. 奇偶位交换 牛客网 程序员面试金典 C++ Python

    奇偶位交换 牛客网 程序员面试金典 C++ Python 题目描述 请编写程序交换一个数的二进制的奇数位和偶数位.(使用越少的指令越好) 给定一个int x,请返回交换后的数int. 测试样例: 10 ...

  9. 整数转化 牛客网 程序员面试金典 C++ Python

    整数转化 牛客网 程序员面试金典 C++ Python 题目描述 编写一个函数,确定需要改变几个位,才能将整数A转变成整数B. 给定两个整数int A,int B.请返回需要改变的数位个数. 测试样例 ...

  10. 『动善时』JMeter基础 — 56、JMeter使用命令行模式生成HTML测试报告

    目录 1.自动生成HTML图形化报告 2.使用已有的测试结果文件生成HTML报告 3.HTML图形化报告内容详解 (1)Dashboard页面:(重点查看) (2)Charts页面:(辅助分析) 4. ...