CSS 下拉菜單
使用 CSS 創(chuàng)建一個鼠標移動上去后顯示下拉菜單的效果铲掐。
基本下拉菜單
當鼠標移動到指定元素上時，會出現(xiàn)下拉菜單值桩。
.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>) 來創(chuàng)建下拉菜單的內容颠毙，并放在任何你想放的位置上斯入。
使用 <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"?類碍彭。在鼠標移動到
提示文本放在內聯(lián)元素上(如 ) 并使用class="tooltiptext"悼潭。
CSS)tooltip?類使用?position:relative, 提示文本需要設置定位值?position:absolute。?注意:?接下來的實例會顯示更多的定位效果舞箍。
tooltiptext?類用于實際的提示文本舰褪。模式是隱藏的，在鼠標移動到元素顯示 疏橄。設置了一些寬度占拍、背景色、字體色等樣式捎迫。
CSS3?border-radius?屬性用于為提示框添加圓角晃酒。
:hover?選擇器用于在鼠標移動到到指定元素
CSS 圖像透明/不透明
使用CSS很容易創(chuàng)建透明的圖像。
注意：CSS Opacity屬性是W3C的CSS3建議的一部分窄绒。
創(chuàng)建一個透明圖像
CSS3中屬性的透明度是?opacity掖疮。
img{ opacity:0.4;
? filter:alpha(opacity=40); /* IE8 及其更早版本 */}
IE9，F(xiàn)irefox颗祝，Chrome浊闪，Opera，和Safari瀏覽器使用透明度屬性可以將圖像變的不透明螺戳。 Opacity屬性值從0.0 - 1.0搁宾。值越小，使得元素更加透明倔幼。
IE8和早期版本使用濾鏡：alpha（opacity= x）盖腿。 x可以采取的值是從0 - 100。較低的值损同，使得元素更加透明翩腐。
CSS?圖像拼合技術
圖像拼合
圖像拼合就是單個圖像的集合。
有許多圖像的網頁可能需要很長的時間來加載和生成多個服務器的請求膏燃。
使用圖像拼合會降低服務器的請求數量茂卦，并節(jié)省帶寬。
CSS?媒體類型
媒體類型允許你指定文件將如何在不同媒體呈現(xiàn)组哩。該文件可以以不同的方式顯示在屏幕上等龙，在紙張上，或聽覺瀏覽器等等伶贰。?
媒體類型
一些 CSS 屬性只設計了某些媒體蛛砰。例如?voice-family?屬性是專為聽覺用戶代理。其他一些屬性可用于不同的媒體類型黍衙。例如泥畅，?font-size?屬性可用于屏幕和印刷媒體，但有不同的值琅翻。屏幕和紙上的文件不同位仁，通常需要一個更大的字體柑贞，sans-serif?字體比較適合在屏幕上閱讀，而?serif?字體更容易在紙上閱讀障癌。
@media 規(guī)則
@media 規(guī)則允許在相同樣式表為不同媒體設置不同的樣式凌外。
在下面的例子告訴我們?yōu)g覽器屏幕上顯示一個 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;}}
其他媒體類型
注意：媒體類型名稱不區(qū)分大小寫轿亮。
all????????????????????????????????用于所有的媒體設備疮薇。
aural????????????????????????????用于語音和音頻合成器。
braille????????????????????????????用于盲人用點字法觸覺回饋設備我注。
embossed????????????????????????用于分頁的盲人用點字法打印機按咒。
handheld????????????????????????用于小的手持的設備。
print????????????????????????????????用于打印機但骨。
projection????????????????????????用于方案展示励七，比如幻燈片。
screen????????????????????????????用于電腦顯示器奔缠。
tty????????????????????????????????????用于使用固定密度字母柵格的媒體掠抬，比如電傳打字機和終端。
tv????????????????????????????????????用于電視機類型的設備校哎。
CSS?屬性?選擇器
具有特定屬性的HTML元素樣式
具有特定屬性的HTML元素樣式不僅僅是class和id两波。
注意：IE7和IE8需聲明!DOCTYPE才支持屬性選擇器！IE6和更低的版本不支持屬性選擇器闷哆。
屬性選擇器
下面的例子是把包含標題（title）的所有元素變?yōu)樗{色:
[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 計數器通過一個變量來設置抱怔，根據規(guī)則遞增變量劣坊。
使用計數器自動編號
CSS 計數器根據規(guī)則來遞增變量。
CSS 計數器使用到以下幾個屬性：
counter-reset?- 創(chuàng)建或者重置計數器
counter-increment?- 遞增變量
content?- 插入生成的內容
counter()?或?counters()?函數 - 將計數器的值添加到元素
要使用 CSS 計數器野蝇，得先用 counter-reset 創(chuàng)建：
CSS 網頁布局
網頁布局有很多種方式讼稚，一般分為以下幾個部分：頭部區(qū)域、菜單導航區(qū)域绕沈、內容區(qū)域、底部區(qū)域帮寻。
頭部區(qū)域
頭部區(qū)域位于整個網頁的頂部乍狐，一般用于設置網頁的標題或者網頁的 logo：
菜單導航區(qū)域
菜單導航條包含了一些鏈接，可以引導用戶瀏覽其他頁面：
內容區(qū)域
內容區(qū)域一般有三種形式:
1 列：一般用于移動端
2 列：一般用于平板設備
3 列：一般用于 PC 桌面設備
底部區(qū)域
底部區(qū)域在網頁的最下方固逗，一般包含版權信息和聯(lián)系方式等浅蚪。
