从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门
大家好，这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、CSS可见性
overflow: hidden; /*溢出隐藏 */
visibility: hidden; /* 隐藏元素 隐藏之后还保留原来的位置。*/
display: none; /* 隐藏元素 隐藏之后不保留原来的位置。*/
display: block; /* 元素可见 */
display:none和display:block常配合js使用（如：鼠标经过时出现，鼠标离开时消失）。
二、css之内容移除（logo优化）
1、方法一
text-indent: -5000em;
text-indent 属性规定文本块中首行文本的缩进。注意： 负值是允许的。如果值是负数，将向左缩进。
之所以要写着两个字是为了 SEO，因为背景图片 SEO 看不懂.
2、方法二
将元素高度设置为0, 使用内边距将盒子撑开，给盒子使用overflow:hidden; 将文字隐藏。
.box{
width:300px;
height:0;
padding-top:100px;
overflow:hidden;
background:red;
}
三、CSS精灵图
上图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。
简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为淘宝网站中的一个精灵图。
工作原理：
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.box{
height: 48px;
background: #222;
margin-top: 50px;
}
.con{
width: 1182px;
height: 48px;
margin: 0 auto;
position: relative;
}
.con ul li{
float: left;
}
.con ul li a{
text-decoration: none;
color: #fff;
display: inline-block;
height: 48px;
font: 16px/48px microsoft yahei;
padding: 0 18px;
}
.con ul li a:hover{
background: #2774A2;
}
.con .hot{
position: absolute;
width: 31px;
height: 21px;
background: url("spirit.png") -58px 0;
left:221px;
bottom:35px;
}
.con .new{
position: absolute;
width: 31px;
height: 21px;
background: url("spirit.png") -135px 0;
left:90px;
bottom:35px;
}
</style>
</head>
<body>
<div class="box">
<div class="con">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">IOS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">UI设计</a></li>
<li><a href="#">前端与移动开发</a></li>
<li><a href="#">问答专区</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#">活动专区</a></li>
</ul>
<div class="hot"></div>
<div class="new"></div>
</div>
</div>
</body>
</html>
PS：之所以选择con作为父盒子而不是box作为父盒子，是因为box的宽度不定，不同的显示器宽度不同，那么new和hot的定位就有问题。
四、属性选择器
input[type="text"][class] {
width: 20px;
height: 20px;
}
选择有type属性为text，并且有class属性的标签。
input[type="text"][class="id"] {
width: 20px;
height: 20px;
}
选择有type属性为text，并且有class属性，并且class属性为 id 的标签。
五、CSS滑动门
特点：边上是这种圆弧型的或者其他形状的，可以变换长度的样式。
PS：浮动之后宽度不是父盒子的宽度，而是内容撑开的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
float: left;
}
ul li a{
display: inline-block;
height: 35px;
background: url("bg_r1_c1.png") no-repeat;
padding-left: 7px;
}
ul li a span{
display: inline-block;
height: 35px;
background: url("bg_r1_c2.png") right;
padding-right: 25px;
color: #fff;
line-height: 35px;
}
ul li a:hover{
background: url("bbg_r1_c1.png");
}
ul li a:hover span{
background: url("bbg_r1_c2.png") right;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>网易云音乐</span></a></li>
<li><a href="#"><span>微信</span></a></li>
<li><a href="#"><span>蚂蚁花呗</span></a></li>
</ul>
</body>
</html>
微信案例：
现象：鼠标经过时，背景凸起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li,a,span{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.nav{
height: 74px;
background: url("weixin_bg.jpg");
}
.nav-con{
width: 600px;
margin: 0 auto;
}
li{
float: left;
height: 74px;
line-height: 74px;
margin-right: 60px;
}
li a{
display: inline-block;
text-decoration: none;
color: #fff;
height: 33px;
line-height: 33px;
background: url("bg.png") no-repeat 0 -144px;
padding-left: 13px;
}
a span{
display: inline-block;
height: 33px;
background: url("bg.png") no-repeat right -144px;
padding-right: 13px;
}
a:hover{
background: url("bg.png") no-repeat 0 -192px;
}
a:hover span{
background: url("bg.png") no-repeat right -192px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-con">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>下载文章</span></a></li>
<li><a href="#"><span>微信公众公众公众助手</span></a></li>
</ul>
</div>
</div>
</body>
</html>
从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门的更多相关文章
- 从零开始学 Web 之 CSS（四）CSS初始化、定位、overflow、标签规范
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 CSS（一）选择器
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 CSS（二）文本、标签、特性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 DOM（五）元素的创建
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 移动Web（五）touch事件的缺陷，移动端常用插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Vue.js（五）Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- stark组件开发之关键搜索
- 模糊搜索: 在页面生成一个表单. 以get 方式, 将数据提交到.当前查看页面. 后台接收数据,然后进行筛选过滤. 着个也需要,用户自定制! 定义一个 search_list 这个值,默 ...
- PYthon第十二天
1. 生成器 生成器的本质是迭代器, 最简单的生成器函数如下: def foo(x): 1-4行定义了一个简单的生成器函数 yield x+1 yield 和 return 不同, return 结束 ...
- list(zip(*querySet))使用
teacher_cls_list = obj.cls.all().values_list('id', 'caption') #list(zip(*list)),将数组中的元组中的每一项取出,添加到一起 ...
- 主机性能监控之wmi 获取系统信息及内存性能信息
标 题: 主机性能监控之wmi 获取系统信息及内存性能信息作 者: itdef链 接: http://www.cnblogs.com/itdef/p/3990240.html 欢迎转帖 请保持文本完整 ...
- ABP 异常处理 第四篇
1.ABP异常处理机制是通过过滤器实现的,我们查看的webAPI的异常处理,我们来看看他的源码,AbpApiExceptionFilterAttribute 继承ExceptionFilterAttr ...
- Java-static关键字解析
static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键字的用法和平常容易误解的地方,最后列 ...
- 【轻松前端之旅】CSS选择器中的空格与尖括号有何区别？
CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...
- s5 Docker的持久化存储和数据共享
数据库容器的数据如何才能不会丢失?Docker的持久化存储技术.Docker的数据共享技术能极大提高开发人员的开发效率,边写代码,边看运行结果. 数据持久化之Data Volume Docker持久化 ...
- Codeforces Round #486 (Div. 3) F. Rain and Umbrellas
Codeforces Round #486 (Div. 3) F. Rain and Umbrellas 题目连接: http://codeforces.com/group/T0ITBvoeEx/co ...
- 简单好用的时间选择插件My97datepicker
我们经常会需要验证字符串的格式,比如密码长度范围.电子邮件格式.固定电话号码和手机号码格式等,这个时候我们经常会需要用到正则表达式.但是正则表达式用起来性能会低一点,所以在需要验证的时候能不使用正则表 ...