html+css寫出響應式側邊導航欄

果圖

html部分：先寫用div畫好六個導航的卡片，再利用css添加響應效果

<div class='card-holder'>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-01'>
                <span class='card-content'>item #1</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-02'>
                <span class='card-content'>long menu item #2</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-03'>
                <span class='card-content'>menu item #3</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-04'>
                <span class='card-content'>item #4</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-05'>
                <span class='card-content'>menu item #5</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-06'>
                <span class='card-content'>long menu item #1</span>
            </div>
        </a>
    </div>
</div>

css部分：通過hover選擇器和transition屬性實現導航響應式操作，即可實現如圖效果

a:link,
a:hover,
a:visited,
a:active {
  color: #fff;
  text-decoration: none;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
.card-holder {  
  position: fixed;
  width: 0px;
  overflow: visible;
}
.card-wrapper {
  display: inline-block;
  float: right;
  clear: both;
}
.card {
  position: relative;
  left: 32px;
  padding: 16px 32px 16px 64px;
  margin: 8px;  
  background: #fff;
  transition: all 0.3s ease-in-out 0.1s;
}
//添加導航的響應式效果
.card:hover {
  position: relative;
  left: 100%;
  margin-left: -32px;
  transition: all 0.3s ease-in-out;
}
.card-content {
  display: inline-block;
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.bg-01 { background: #539770; }
.bg-02 { background: #4B7D74; }
.bg-03 { background: #8DC2BC; }
.bg-04 { background: #EDD6B4; }
.bg-05 { background: #BE7467; }
.bg-06 { background: #E2AE63; }

然后就能實現我們這個實用又美觀的側邊導航欄啦

1）字體的屬性

font 屬性
font-family 屬性
font-size 屬性
font-weight 屬性
font-style 屬性

字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：

屬性	可取值	描述
font	font-style、font-variant、font-weight、font-size（或 line-height）、font-family	在一個聲明中設置所有的字體屬性
font-family	字體名稱、inherit	設置字體類型
font-size	xx-small、x-small、small、medium（默認）、large、x-large、xx-large smaller、larger length、%、inherit	設置字體大小
font-weight	normal（默認）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）	設置字體粗細
font-style	normal、italic、oblique、inherit	設置字體風格

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h3 {
        font-size: 20px;
        font-family: 隸書;
        line-height: 28px;
      }
      span {
        font: italic 16px 華文彩云;
      }
    </style>
  </head>
  <body>
    <h3>Web 前端技術</h3>
    <span
      >在當今社會中，Web 已經成為網絡信息共享和發布的主要形式。要想開發 Web 應用
      系統，就必須掌握 Web 前端技術。</span
    >
  </body>
</html>

顯示為，

（2）CSS 中鏈接標簽可用的偽類：

a:link
a:hover
a:active
a:visited

CSS 中，偽類是添加到選擇器的關鍵字，給指定元素設置一些特殊狀態，我們以 : 開頭。

鏈接有以下四個狀態。這四種狀態也稱之為超鏈接的偽類。

狀態	效果
a:link	普通的、未被訪問的鏈接。
a:hover	鼠標指針位于鏈接的上方。
a:active	鏈接被單擊的時刻。
a:visited	用戶已訪問的鏈接。

針對超鏈接的上述四種狀態設置樣式規則，能起到美化超鏈接的作用。例如，為了完成下對超鏈接的顯示要求，編寫的 CSS 樣式代碼如下。

狀態	顏色	背景色	文本修飾
未訪問	藍色	無	無下畫線
鼠標移到	黑色	#DDDDDD	下畫線
正單擊	紅色	#AAAAAA	刪除線
已訪問	綠色	無	無下畫線

對于超鏈接的偽類，我們推薦的使用順序是：:link - :visited - :hover - :active。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        text-decoration: none;
      }
      a:link {
        color: red;
      }
      a:visited {
        color: blue;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">這是一個鏈接</a>
  </body>
</html>

顯示為，

為什么要按照這樣的順序來使用呢？調整幾個偽類的順序，看看會發生什么。

我們把 a:link 放到最后，效果如下：

從圖中可以發現其中的樣式屬性都被覆蓋了。

（3）列表相關的樣式屬性：

list-style 屬性
list-style-image 屬性
list-style-position 屬性
list-style-type 屬性

屬性	可取值	描述
list-style	list-style-type、list-style-position、list-style-image	在一個聲明中設置所有的列表屬性
list-style-image	URL、none	設置圖像為列表項標志
list-style-position	inside、outside、inherit	設置列表中列表項標志的位置
list-style-type	disc（默認）、circle、square、decimal 等	設置列表項標志的類型

例子，

wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif

TML5基礎

單詞及含義

head 頭，表示 HTML 文檔的頭部
title 標題，表示 HTML 文檔的標題
meta 元數據，用于為 HTML 文檔定義關鍵信息
body 頁面的身體
p 段落元素
h1-h6 標題字
img 圖像元素，將圖像添加到頁面
src 屬性，用來表示路徑
a a元素創建一個超級鏈接
href 屬性，鏈接url
target 屬性，目標，可取值為_blank、_self等
name 屬性，錨點名稱
table 表格
tr 創建表行
td 創建單元格
width 設置寬度
height 設置高度
align 設置表格對齊方式
border-radius 設置邊框倒角
border 設置邊框
bgcolor 設置表格背景顏色
valign 設置垂直對齊方式
colspan 設置單元格跨列
rowspan 設置單元格跨行
caption 為表格定義標題
thead 表頭行分組
tbody 表主體行分組
tfoot 表尾行分組
ol 有序列表
ul 無序列表
li 列表項元素
type 設置列表項標識
dl 定義列表
dt 定義了定義列表中的一個術語
span 最常用的行內元素
dd 對定義列表中的術語提供定義
div 用來設計頁面的大致布局
header 語義化標簽，用來定義網頁的頁頭部分內容
nav 語義化標簽，用來定義網頁的導航部分內容
section 語義化標簽，用來定義網頁的主體信息部分內容
aside 語義化標簽，用來定義網頁的邊欄信息部分內容
footer 語義化標簽，用來定義網頁的頁腳信息部分內容
form 定義創建表單
action 定義表單被提交時發生的動作
method 指出表單數據提交的方式
name 表單元素屬性，用于區分提交數據
input 文本輸入控件、按鈕、單選、復選按鈕、選項框等
value 控件的數據，用于區分提交的數據
name 控件的名稱，用于分組數據，提交數據必要屬性
disabled 禁用控件
text 文本
password 密碼
maxlength 限制輸入的字符數
radio 單選
checkbox 復選
submit 提交
reset 重置
button 按鈕
label 將文本和控件聯系在一起，單擊文本，效果和單擊控件一樣
for 表示和該元素相關聯的控件的id值
select 創建選項框
size 選項框屬性，值大于一，則為滾動列表
multiple 設置多選
option 選項
selected 預選中
textarea 多行文本輸入框
cols 指定文本區域的列數
rows 制定文本區域的行數
fieldset 元素，為控件分組
legend 元素，為分組制定一個標題
iframe 浮動框架，可以在一個瀏覽器窗口中同時顯示多個頁面文檔
details 元素，用于定義細節
summary 元素，用來包含details元素的標題
meter 用于定義度量衡
min 范圍最小值，默認為0
max 范圍最大值，默認為1
time 元素，用于定義公歷的時間或日期
mark 元素，用于定義頁面中帶有記號的文本，突出顯示

CSS3基礎

css 層疊樣式表，又叫級聯樣式表，簡稱樣式表，用于為頁面添加樣式
style 元素，用于在HTML頁面中使用內部樣式表和內聯樣式表
link 元素，鏈接需要的外部樣式表文件，在文檔的head元素內添加
!important 用于調整樣式規則的優先級
* 通用選擇器，用于設置整個文檔的默認樣式
id id選擇器，用于選取元素，優先級較高
class class選擇器，用于選取元素，優先級次之
:link 鏈接偽類，適用于尚未訪問的鏈接
:visited 鏈接偽類，適用于訪問過的鏈接
:hover 動態偽類，適用于鼠標懸停在HTML元素時
:active 動態偽類，適用于HTML元素被激活時
:focus 動態偽類，適用于HTML獲取焦點時
px 像素
pt 磅
em 一em等于當前的字體尺寸
rgb 顏色單位
overflow 當內容溢出元素框時如何處理
hidden 文本內容超出尺寸時，隱藏文本不顯示
auto 自適應
box-shadow 向邊框添加一個或多個陰影
outline 輪廓
Box Model 框模型 - 定義了元素框處理元素內容、內邊距、邊框和外邊距的方式
margin 外邊距 - 圍繞在元素邊框周圍的空白區域是外邊距（與下一個元素之間的空間量）
margin-top 上外邊距
margin-right 右外邊距
margin-bottom 下外邊距
margin-left 左外邊距
padding 內邊距 - 內容區域和邊框之間的空間
padding-top 上內邊距
padding-right 右內邊距
padding-bottom 下內邊距
padding-left 左內邊距
background-color 背景色
background-image 背景圖
bankground-repeat 背景重復（默認值為repeat）
repeat 背景重復的取值 - 在垂直方向和水平方向重復
repeat-x 背景重復的取值 - 在水平方向重復
repeat-y 背景重復的取值 - 在垂直方向重復
no-repeat 背景重復的取值 - 僅顯示一次
background-size 背景圖片尺寸
cover 背景圖片尺寸的取值 - 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域，圖片的某些部分也許無法顯示
contain 背景圖片尺寸的取值 - 把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域
background-attachment 背景圖片的固定（默認值為scroll）
scroll 背景圖片的固定的取值 - 背景會隨文檔滾動
fixed 背景圖片的固定的取值 - 背景圖像固定，并不會隨著頁面的其余部分滾動
background-position 背景定位 - 改變圖像在背景中的位置
background-image 漸變屬性
linear-gradient 漸變屬性的取值 - 線性漸變
radial-gradient 漸變屬性的取值 - 徑向漸變
repeating-linear-gradient 重復線性漸變
repeating-radial-gradient 重復徑向漸變
font-family 指定字體
font-size 字體大小
font-weight 字體加粗
bold 地體加粗的取值 - 加粗
font-style 字體樣式
italic 字體樣式的取值 - 斜體
font-variant 小型大寫字母顯示
color 文本顏色
text-align 文本水平排列方式
text-decoration 文字修飾
underline 文字修飾的取值 - 下劃線
line-height 行高
text-indent 首行文本縮進
text-shadow 文本陰影
vertical-align 垂直對齊方式 - 用于表格設置單元格的對齊方式
top 垂直對齊方式的取值 - 上
middle 垂直對齊方式的取值 - 中
bottom 垂直對齊方式的取值 - 下
border-collapse 邊框合并屬性 - 用于表格
separate 邊框合并的取值 - 邊框分離
collapse 邊框合并的取值 - 邊框合并
border-spacing 邊框邊距 - 設置相鄰單元格的邊框間的距離
caption-side 設置表格標題的位置 - 有top跟bottom兩個值
table-layout 表格單元格、行、列的算法規則
float 如果需要設置框浮動在包含框的左邊或右邊可通過此屬性來設置
clear 用于清除浮動所帶來的影響
display 元素的顯示方式
none 元素的顯示方式的取值 - 該框及其內容不再顯示，不占用文檔的空間
block 元素的顯示方式的取值 - 讓元素表現的像塊級元素一樣
inline 元素的顯示方式的取值 - 讓元素表現的像內聯元素一樣
inline-block 元素的顯示方式的取值 - 讓元素表現的像行內塊一樣
visibility 顯示效果屬性
visible 顯示效果屬性的取值 - 元素可見（默認值）
hidden 顯示效果屬性的取值 - 元素不可見，但是依然占據空間
collapse 顯示效果屬性的取值 - 用于表格時，可刪除一行或一列，且不影響表格布局
opacity 設置元素的不透明級別 - 值從0（完全透明）到1（完全不透明）
cursor 定義鼠標放在元素邊界范圍內時的光標形狀
pointer cursor的取值 - 光標形狀為小手
list-style-type 控制列表中列表項的樣式
disc 列表項樣式的取值 - 實心圓
circle 列表項樣式的取值 - 空心圓
square 列表項樣式的取值 - 實心方塊
list-style-position 列表項的位置
outside 列表項的位置的取值 - 標記放在文本以外
inside 列表項的位置的取值 - 標記放在文本以內
list-style 列表項樣式的簡寫屬性，常用方式：list-style:none
position 元素的定位屬性
relative 定位屬性的取值 - 相對定位（相對于其本身的位置偏移某個距離）
absolute 定位屬性的取值 - 絕對定位（相對于已定位的祖先元素偏移某個距離）
z-index 元素的堆疊順序 - 值越大越接近頁面表面
fixed 定位屬性的取值 - 固定定位（將元素固定在頁面的某個位置）

CSS3高級

:target 目標偽類 - 用于選取當前活動的目標元素
:enabled 狀態偽類 - 匹配每個已啟用的元素
:disabled 狀態偽類 - 匹配每個被禁用的元素
:checked 狀態偽類 - 匹配每個已被選中的input元素
:first-child 結構偽類 - 匹配屬于其父元素的首個子元素
:last-child 結構偽類 - 匹配屬于其父元素的最后一個子元素
:empty 結構偽類 - 匹配沒有子元素的每個元素
:only-child 結構偽類 - 匹配屬于其父元素的唯一的子元素
:not(selector) 否定偽類 - 匹配非指定元素/選擇器的每個元素
:first-letter 選擇器用于選取指定選擇器的首字母
:first-line 選擇器用于選取指定選擇器的首行
::selection 選擇器選取被用戶選取的部分
content content屬性與 :before 及 :after 偽元素配合使用，來插入生成內容
counter-reset 用于定義計時器，并設置其初始值（默認為 0）可以設置或重復為正值或負值
counter() 用于為指定計數器創建計數字符串。語法為：counter(name),name為計數器名稱
counter-increment 設置某個選擇器每次出現的計數器增量，默認值為 1
column-count 規定元素應該被分隔的列數
column-gap 規定被分隔的列之間的間隔
column-rule 規定被分隔的列之間的寬度、樣式和顏色
transform 向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
transform-origin 用來指定元素的轉換原點位置
perspective 定義3D元素距視圖的距離
translate 翻譯
rotate 旋轉
scale 規模;比例（尺）
transition-property 應用過渡效果的css屬性的名稱(為過渡屬性設置多個值，多個值之間用逗號隔開)
transition-duration 完成過渡效果需要花費的時間（以s或ms為單位，0則沒有過度效果）
transition-timing-function 過渡效果的速度曲線
transition-delay 過渡效果什么時候開始（以s或ms為單位）
transition 過渡，簡寫屬性
@keyframes 聲明動畫
animation-name 調用動畫，規定需要綁定到選擇器的keyframe的名稱
animation-duration 動畫完成一個周期所需要的時間，單位為秒或毫秒
animation-timing-function 動畫的速度曲線
ease 慢速開始，快速變快，慢速結束
linear 勻速開始結束
ease-in 加速(漸入)
ease-out 減速(淡出)
ease-in-out 加速然后減速
animation-delay 設置播放之前的延遲時間（單位為秒或毫秒）
animation-iteration-count 設置播放次數（取值為數值或infinite，infinite表示無限次播放）
animation-direction 動畫播放方向（取值為normal或alternate，normal為正常播放，alternate為輪流播放）
animation 簡寫屬性，定義動畫的各方面。語法為(animation:name duration timing-function delay iteration-count direction)
animation-fill-mode 規定動畫在播放之前或之后，其動畫效果是否可見。可取值（none：不改變默認行為；forwards：當動畫播放完成后，保持最后一個屬性；backwards：在動畫顯示之前，應用開始屬性值；both：向前和向后填充模式都被應用）
animation-play-state 規定動畫正在運行還是停止，取值為（paused：動畫暫停；running：動畫播放）
—webkit— 兼容Chrome和Safari瀏覽器
—moz— 兼容Firefox瀏覽器
—o— 兼容Opera瀏覽器
YUI Compress 壓縮
css-sprites 樣式表貼圖定位；圖片拼合；精靈

JAVASCRIPT基礎

javascript 一種運行于javascript解釋器中的解釋型腳本語言
ECMAScript 核心語法標準
Console 控制臺
script 腳本
var 聲明變量，如（var = name）
undefined 未定義，變量聲明但未賦值
null 空，沒有值
const 常量聲明，常量的值不能改變
number 數字類型，既可表示整數，也可表示浮點數
string 字符串類型，表示一系列的文本字符數據
Trident Microsoft IE使用的內核
Gecko Mozilla Firefox使用的內核
Webkit Apple Safari、Google Chrome、Opera（2013后）使用的內核
Presto Opera使用的內核
boolean 布爾類型，只有兩個值，true和false
function 函數
return 聲明函數的返回值
declare 宣布，聲明
switch 轉換，用于循環結構
case 情況，用于循環結構
while 當…時，用于循環結構
do 做，要求，規定
response 響應，反應，回答
result 結果，答案
get 得到，獲得
bonus 獎金，紅利
for 因為，用于循環結構
if 如果，用于分支結構
else 否則，用于分支結構
continue 跳出本次循環，執行下一次循環
break 跳出循環，執行循環后面的語句
sale 銷售，出售

在線咨詢

上一篇：利用腳本控制音頻/視頻文件《HTML5系列教程15》
下一篇：如何編寫HTML提交按鈕代碼？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html+css寫出響應式側邊導航欄

單詞及含義

您的項目需求