html超链接代码怎么写 html超链接按钮怎么做 收藏 0

前端入门——css链接样式

首先让我们回顾下的用法 <a href=\”url\”> , 超链接是一个非常伟大的发明，它链接了整个互联网，没有它就没有互联网。

超链接在发明之初就给它设计了一个默认的样式，就是蓝色带下划线的样式，如下图：

默认样式

关于为什么超链接是蓝色带下划线的历史，可以参考这里：https://baijiahao.baidu.com/s?id=1710334071632114373&wfr=spider&for=pc

当网页变得越来越丰富，用户的需求越来越高的时候，这样的样式已经不符合大众的审美，所以通过css来美化超链接非常有用和有趣。

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

如下图：

除此之外，可以根据链接状态来设置不同样式，链接状态分别有：

• a:link – 正常的，未访问的链接
• a:visited – 用户访问过的链接
• a:hover – 用户将鼠标悬停在链接上时
• a:active – 链接被点击时

如下示例：

未被访问的链接

已被访问的链接

将鼠标悬停在链接上

被选择的链接

如果为多个链接状态设置样式，请遵循如下顺序规则：

• a:hover 必须 a:link 和 a:visited 之后
• a:active 必须在 a:hover 之后

以上是链接的各种伪类，描述了链接的不同状态，你可以试试在不同状态下给设置不同的属性，比如背景色，字体或者文本修饰等等。

链接通常用来当做按钮使用，点击它跳转页面或执行一些事件或js函数。如下示例：

定义了一个背景色为红色的按钮，如下图：

注意：如果想在点击这个按钮后禁止跳转页面，可以给href属性设置javascript:void();,在以后会讲到JavaScript在网页中的使用，这里你已经看到，在href属性中通过Javascript：的形式可以执行一段js语句或函数，这里void()就是阻止链接跳转。

上面只是一个简单的例子，当然你也可以制作更漂亮的按钮，比如加上圆角、阴影、或渐变背景等。

当鼠标移动到链接上时，你会看到鼠标变成一个手形，通过css cursor 属性可以改变鼠标指针的形状，如下图：

可以尝试按照上面的属性依次练习一遍，链接的样式到此就介绍完了，感谢关注。

上篇：

前端入门——html 列表

上篇介绍了html 中文本格式及段落等标签，今天说下列表，什么是列表？它就是一种数据排列方式，以条列式的方式显示文本，使读者一目了然。列表主要有以下三种：

1. 无序列表
2. 有序列表
3. 定义列表

无序列表在每行开始位置显示一个符号，语法如下：

显示效果：

无序列表的符号可以通过在ul 标签上设置 type 属性显示不同的符号，比如：

1、disc —— 实心圆点 (默认类型)2、circle —— 空心圆圈3、square —— 实心方块

实例代码：

显示效果：

有序列表使用数字或字母符号排列，表示文本按一定顺序显示，语法如下：

效果如下：

同无序列表一样，在ol上通过type 属性设置使用那种符号表示顺序，有以下几种：

1、1，表示数字 1、2、3….. （默认数字）2、a，表示小写字母 a、b、c….3、A，表示大写字母 A、B、C ….4、i，表示小写罗马字母 i、ii、iii、iv….5、I，表示大写罗马字母 I、II、III、IV….

显示效果如下：

html代码：

有序列表还可以通过start 属性设置起始数组，如下：

显示效果：

不同以上2种列表，定义列表主要用来解释名词，由2种层次列表显示，第一层是被解释的名词，第二层是详细地解释文字，语法如下：

显示效果：

第一行<dt>是要解释的名词，第二行标签<dd>是解释文本，会自动缩进。

以上三种列表是可以嵌套使用的，看如下示例：

效果：

每嵌套一层，它的符号是不一样的，你可以试试再嵌套一层看看效果。

当然，不同列表类型也可互相嵌套，根据显示效果可以自由使用，一般建议不要这样使用，不同类型列表显示在一块不是很美观。如下面无序列表中嵌套有序列表：

效果如下：

列表是网页制作中经常会使用的标签，比如在制作网页导航栏菜单时会经常用到ul列表，以后会讲如何通过ul标签制作一个下拉菜单，感谢您阅读及关注，祝你学习愉快。

上篇：

下篇：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com