大家好，这里是「 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 ...

随机推荐

飞鱼星、H3C企业路由器配置
飞鱼星企业路由器配置外网访问IIS 只配置端口映射就行,配置好了,如果不立即重启,需要等几分钟才能生效 H3C路由器配置虚拟服务器即可
UI动画优化技巧
知乎上一篇比较好的文章,分享一下: tabs slide 内容过渡动画好的动画会淡化页面直接的过度. 但更好的做法是使用连续的动画来来过度内容当我们在设计交互式选项卡或弹出式菜单的时候,尝试将内容 ...
PHP多进程实例
PHP创建多进程需要使用到pcntl模块在编译时加上--enable-pcntl打开进程控制支持,不是Unix类系统不支持此模块 php官网介绍http://php.net/manual/zh/bo ...
mysql sql_mode=only_full_group_by错误解析
实测,解决问题; 1.错误提示: 2.检查参数设置: 3.mysql的配置文件my.cnf里面可以修改, 但是,改完以后,你检查所有的参数设置都是对的,就是运行不了.怎么办?怎么办? 4.如果还是不行 ...
20165213周启航java学习总结
20165213周启航java学习总结一.每周博客链接及二维码预备作业一:我所期望的师生关系:http://www.cnblogs.com/rocedu/p/6255835.html#WEEK15 ...
IJ配置项目的TOMCAT
参考文档: IJ里配置TOMCAT http://jingyan.baidu.com/album/0a52e3f43d9f69bf62ed72f9.html?picindex=11 源发行版1.8 需 ...
网站日志流量分析采集（LuaJIT系统环境部署-node03，相关jar包自己手动上传）
注:/usr/local/src 是源码包路径,可以自己更改服务器中安装依赖 yum -y install gcc perl pcre-devel openssl openssl-devel 上传 ...
1.MFC架构分析
1.架构代码文件的结构主要由四个部分组成 1.资源文件Resource.h:主要定义资源的ID 2.预编译文件:stdafx.h 可以用来解决头文件包含冲突的问题,定义一些需要全局性包含的文件. 3 ...
hdmi中深度色彩像素打包
4个色彩像素包模式:24- 30- 36- 48- 不同模式下tmds时钟与与像素的比是位宽与24的比值 . 24 bit mode: TMDS clock = 1.0 x pixel clock ( ...
循环队列 & 栈的共用空间
循环队列非常好的数据结构,充分利用率空间,可以用于网络端存储socket消息! /*************************************** 作者: 未闻花语版本: v1.0 ...

从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门