CSS学习教程之高阶篇

高阶学习

CSS Display(显示)
CSS Position(定位)
CSS Overflow
CSS Float（浮动）
CSS 对齐
CSS 组合选择符
CSS 伪类
CSS 导航栏
CSS 下拉菜单
CSS 提示工具
CSS 图片廊
CSS 图像透明/不透明
CSS 图像拼合技术
CSS 媒体类型

高阶学习

CSS Display(显示)

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
元素显示
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {display:none;}

CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。块元素的例子：

<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。内联元素的例子：

<span>
<a>

如何改变一个元素显示，可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。下面的示例把列表项显示为内联元素：

li {display:inline;}

下面的示例把span元素作为块元素：

span {display:block;}

注意：
块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；
内联元素(inline)特性：和相邻的内联元素在同一行；宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小。

CSS Position(定位)

position 属性指定了元素的定位类型。position 属性的五个值：

static
relative
fixed
absolute
sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

div.static {position: static;border: 3px solid #73AD21;
}

fixed 定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

p.pos_fixed
{position:fixed;top:30px;right:5px;
}

Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。
relative 定位
相对定位元素的定位是相对其正常位置。

h2.pos_left
{position:relative;left:-20px;
}
h2.pos_right
{position:relative;left:20px;
}

移动相对定位元素，但它原本所占的空间不会改变。

h2.pos_top
{position:relative;top:-50px;
}

相对定位会按照元素的原始位置对该元素进行移动。样式 “left:-20px” 从元素的原始左侧位置减去 20 像素。样式 “left:20px” 向元素的原始左侧位置增加 20 像素。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2
{position:absolute;left:100px;top:150px;
}

absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

div.sticky {position: -webkit-sticky; /* Safari */position: sticky;top: 0;background-color: green;border: 2px solid #4CAF50;
}

重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序：

img
{position:absolute;left:0px;top:0px;z-index:-1;
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

CSS Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：
值	                  描述
visible	 默认值，内容不会被修剪，会呈现在元素框之外。
hidden	 内容会被修剪，并且其余内容是不可见的。
scroll	 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	 规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。
overflow: visible
默认情况下，overflow 的值为 visible，意思是内容溢出元素框：

div {width: 200px;height: 50px;background-color: #eee;overflow: visible;
}

CSS Float（浮动）

什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：

img
{float:right;
}

彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。在这里，对图片廊使用 float 属性：

.thumbnail 
{float:left;width:110px;height:90px;margin:5px;
}

清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊：

.text_line
{clear:both;
}

CSS中所有浮动属性

CSS 对齐

元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配：

.center {margin: auto;width: 50%;border: 3px solid green;padding: 10px;
}

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

.center {text-align: center;border: 3px solid green;
}

图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

img {display: block;margin: auto;width: 40%;
}

左右对齐 - 使用定位方式
我们可以使用 position: absolute; 属性来对齐元素:

.right {position: absolute;right: 0px;width: 300px;border: 3px solid #73AD21;padding: 10px;
}

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。
左右对齐 - 使用 float 方式
我们也可以使用 float 属性来对齐元素:

.right {float: right;width: 300px;border: 3px solid #73AD21;padding: 10px;
}

当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候可以使用 “clearfix(清除浮动)” 来解决该问题。也可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

.clearfix {overflow: auto;
}

垂直居中对齐 - 使用 padding
CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding:

.center {padding: 70px 0;border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center {padding: 70px 0;border: 3px solid green;text-align: center;
}

垂直居中 - 使用 line-height

.center {line-height: 200px;height: 200px;border: 3px solid green;text-align: center;
}/* 如果文本有多行，添加以下代码: */
.center p {line-height: 1.5;display: inline-block;vertical-align: middle;
}

垂直居中 - 使用 position 和 transform
除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

.center { height: 200px;position: relative;border: 3px solid green; 
}
.center p {margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

CSS 组合选择符

在 CSS3 中包含了四种组合方式:
后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）
后代选择器
后代选择器用于选取某元素的后代元素。以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p
{background-color:yellow;
}

子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p
{background-color:yellow;
}

相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p
{background-color:yellow;
}

后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p
{background-color:yellow;
}

CSS 伪类

CSS伪类是用来添加一些选择器的特殊效果。伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
伪类和CSS类
伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

如果在上面的例子的链接已被访问，它会显示为红色。
匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

p:first-child
{color:blue;
}

匹配所有<p> 元素中的第一个 <i> 元素
在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：

p > i:first-child
{color:blue;
}

匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i
{color:blue;
}

CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则，在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：

q:lang(no) {quotes: "~" "~";}

CSS 导航栏

熟练使用导航栏，对于任何网站都非常重要。

使用CSS可以转换成好看的导航栏而不是枯燥的HTML菜单。
导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的，导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

<ul><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li>
</ul>

主页
新闻
联系
关于

现在，从列表中删除边距和填充：

ul {list-style-type: none;margin: 0;padding: 0;
}

例子解析：
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记，移除浏览器的默认设置将边距和填充设置为0。上面的例子中的代码是垂直和水平导航栏使用的标准代码。
垂直导航栏
上面的代码，我们只需要 <a>元素的样式，建立一个垂直的导航栏：

a
{display:block;width:60px;
}

示例说明：
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。
垂直导航条实例
创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

ul {list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;
}
li a {display: block;color: #000;padding: 8px 16px;text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {background-color: #555;color: white;
}

激活/当前导航条实例
在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

.active {background-color: #4CAF50;color: white;
}

创建链接并添加边框
可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

ul {border: 1px solid #555;
}li {text-align: center;border-bottom: 1px solid #555;
}li:last-child {border-bottom: none;
}

全屏高度的固定导航条
接下来创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

ul {list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;height: 100%; /* 全屏高度 */position: fixed; overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

注意: 该实例可以在移动设备上使用。
水平导航栏
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
内联列表项
建立一个横向导航栏的方法之一是指定元素，下面代码是标准的内联:

li
{display:inline;
}

实例解析：
display:inline; -默认情况下，<li>元素是块元素。在这里，删除换行符之前和之后每个列表项，以显示一行。
浮动列表项
在上面的例子中链接有不同的宽度。对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：

li
{float:left;
}
a
{display:block;width:60px;
}

实例解析：
float:left - 使用浮动块元素的幻灯片彼此相邻
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
水平导航条实例
创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
}li {float: left;
}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}/*鼠标移动到选项上修改背景颜色 */
li a:hover {background-color: #111;
}

激活/当前导航条实例
在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

.active {background-color: #4CAF50;
}

链接右对齐
将导航条最右边的选项设置右对齐 (float:right;)：

<ul><li><a href="#home">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系</a></li><li style="float:right"><a class="active" href="#about">关于</a></li>
</ul>

添加分割线
<li> 通过 border-right 样式来添加分割线:

/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {border-right: 1px solid #bbb;
}li:last-child {border-right: none;
}

固定导航条
可以设置页面的导航条固定在头部或者底部：
固定在头部

ul {position: fixed;top: 0;width: 100%;
}

固定在底部

ul {position: fixed;bottom: 0;width: 100%;
}

灰色水平导航条

ul {border: 1px solid #e7e7e7;background-color: #f3f3f3;
}
li a {color: #666;
}

CSS 下拉菜单

基本下拉菜单
当鼠标移动到指定元素上时，会出现下拉菜单。

<style>
.dropdown {position: relative;display: inline-block;
}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 12px 16px;z-index: 1;
}.dropdown:hover .dropdown-content {display: block;
}
</style><div class="dropdown"><span>Mouse over me</span><div class="dropdown-content"><p>Hello World!</p></div>
</div>

实例解析
HTML 部分：
可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。
使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px，可以随意修改它。
注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
下拉菜单
这个实例类似前面的实例，当在下拉列表中添加了链接，并设置了样式：

<style>
/* 下拉按钮样式 */
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;
}/* 容器 <div> - 需要定位下拉内容 */
.dropdown {position: relative;display: inline-block;
}/* 下拉内容 (默认隐藏) */
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}/* 下拉菜单的链接 */
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;
}/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {display: block;
}/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {background-color: #3e8e41;
}
</style><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#">菜鸟教程 1</a><a href="#">菜鸟教程 2</a><a href="#">菜鸟教程 3</a></div>
</div>

下拉内容对齐方式
如果想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0;

.dropdown-content {right: 0;
}

CSS 提示工具

提示工具在鼠标移动到指定元素后触发，先看以下四个实例：
提示信息
基础提示框(Tooltip)
提示框在鼠标移动到指定元素上显示：
HTML 代码：

<style>
/* Tooltip 容器 */
.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}/* Tooltip 文本 */
.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;padding: 5px 0;border-radius: 6px;/* 定位 */position: absolute;z-index: 1;
}/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {visibility: visible;
}
</style><div class="tooltip">鼠标移动到这<span class="tooltiptext">提示文本</span>
</div>

实例解析
HTML使用容器元素 (like <div>) 并添加 “tooltip” 类。在鼠标移动到 <div> 上时显示提示信息，提示文本放在内联元素上(如 <span>) 并使用class=“tooltiptext”。
CSS tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。
tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示。设置了一些宽度、背景色、字体色等样式。

定位提示工具
以下实例中，提示工具显示在指定元素的右侧(left:105%) 。注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。如果修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。在提示框显示在左边的情况也是这个原理。
显示在右侧：

.tooltip .tooltiptext {top: -5px;left: 105%; 
}

显示在左侧：

.tooltip .tooltiptext {top: -5px;right: 105%; 
}

如果你想要提示工具显示在头部和底部。我们需要使用 margin-left 属性，并设置为 -60px。这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60)。
显示在头部：

.tooltip .tooltiptext {width: 120px;bottom: 100%;left: 50%; margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

显示在底部：

.tooltip .tooltiptext {width: 120px;top: 100%;left: 50%; margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

添加箭头
可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。以下实例演示了如何为显示在顶部的提示工具添加底部箭头：
顶部提示框/底部箭头：

.tooltip .tooltiptext::after {content: " ";position: absolute;top: 100%; /* 提示工具底部 */left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: black transparent transparent transparent;
}

实例解析
在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。
注意：border-width 属性指定了箭头的大小。如果修改它，也要修改 margin-left 值。这样箭头在能居中显示。
border-color 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色：
底部提示框/顶部箭头：

.tooltip .tooltiptext::after {content: " ";position: absolute;bottom: 100%;  /* 提示工具头部 */left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent black transparent;
}

以下两个实例是左右两边的箭头实例：
右侧提示框/左侧箭头：

.tooltip .tooltiptext::after {content: " ";position: absolute;top: 50%;right: 100%; /* 提示工具左侧 */margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent black transparent transparent;
}

左侧提示框/右侧箭头：

.tooltip .tooltiptext::after {content: " ";position: absolute;top: 50%;left: 100%; /* 提示工具右侧 */margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent transparent black;
}

淡入效果
可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:
左侧提示框/右侧箭头：

.tooltip .tooltiptext {opacity: 0;transition: opacity 1s;
}.tooltip:hover .tooltiptext {opacity: 1;
}

CSS 图片廊

图片廊

以下是使用 CSS 创建图片廊：

<div class="responsive"><div class="img"><a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg"><img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg"><img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg"><img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg"><img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div>
</div>

响应式图片廊
使用 CSS3 的媒体查询来创建响应式图片廊：

<div class="responsive"><div class="img"><a target="_blank" href="img_fjords.jpg"><img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="img_forest.jpg"><img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="img_lights.jpg"><img src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="responsive"><div class="img"><a target="_blank" href="img_mountains.jpg"><img src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400"></a><div class="desc">这里添加图片文本描述</div></div>
</div><div class="clearfix"></div><div style="padding:6px;"><h4>重置浏览器大小查看效果</h4>
</div>

CSS 图像透明/不透明

使用CSS很容易创建透明的图像。首先，如何用CSS创建一个透明图像。

img
{opacity:0.4;filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0值越小，使得元素更加透明。
IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。
图像的透明度 - 悬停效果
将鼠标移到图像上：
CSS样式：

img
{opacity:0.4;filter:alpha(opacity=40); /*  IE8 及其更早版本 */
}
img:hover
{opacity:1.0;filter:alpha(opacity=100); /* IE8 及其更早版本 */
}

第一个CSS块是和最前面的代码类似。此外，还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，希望图片是清晰的。此CSS是：opacity=1，当鼠标指针远离图像时，图像将重新具有透明度。

透明的盒子中的文字
透明盒子中的文字
源代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.background
{width:500px;height:250px;background:url(https://www.runoob.com/images/klematis.jpg) repeat;border:2px solid black;
}
div.transbox
{width:400px;height:180px;margin:30px 50px;background-color:#ffffff;border:1px solid black;opacity:0.6;filter:alpha(opacity=60); /* IE8 及更早版本 */
}
div.transbox p
{margin:30px 40px;font-weight:bold;color:#000000;
}
</style>
</head><body><div class="background">
<div class="transbox">
<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div></body>
</html>

首先，创建一个固定的高度和宽度的div元素，带有一个背景图片和边框。然后在第一个div内部创建一个较小的div元素。这个div也有一个固定的宽度，背景颜色，边框 - 而且它是透明的。透明的div里面，在P元素内部添加一些文本。

CSS 图像拼合技术

图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量，并节省带宽。
图像拼合 - 简单实例
与其使用三个独立的图像，不如使用这种单个图像（“img_navsprites.gif”）：
有了CSS，可以只显示我们需要的图像的一部分。在下面的例子CSS指定显示 “img_navsprites.gif” 的图像的一部分：

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

实例解析：
<img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像。
宽度：46px;高度：44px; - 定义使用的那部分图像。
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）。
这是使用图像拼合最简单的方法，现在使用链接和悬停效果。

图像拼合 - 创建一个导航列表
想使用拼合图像 (“img_navsprites.gif”)，以创建一个导航列表。将使用一个HTML列表，因为它可以链接，同时还支持背景图像：

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

实例解析：
#navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位
#navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px
现在开始每个具体部分的定位和样式：
#home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
#prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
#prev{background:url(‘img_navsprites.gif’) -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）
#next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
#next{background:url(‘img_navsprites.gif’) no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）
图像拼合s - 悬停效果
现在，希望导航列表中添加一个悬停效果。
:hover 选择器用于鼠标悬停在元素上的显示的效果
提示： :hover 选择器可以运用于所有元素。
新图像 (“img_navsprites_hover.gif”) 包含三个导航图像和三幅图像：

因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载。
添加悬停效果只添加三行代码：

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

实例解析：
由于该列表项包含一个链接，我们可以使用：hover伪类
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px

CSS 媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
媒体类型
一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。

@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。

在下面的例子告诉浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：

@media screen
{p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{p.test {font-weight:bold;}
}

其他媒体类型
媒体类型	            描述
all	          用于所有的媒体设备
aural	      用于语音和音频合成器
braille	      用于盲人用点字法触觉回馈设备
embossed	  用于分页的盲人用点字法打印机
handheld	  用于小的手持的设备
print	         用于打印机
projection	  用于方案展示，比如幻灯片
screen	      用于电脑显示器
tty	   用于使用固定密度字母栅格的媒体，比如电传打字机和终端
tv	          用于电视机类型的设备

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

小红书能往天猫引流吗？精准大揭秘
小红书能往天猫引流吗？精准大揭秘 2020开年就是Hard模式！众多品牌都从新开始聚焦“社媒营销+淘内成交+私域流量”的三位一体营销方式，这能否为品牌打开新的营销之门呢？我们拭目以待！挣脱平台：品牌纷纷自建私域独立王国当下疫情还未结束，线下门店更是一片萧条，但线上生…...
2024/5/4 9:35:51
CoRRN: Cooperative Reflection Removal Network
论文： CoRRN: Cooperative Reflection Removal Network 代码：https://github.com/wanrenjie/CoRRN 作者：Renjie Wan 年份：2019 期刊：IEEE TRANSACATIONS ON PATTERN ANALYSIS AND MACHINE INTELLIGENCE 文章目录摘要1 介绍2 相关工作2.1基于深度学习的图像到图像翻译2.2 反…...
2024/5/8 16:57:15
美团数据仓库-数据脱敏
背景与目标在数据仓库建设过程中，数据安全扮演着重要角色，因为隐私或敏感数据的泄露，会对数据主体（客户，员工和公司）的财产、名誉、人身安全、以及合法利益造成严重损害。因此我们需要严格控制对仓库中的数据访问，即什么样的人员或者需求才可以访问到相关的数据。这就要…...
2024/5/4 15:14:49
“睡服”面试官系列第十篇之module的语法（建议收藏学习）
目录1.概述2. 严格模式3. export 命令4. import 命令5. 模块的整体加载6. export default 命令7. export 与 import 的复合写法8. 模块的继承9. 跨模块常量10. import()10.1简介11适用场合11.1按需加载11.2条件加载11.3动态的模块路径11.4注意点总结“睡服“面试官系列之各系列…...
2024/4/27 15:47:57
模拟点击 collections
1.Android中模拟点击类软件实现原理探究 2.常用adb shell命令：getevent和sendeven 3.Android按键精灵触摸精灵触动精灵等软件模拟屏幕点击的基本原理 4.Android中模拟点击软件的实现原理探究 5.VirtualApp 源码分析 6.开源一个Android小工具injectkey_android,手游,手机_区块…...
2024/4/28 8:24:36
努力学习
努力学习...
2024/4/23 2:07:15
安装包无效
xiaoerbuyu1233 2020-06-02 16:53:29 40 收藏分类专栏：安卓相关编辑版权 adb: failed to install I:\Android\zhangbei\app\release\app-release.apk:Failure [INSTALL_PARSE_FAILED_UNEXPECTED_EXCEPTION: Failed to collect certificates from /data/app/vmdl54642872…...
2024/4/23 21:12:20
mysql的存储过程
1、从MYSQL已有存储过程导出来的DDL，是不包含DELIMITER的，所以一直在报错2、涉及到两个游标的嵌套，并且是关联的DELIMITER // CREATE DEFINER=`root`@`%` PROCEDURE `bugtrace`.`process_time_stat`() BEGINDECLARE v_finished INTEGER DEFAULT 0;DECLARE v_answern INTEGER…...
2024/5/2 4:29:48
IDEA控制台出现中文乱码解决方案
解决IDEA控制台输出乱码问题：第一步：修改idea配置文件找到两个.vmoptions的配置文件，并在其中最后一行加入 -Dfile.encoding=UTF-8 第二步：修改项目的字符集File — settings – Editor — File Encodings 三处都改为utf-8 第三步：在部署Tomcat的VM options 中添加 -Dfil…...
2024/5/2 8:23:53
【Leetcode题解】Leetcode 8：字符串转换整数 (atoi) [中等]
LeetCode 目录 LeetCode 4:寻找两个有序数组的中位数 [困难][二分] LeetCode 54：螺旋矩阵Ⅰ LeetCode 59：螺旋矩阵 Ⅱ LeetCode 111: 二叉树的最小深度[递归/非递归求解/队列] LeetCode 149:一条直线上最多的点数 LeetCode 365:水壶问题 [中等] [DFS][数学] LeetCode 350: …...
2024/4/28 20:32:40
样式规则，盒子模型，消除浮动的方法
清除浮动的方式 1. 浮动元素的父元素：：after{ content: ‘’; clear: both; display: block; } 2.浮动元素的父元素：：after{ overflow：hidden； } 3.浮动元素的兄弟元素{ content: ‘’; clear: both; } 3.样式规则 1.字体样式 font- color字体颜色 font-style 字体样式 f…...
2024/4/28 7:44:23
图书馆管理系统
需要的滴滴...
2024/4/28 9:52:30
Java中浮点数据类型分类及使用
整型类型是用来表示浮点数的类型，比如3.14，5.0，100.123。按存储大小可分为：float、double（默认类型）当程序中出现了常量3.0时，系统会按double(默认类型）处理，在内存中分配8个字节用来存放3.0。使用注意：给对float类型变量赋值小数时，不加f否则会报错...
2024/4/30 10:54:47
学籍管理系统
需要的滴滴...
2024/4/28 2:05:46
Matplotlib系列_绘图注意事项
文章目录1. 图像在Retina屏幕中显示模糊2. 图像美感问题3. 中文显示乱码4. 全部载入上述设置时，注意载入顺序5. Jupyter notebook图像输出的三种方式一、内联模式：网页直接显示图像二、GUI模式：弹出GUI软件界面显示图像三、内联GUI显示：在网页内显示GUI版图像，结合前两种的…...
2024/4/28 15:38:09
来，重新认识一个强大的 Gson！
_作者：Mafly cnblogs.com/mafly/p/gson.html从一个 Bug 说起不知道你们发现没有，你写完的程序无论当时怎么测试，过一段时间总会出 Bug 。再说一个每天都在发生的例子：在你写完一篇博客后，立即检查的话，总是查不出自己写的错别字。据说这些都包含有一些大脑对当下事物处…...
2024/4/27 22:06:39
线性结构和非线性结构的理解
数据结构包括：线性结构和非线性结构一、线性结构线性结构作为最常用的数据结构，其特点是数据元素之间存在一对一的线性关系线性结构有两种不同的存储结构，即顺序存储结构(数组)和链式存储结构(链表)。顺序存储的线性表称为顺序表，顺序表中的存储元素是连续的链式存储的线…...
2024/4/29 14:49:44
LUA教程队列和双向队列-44
虽然可以使用Lua的table库提供的insert和remove操作来实现队列，但这种方式实现的队列针对大数据量时效率太低，有效的方式是使用两个索引下标，一个表示第一个元素，另一个表示最后一个元素。function ListNew ()return {first = 0, last = -1} end为了避免污染全局命名空间，…...
2024/4/27 21:35:12
NKN商业版｜适用于NKN生态系统的多功能挖矿软件
“ NKN商业版是一款专门服务于NKN生态系统的一体化挖矿兼商业服务软件。它拥有可自动运行可用服务(如NKN节点3，TUNA 2)，并为您的所有收益地址赚取NKN奖励的功能。”NKN商业版可实现所有服务自动运行并升级的状态。在大多数Linux发行版中，NKN商业版均可作为systemd服务安装，…...
2024/5/4 12:43:08
SqlServer中除了sql和bak你还可以使用mdf文件来进行数据库的添加和分离
场景从数据库A中将数据或者结构同步或者传输到B数据库。可以将A中的表选择转储为sql文件或者可以直接使用备份将数据库进行备份注：博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现除了以上两种方式外…...
2024/4/29 18:46:26

CSS学习教程之高阶篇

CSS学习教程之高阶篇

高阶学习

CSS Display(显示)

CSS Position(定位)

CSS Overflow

CSS Float（浮动）

CSS 对齐

CSS 组合选择符

CSS 伪类

CSS 导航栏

CSS 下拉菜单

CSS 提示工具

CSS 图片廊

CSS 图像透明/不透明

CSS 图像拼合技术

CSS 媒体类型

相关文章

最新文章