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 桌面設備
底部區域
底部區域在網頁的最下方，一般包含版權信息和聯系方式等。
