html+css第八篇滑动门和可爱的css精灵
滑动门:
滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。
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精灵的更多相关文章
- HTML+CSS技术实现网页滑动门效果
一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...
- CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
- [CSS]三层嵌套的滑动门
原理: 最外层放水平平铺的背景,第二层放左边,第三层放右边,注意这个做法背景图不能透明 结构: <div class="module-title"> <span ...
- css超出不换行可滑动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- CSS基础(滑动门,雪碧图,网页布局)
3.11.2017 这一篇主要是关于滑动门技术的学习,还有雪碧图(sprite),也就是精灵图,还有一点昨天的css可见性的回顾,下面先来回顾下吧 CSS可见性(元素可见性) overflow: hi ...
- 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动 特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素 作 ...
- 认识CSS中精灵技术(sprite)和滑动门
前端之HTML,CSS(十) 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上.拼接成的大图被称为精灵图.浏览器打开网页时,每一个图片 ...
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
随机推荐
- PublishFolderCleaner 让你的 dotnet 应用发布文件夹更加整洁
大家都知道,在 dotnet 发布时,将会在输出的 publish 文件夹包含所需的依赖.在 .NET Core 开始,引入了 AppHost 的概念,即使是单个程序集,也需要独立的 Exe 可执行文 ...
- Java中的函数式编程(二)函数式接口Functional Interface
写在前面 前面说过,判断一门语言是否支持函数式编程,一个重要的判断标准就是:它是否将函数看做是"第一等公民(first-class citizens)".函数是"第一等公 ...
- airtext初始化(一)
- RogrePirates Scrum Meeting 博客汇总
RogrePirates 博客目录 一.Scrum Meeting 1.Alpha阶段 第一次会议 第二次会议 第三次会议 第四次会议 第五次会议 第六次会议 第七次会议 第八次会议 第九次会议 第十 ...
- Unity 制作不规则形状button
在游戏开发中,我们有时需要制作不规则形状的按键. Unity3d中使用UGUI的Button控件只能实现规则的长方形按钮.而通过给Button的Image组件添加对应的贴图(sprite)我们可以实现 ...
- Noip模拟7 2021.6.11
前言 考试时候der展了,T1kmp没特判(看来以后还是能hash就hash),T2搜索细节没注意,ans没清零,130飞到14.... T1 匹配(hash/kmp) 这太水了,其实用个hash随便 ...
- luogu P4243 [JSOI2009]等差数列 题解
前言: 这题真ex... 强烈谴责在题解里面放毒瘤题链接的屑出题人! 吐 ️ 解析: 这题分成两步走. 首先,既然题目中的修改操作是区间加等差数列,那么就容易想到在差分数组上进行操作. 然后就是相当恶 ...
- JAVA笔记6__抽象类/接口/多态/instanceof关键字、父类设计法则
/** * 抽象类:很多具有相同特征和行为的类可以抽象为一个抽象类 * 1.抽象类可以没有抽象方法,有抽象方法的类必须是抽象类 * 2.非抽象类继承抽象类必须实现抽象方法[可以是空实现] * 3.抽象 ...
- hdu 5055 Bob and math problem (很简单贪心)
给N个数字(0-9),让你组成一个数. 要求:1.这个数是奇数 2.这个数没有前导0 问这个数最大是多少. 思路&解法: N个数字从大到小排序,将最小的奇数与最后一位交换,把剩下前N-1位从大 ...
- Linux初学者:从不同角度理解Linux系统
在我初学Linux系统时,虽然已经掌握了一些命令,但总觉得还是很混乱.大家新买的笔记本如果是Windows系统,那么第一件事往往就是分区,目的就是将系统和软件分开.然而Linux却没有类似于Windo ...