整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
果圖
html部分：先寫用div畫好六個導(dǎo)航的卡片，再利用css添加響應(yīng)效果
<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屬性實現(xiàn)導(dǎo)航響應(yīng)式操作，即可實現(xiàn)如圖效果
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;
}
//添加導(dǎo)航的響應(yīng)式效果
.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; }然后就能實現(xiàn)我們這個實用又美觀的側(cè)邊導(dǎo)航欄啦
1）字體的屬性
字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：
屬 性 | 可 取 值 | 描 述 |
font | font-style、font-variant、font-weight、font-size（或 line-height）、font-family | 在一個聲明中設(shè)置所有的字體屬性 |
font-family | 字體名稱、inherit | 設(shè)置字體類型 |
font-size | xx-small、x-small、small、medium（默認）、large、x-large、xx-large smaller、larger length、%、inherit | 設(shè)置字體大小 |
font-weight | normal（默認）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold） | 設(shè)置字體粗細 |
font-style | normal、italic、oblique、inherit | 設(shè)置字體風(fēng)格 |
例子，
<!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 前端技術(shù)</h3>
<span
>在當(dāng)今社會中，Web 已經(jīng)成為網(wǎng)絡(luò)信息共享和發(fā)布的主要形式。要想開發(fā) Web 應(yīng)用
系統(tǒng)，就必須掌握 Web 前端技術(shù)。</span
>
</body>
</html>顯示為，
（2）CSS 中鏈接標簽可用的偽類：
CSS 中，偽類是添加到選擇器的關(guān)鍵字，給指定元素設(shè)置一些特殊狀態(tài)，我們以 : 開頭。
鏈接有以下四個狀態(tài)。這四種狀態(tài)也稱之為超鏈接的偽類。
狀態(tài) | 效果 |
a:link | 普通的、未被訪問的鏈接。 |
a:hover | 鼠標指針位于鏈接的上方。 |
a:active | 鏈接被單擊的時刻。 |
a:visited | 用戶已訪問的鏈接。 |
針對超鏈接的上述四種狀態(tài)設(shè)置樣式規(guī)則，能起到美化超鏈接的作用。例如，為了完成下對超鏈接的顯示要求，編寫的 CSS 樣式代碼如下。
狀 態(tài) | 顏 色 | 背 景 色 | 文 本 修 飾 |
未訪問 | 藍色 | 無 | 無下畫線 |
鼠標移到 | 黑色 | #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>
顯示為，
為什么要按照這樣的順序來使用呢？ 調(diào)整幾個偽類的順序，看看會發(fā)生什么。
我們把 a:link 放到最后，效果如下：
從圖中可以發(fā)現(xiàn)其中的樣式屬性都被覆蓋了。
（3）列表相關(guān)的樣式屬性：
屬 性 | 可 取 值 | 描 述 |
list-style | list-style-type、list-style-position、list-style-image | 在一個聲明中設(shè)置所有的列表屬性 |
list-style-image | URL、none | 設(shè)置圖像為列表項標志 |
list-style-position | inside、outside、inherit | 設(shè)置列表中列表項標志的位置 |
list-style-type | disc（默認）、circle、square、decimal 等 | 設(shè)置列表項標志的類型 |
例子，
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gifTML5基礎(chǔ)
CSS3基礎(chǔ)
CSS3高級
JAVASCRIPT基礎(chǔ)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
