CSS 下拉菜单
使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。
基本下拉菜单
当鼠标移动到指定元素上时，会出现下拉菜单。
.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;
}
<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 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
CSS 提示工具(Tooltip)
基础提示框(Tooltip)
提示框在鼠标移动到指定元素上显示：
<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
) 并添加 "tooltip" 类。在鼠标移动到
提示文本放在内联元素上(如 ) 并使用class="tooltiptext"。
CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。
tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。
CSS3 border-radius 属性用于为提示框添加圆角。
:hover 选择器用于在鼠标移动到到指定元素
CSS 图像透明/不透明
使用CSS很容易创建透明的图像。
注意：CSS Opacity属性是W3C的CSS3建议的一部分。
创建一个透明图像
CSS3中属性的透明度是 opacity。
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 图像拼合技术
图像拼合
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。
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 用于电视机类型的设备。
CSS 属性 选择器
具有特定属性的HTML元素样式
具有特定属性的HTML元素样式不仅仅是class和id。
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
属性选择器
下面的例子是把包含标题（title）的所有元素变为蓝色:
[title]
{ color:blue;}
属性和值选择器
下面的实例改变了标题title='runoob'元素的边框样式:
[title=runoob]
{ border:5px solid green;}
属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
[title~=hello]
{ color:blue; }
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
[lang|=en]
{ color:blue; }
表单样式
属性选择器样式无需使用class或id的形式:
input[type="text"]
{ width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;}
input[type="button"]
{ width:120px;
margin-left:35px;
display:block;}
CSS 计数器
CSS 计数器通过一个变量来设置，根据规则递增变量。
使用计数器自动编号
CSS 计数器根据规则来递增变量。
CSS 计数器使用到以下几个属性：
counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
要使用 CSS 计数器，得先用 counter-reset 创建：
CSS 网页布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域
头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
菜单导航区域
菜单导航条包含了一些链接，可以引导用户浏览其他页面：
内容区域
内容区域一般有三种形式:
1 列：一般用于移动端
2 列：一般用于平板设备
3 列：一般用于 PC 桌面设备
底部区域
底部区域在网页的最下方，一般包含版权信息和联系方式等。
