• 者：Vaibhav Arora
• 使用技术：HTML (Haml) / CSS
• 依赖库：-
• 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源码链接：https://codepen.io/vaibhavarora/pen/xmpxjp

• 作者：Rob DiMarzo
• 使用技术：HTML (Pug) / CSS (SCSS)
• 依赖库：-
• 浏览器兼容：Chrome, Firefox, Opera, Safari
• 源码链接：https://codepen.io/robdimarzo/pen/VqjvqR

• 作者：Chris Neale
• 使用技术：HTML / CSS (SCSS) / JavaScript (Babel)
• 依赖库：-
• 浏览器兼容：Chrome, Firefox, Opera, Safari
• 源码链接：https://codepen.io/onion2k/pen/MZWoaL

• 作者：Mike Golus
• 使用技术：HTML (Pug) / CSS (Sass)
• 依赖库：-
• 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源码链接：https://codepen.io/mikegolus/pen/Jegvym

• 作者：Anastasia Goodwin
• 使用技术：HTML / CSS (SCSS)
• 依赖库：-
• 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源码链接：https://codepen.io/agoodwin/pen/NMJoER

• 作者：osorina irina
• 使用技术：HTML / CSS (Sass)
• 依赖库：-
• 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源码链接：https://codepen.io/333397406/pen/PQdMOO

• 作者：Mohammad Abdul Mohaiman
• 使用技术：HTML / CSS
• 依赖库：-
• 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源码链接：https://codepen.io/mohaiman/pen/MQqMyo

• 作者：Chris Smith
• 使用技术：HTML / CSS
• 依赖库：-
• 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源码链接：https://codepen.io/chris22smith/pen/RZogMa

• 作者：Bjorn
• 使用技术：HTML (Pug) / CSS (SCSS)
• 依赖库：-
• 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源码链接：https://codepen.io/BjornRombaut/pen/mOLGgX

• 作者：Manuel Pinto
• 使用技术：HTML / CSS
• 依赖库：-
• 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源码链接：https://codepen.io/P1N2O/pen/pyBNzX

• 作者：Sépion
• 使用技术：HTML / CSS
• 依赖库：-
• 浏览器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源码链接：https://codepen.io/Sepion/pen/ZQJyeq

odepen是一个非常了不起的网页应用。只要电脑能够上网，你就可以创建HTML, CSS和Javascript。如果你想选择性加入PRO版本，你会得到一些非常酷的效果诸如：世界范围内的成对编程（在线合作编码），给学生授课（学生可以通过网络观看你实时工作情况），轻松上传工作所需文件，等等。

我搜索了一些时下最好最流行的大家可能会感兴趣的codepen（仅限于HTML和CSS）。如果你想把它们融入到你的设计中去，那会大大节省你很多时间。或者你可以考虑下从别人那里学习一些新东西。

在下面的例子中你会看到各种各样的片段，HTML 陈列，登录方式，垂直菜单，甚至时下最流行的主题：扁平化设计（扁平化图像，扁平化按钮形状，扁平化用户界面要素，等）。好好欣赏这些精选的代码片段吧，如果现在没时间看完所有的代码例子，那就保存下来以备不时之需吧。

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 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 链接

如何在HTML文档中创建链接。

(可以在本页底端找到更多实例)

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

• 一个未访问过的链接显示为蓝色字体并带有下划线。

• 访问过的链接显示为紫色并带有下划线。

• 点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：:

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

href 属性描述了链接的目标。.

实例

<a href="http://www.runoob.com/">访问菜鸟教程</a>

上面这行代码显示为：: 访问菜鸟教程

点击这个超链接会把用户带到菜鸟教程的首页。

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

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

实例

<ahref="http://www.runoob.com/"target="_blank">访问菜鸟教程!</a>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

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

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

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

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="http://www.runoob.com/html/html-links.html#tips">

访问有用的提示部分</a>

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

注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.runoob.com/html/"。

图片链接

如何使用图片链接。

在当前页面链接到指定位置

如何使用书签

跳出框架

本例演示如何跳出框架，假如你的页面被固定在框架之内。

创建电子邮件链接

本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

建电子邮件链接 2

本例演示更加复杂的邮件链接。

HTML 链接标签

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！