• 者：Vaibhav Arora
• 使用技術(shù)：HTML (Haml) / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/vaibhavarora/pen/xmpxjp

• 作者：Rob DiMarzo
• 使用技術(shù)：HTML (Pug) / CSS (SCSS)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/robdimarzo/pen/VqjvqR

• 作者：Chris Neale
• 使用技術(shù)：HTML / CSS (SCSS) / JavaScript (Babel)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/onion2k/pen/MZWoaL

• 作者：Mike Golus
• 使用技術(shù)：HTML (Pug) / CSS (Sass)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/mikegolus/pen/Jegvym

• 作者：Anastasia Goodwin
• 使用技術(shù)：HTML / CSS (SCSS)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/agoodwin/pen/NMJoER

• 作者：osorina irina
• 使用技術(shù)：HTML / CSS (Sass)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/333397406/pen/PQdMOO

• 作者：Mohammad Abdul Mohaiman
• 使用技術(shù)：HTML / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/mohaiman/pen/MQqMyo

• 作者：Chris Smith
• 使用技術(shù)：HTML / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/chris22smith/pen/RZogMa

• 作者：Bjorn
• 使用技術(shù)：HTML (Pug) / CSS (SCSS)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/BjornRombaut/pen/mOLGgX

• 作者：Manuel Pinto
• 使用技術(shù)：HTML / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/P1N2O/pen/pyBNzX

• 作者：Sépion
• 使用技術(shù)：HTML / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/Sepion/pen/ZQJyeq

odepen是一個非常了不起的網(wǎng)頁應(yīng)用。只要電腦能夠上網(wǎng)，你就可以創(chuàng)建HTML, CSS和Javascript。如果你想選擇性加入PRO版本，你會得到一些非?？岬男ЧT如：世界范圍內(nèi)的成對編程（在線合作編碼），給學(xué)生授課（學(xué)生可以通過網(wǎng)絡(luò)觀看你實時工作情況），輕松上傳工作所需文件，等等。

我搜索了一些時下最好最流行的大家可能會感興趣的codepen（僅限于HTML和CSS）。如果你想把它們?nèi)谌氲侥愕脑O(shè)計中去，那會大大節(jié)省你很多時間。或者你可以考慮下從別人那里學(xué)習(xí)一些新東西。

在下面的例子中你會看到各種各樣的片段，HTML 陳列，登錄方式，垂直菜單，甚至?xí)r下最流行的主題：扁平化設(shè)計（扁平化圖像，扁平化按鈕形狀，扁平化用戶界面要素，等）。好好欣賞這些精選的代碼片段吧，如果現(xiàn)在沒時間看完所有的代碼例子，那就保存下來以備不時之需吧。

CSS3 Working Clock

這是一個純css3時鐘。它使用css動畫還有圖形，沒有使用任何圖片或者是js.

CSS3 Pricing Table

CSS Loader

Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

Twitter Button Concept

CSS3 Loading Animation

Pure CSS3 Vertical Menu with Hover Effect

CSS3 Stamp effect using radial gradients

I Love Blur

Social Navigation

Login

Calendar

Social Footer

Parallax Landscape

CSS3 Thermometer

CSS-Only Responsive Layout with Smooth Transitions

Flat CSS3 Weather Widget

Flat Responsive Sliding Boxes

Tiny CSS3 Round Breadcrumb

CSS3 Hover Effect using :after Psuedo Element

Flat UI Elements

CSS Flat Button Shapes

Email UI

Flat Icons CSS

HTML 使用超級鏈接與網(wǎng)絡(luò)上的另一個文檔相連。幾乎可以在所有的網(wǎng)頁中找到鏈接。點擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。

HTML 鏈接

如何在HTML文檔中創(chuàng)建鏈接。

(可以在本頁底端找到更多實例)

HTML 超鏈接（鏈接）

HTML使用標(biāo)簽 <a>來設(shè)置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。

當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?/p>

在標(biāo)簽<a> 中使用了href屬性來描述鏈接的地址。

默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

• 一個未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線。

• 訪問過的鏈接顯示為紫色并帶有下劃線。

• 點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會根據(jù) CSS 的設(shè)定而顯示。

HTML 鏈接語法

鏈接的 HTML 代碼很簡單。它類似這樣：:

<a href="url">鏈接文本</a>

href 屬性描述了鏈接的目標(biāo)。.

實例

<a >訪問菜鳥教程</a>

上面這行代碼顯示為：: 訪問菜鳥教程

點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。

提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

HTML 鏈接 - target 屬性

使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會在新窗口打開文檔：

實例

<a>訪問菜鳥教程!</a>

HTML 鏈接- id 屬性

id屬性可用于創(chuàng)建在一個HTML文檔書簽標(biāo)記。

提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。

實例

在HTML文檔中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文檔中創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：

<a href="#tips">訪問有用的提示部分</a>

或者，從另一個頁面創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：

<a >

訪問有用的提示部分</a>

基本的注意事項 - 有用的提示

注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務(wù)器產(chǎn)生兩次 HTTP 請求。這是因為服務(wù)器會添加正斜杠到這個地址，然后創(chuàng)建一個新的請求，就像這樣：。

圖片鏈接

如何使用圖片鏈接。

在當(dāng)前頁面鏈接到指定位置

如何使用書簽

跳出框架

本例演示如何跳出框架，假如你的頁面被固定在框架之內(nèi)。

創(chuàng)建電子郵件鏈接

本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）

建電子郵件鏈接 2

本例演示更加復(fù)雜的郵件鏈接。

HTML 鏈接標(biāo)簽

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！