导航栏
熟练使用导航栏，对于任何网站都非常重要。
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。
导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：
|
1
2
3
4
5
6
|
<
ul
>
<
li
><
a
href="default.asp">Home</
a
></
li
>
<
li
><
a
href="news.asp">News</
a
></
li
>
<
li
><
a
href="contact.asp">Contact</
a
></
li
>
<
li
><
a
href="about.asp">About</
a
></
li
>
</
ul
>
|
现在，让我们从列表中删除边距和填充：
ul
{
list-style-type:none;
margin:0;
padding:0;
}
水平导航栏
有两种方法创建横向导航栏。使用内联或浮动的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
内嵌列表项
建立一个横向导航栏的方法之一是指定
元素， 上述代码是标准的内嵌:
|
1
2
3
4
|
li
{
display:inline;
}
|
浮动列表项
在上面的例子中链接有不同的宽度。
对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：
li
{
float:left;
}
a
{
display:block;
width:60px;
}
效果截图：
下拉菜单
基本下拉菜单
当鼠标移动到指定元素上时，会出现下拉菜单。
View Code
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
下拉菜单
创建下拉菜单，并允许用户选取列表中的某一项。这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：
View Code
CSS 提示工具(Tooltip)
本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。
View Code
图片廊
View Code
使用媒体查询的图片廊
View Code
图像透明/不透明
图像的透明度 - 悬停效果
|
1
2
3
4
5
6
7
8
9
10
|
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* IE8 及其更早版本 */
}
|
透明的盒子中的文字
View Code
图像拼合技术
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。
图像拼合 - 简单实例
与其使用三个独立的图像，不如我们使用这种单个图像（"img_navsprites.gif"）：
有了CSS，我们可以只显示我们需要的图像的一部分。
在下面的例子CSS指定显示 "img_navsprites.gif" 的图像的一部分：
|
1
2
3
4
5
6
|
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）
图像的拼合悬停效果
View Code
媒体类型
一些CSS属性只设计了某些媒体。例如"voice-family"属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，"font-size"属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。
媒体类型名称不区分大小写。
| 媒体类型 | 描述 |
|---|---|
| all | 用于所有的媒体设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
CSS 属性 选择器
具有特定属性的HTML元素样式不仅仅是class和id。
属性和值选择器
下面的实例改变了标题title='runoob'元素的边框样式:
|
1
2
3
4
|
[title=runoob]
{
border:5px solid green;
}
|
属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
|
1
|
[title~=hello] { color:blue; }
|
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
表单样式
属性选择器样式无需使用class或id的形式:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
|
