HTML 中有趣的有序列表：美观、易于 understands和＂Wow＂效果！

网络上，有序列表可以使您的 HTML 页面更有组织、简洁且易于阅读。在本文中，我将向您展示如何在 HTML 中创建高质量、有趣的有序列表。您将学习如何在平凡的列表中带来鲜为人知的＂Wow＂效果。让我们开始吧！

一、HTML 中的 ordered list 基础

HTML 中的有序列表（ordered list）使用 <ol> 元素创建，并且对于每个列表项使用 <li> 元素。下面是一段有序列表的基本示例：

html

<ol>
<li>项目 1</li>
<li>项目 2</li>
</ol>

在上面的示例中，您可以看到列表由 <ol> 元素包围，每个列表项使用 <li> 元素表示。

二、美化有序列表

要让您的有序列表更具吸引力，您可以通过使用 CSS 进行累积 зі熄culation。以下是一些建议：

自定义列表部分的风格： affair CAN I USE CSS 属性供您选择，例如颜色、背景图片、边框、边距和填充。此外，可以使用盒子阴影为列表添加浅显的三维效果。
更新列表标记：更先Progressive Enhancement，在文本内容之前使用数字列表标记，可以让列表更立体。您可以使用 CSS Counter 功能自动结合标记和内容。

css

1）CSS3 中提供的新选择器 —— 属性选择器：

属性选择器

属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。

在 CSS3 中新增了三种属性选择器，如下所示：

选择器	描述
E[attr^=“xx”]	选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。
E[attr$=“xx”]	选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。
E[attr*=“xx”]	选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。

例子，

<!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>
      a[href^="#"] {
        color: rgb(179, 255, 0);
      }
      a[href$="org"] {
        color: rgb(195, 0, 255);
      }
      a[href*="le"] {
        background-color: rgb(0, 255, 149);
        color: white;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">本地链接</a></li>
      <li><a href="https://www.wangyelang.cn">王耶浪</a></li>
      <li><a href="https://developer.mozilla.org">Web开发</a></li>
      <li><a href="https://learningnotes.com">学习笔记</a></li>
    </ul>
  </body>
</html>

显示为，

在上面代码中，我们使用 a[href^="#"] 去匹配 a 标签中 href 属性值以 # 开头的元素。
使用 a[href$="org"] 去匹配 a 标签中 href 属性值以 org 结尾的元素。
使用 a[href*="le"] 去匹配 a 标签中 href 属性值包含 un 的元素。

（2）子元素伪类选择器就是选择某元素的子元素的一种选择器。

在 CSS3 中，有以下几种子元素伪类选择器：

选择器	描述
E:first-child	选择元素 E 的第一个子元素。
E:last-child	选择元素 E 的最后一个子元素。
E:nth-child(n)	选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。
E:only-child	选择元素 E 下唯一的子元素。
E:first-of-type	选择父元素下第一个 E 类型的子元素。
E:last-of-type	选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)	选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。
E:only-of-type	选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)	选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)	选择所有 E 元素倒数的第 n 个为 E 的子元素。

例子,

<!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>
      div {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        background-color: rgb(0, 255, 242);
      }
      div:nth-child(2) {
        background-color: rgb(0, 255, 128);
      }
      div:nth-of-type(4) {
        background-color: rgb(111, 0, 255);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

显示效果，

div:nth-child(2) 给 div 的第 2 个子元素添加绿色背景颜色。
div:nth-of-type(4) 给父元素下第 4 个 div 子元素添加紫色背景颜色。

（3）UI 伪类选择器是通过元素的状态来选择的一种选择器。

在 CSS3 中有以下几种 UI 伪类选择器。

选择器	描述
:focus	给获取焦点的元素设置样式。
::selection	给页面中被选中的文本内容设置样式。
:checked	给被选中的单选框或者复选框设置样式。
:enabled	给可用的表单设置样式。
:disabled	给不可用的表单设置样式。
:read-only	给只读表单设置样式。
:read-write	给可读写的表单元素设置样式。
:valid	验证有效。
:invalid	验证无效。

练习一：属性有效性验证

页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入不满足要求，背景颜色为红色。

<!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>
      /*格式错误*/
      input:invalid {
        background-color: red;
      }
      /*格式正确*/
      input:valid {
        background-color: green;
      }
    </style>
  </head>
  <body>
    电子邮箱：<input type="email" />
  </body>
</html>

练习二：获得焦点验证

页面上有一个姓名输入框和一个密码输入框，当聚焦输入框时，输入框的背景颜色会发生改变，

<!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>
      input:focus {
        background-color: rgb(255, 153, 0);
      }
    </style>
  </head>
  <body>
    姓名：<input type="text" /><br />
    密码：<input type="password" />
  </body>
</html>

练习：

实现一个五彩导航

在前面的内容中，我们已经学习了 CSS3 的选择器应用。我们在之前的章节中也做过横向导航，这里我们结合所学的 CSS3 选择器来实现一个升级版的导航。

知识点

hover 伪类选择器

要求

新建一个 html 文件。
将 <a> 标签转换成行内块，宽 120px 高 58px、设置背景颜色 #FFFAE8；
当鼠标移动到链接上时达到以下要求：

背景颜色分别变为 #E1D15E、#F9D6D1、#5BDE66、#EBAA8D、#BED780；
设置圆角效果（border-radius）；
字体：颜色为 #fff，去掉链接下划线。

验证测试

按以上要求用 HTML 完成以下效果：

解题：

在的网页设计千篇一律，越来越多的设计师想尝试更加大胆的色彩搭配，所以我们搜集整理了超齐全的一份包含了58个色彩工具的网站，app还有插件，帮助您做成更好的设计。当然这些色彩搭配不是凭空捏造出来的，而是从各个地方获取来的灵感，结合色彩心理学，这些搭配不仅好看，还符合您更高层次的情感需求。

1.Muzli colors

网址：https://colors.muz.li/

使用此工具可以快速创建编辑调色板，最大的特点是可以根据您创建的色彩搭配直接在app设计模板上预览，并且还能下载。

2. Colorable

网址：https://colorable.jxnblk.com/

这个工具主要查看字体颜色和背景颜色的对比效果。

3. Color Leap — History’s Palettes

网址：https://colorleap.app/home

这个工具可以搜素过去四千年以来使用的180个调色板。

4. Picular

网址：https://picular.co/

这是一个颜色搜索工具，只要输入搜索的关键词，就能像google一样展示相关的颜色，可以复制色号和查看使用该颜色的图片。

5. Colourcode

网址：https://colourco.de/

colourco.de是一款在线设计工具，可以让你非常直观的组合各种颜色。

6. Palettte App

网址：https://palettte.app/

palettte和之前见到的网站不太一样，它是一款色彩编辑和重映射工具，能够帮助你从一个颜色中构建出另外一种颜色，还支持单个颜色的微调

7. Colorinspire

网址：https://www.colorinspire.io/

精选各种色彩灵感，可以马上用在您的设计项目中。

8. ColorSpace

网址：https://mycolor.space/

调色板生成器，以及渐变色工具。只要输入您的颜色，网站马上会生成与之相搭配的渐变色和调色板。

9. Pigment

网址：https://pigment.shapefactory.co/

一种根据光线和颜料生成的清新鲜艳的独特调色板。

10. Adobe Color

网址：https://color.adobe.com/create

这个adobe出品的调色板应该是比较熟悉了，每种颜色方案由五个颜色组成。您可以自己生成，也可以看流行的搭配方案。

11. Colors & Fonts

网址：https://www.colorsandfonts.com/

这是一个为开发者和设计师准备的调色板，渐变色，字体的灵感库。

12. HueSnap

网址：https://www.huesnap.com/

这是一个可以自己创建色彩搭配并与人共享的网站。获取颜色的方式可以读取图片或者自己选择。

13. Culrs

网址：https://culrs.com/

culrs为您提供了一个简单明了的方法来选择调色板。

14. Eva Design System

网址：https://colors.eva.design/

使用深度学习算法生成的调色板。比较赞的是深色模式，可以看颜色在深色背景下的效果。

15. Scale

网址：https://hihayk.github.io/scale/

一种全新的生成颜色的方式。调整两边色颜色，生成中间的混合色。

16. Site Palette

网址：http://palette.site/

一个浏览器插件，可以查看正在访问网页的配色。设计师和前端工程师必备工具。

17. BrandColors

网址：https://brandcolors.net/

集合了500多个不同品牌的官方用色，包含了facebook，Twitter，instagram等。

18. Colorwise

网址：https://colorwise.io/

这个网站在product hunt中的投票最高，应该深受设计师喜欢。

19. HTML Color Codes

网址：https://htmlcolorcodes.com/

使用这个网站可以很容易的为您的网站查找各种颜色的十六进制颜色代码，RGB色值，HSL色值。

20. ColorBox

网址：https://www.colorbox.io/

这是一个生成渐变色色值的工具。

21. Generate — Coolors.co

网址：https://coolors.co/

快速生成各种调色板的网站，您可以保存分享这些配色方案。

22. Color — Cloudflare Design

网址：https://cloudflare.design/color/

用于ui界面设计的调色板工具，可以实时查看背景文字图标选择框的颜色效果。

23. Instant Duotone Effect Generator

网址：https://duotones.co/

上传图片，就能查看图片生成漂亮的双色调效果。网站预设十几种常用的双色调配色工具。

24. Color Tool — Material Design

网址：https://material.io/resources/color/#!/?view.left=0&view.right=0

安卓app界面设计的好帮手，可以为安卓界面创建调色板，并测试颜色搭配的可访问性。

25. Blendy

网址：https://blendy.ml/

这是一个快速预览图片通过css代码实现特效后的效果。您可以复制css代码用在您的设计中。

26. LOL Colors

网址：https://www.webdesignrankings.com/resources/lolcolors/

精选挑选的色彩搭配灵感。

27. Color Hunt

网址：https://colorhunt.co/

Color Hunt是一个免费开放的色彩灵感平台，拥有数千种时尚的手工挑选的色彩搭配调色板。

28. ColorMe

网址：https://colorme.io/

可视化的css颜色调试网站。

29. Polarite

网址：https://www.polarite.app/

Polarite是一款机器学习的颜色生成app，用于生成和谐的配色方案。

30. Gradient Hunt

网址：https://gradienthunt.com/

精选了数千种时尚渐变色的网站，每天更新。

31. Palettable

网址：https://www.palettable.io/4EDED7

自动生成一个一个的颜色，让你选择喜欢或者不喜欢。所有向您展示的颜色都是从数百万设计师挑选中生成的。

32. ColorSpark

网址：https://colorspark.app/

一个非常简单的单色和渐变色随机生成器。

33. SVG Colorizer

网址：https://www.iconshock.com/svg-color/

自动为svg图标和插画配色，这些svg文件可以是网站提供的，也能自己上传。

34. Sip

网址：https://sipapp.io/

适用于Mac的拾色软件，可以收集整理分享各种配色方案。

35. CoolHue 2.0

网址：https://webkul.github.io/coolhue/sketch-plugin/

sketch上使用的渐变色调色板插件。

36. Color Koala

网址：https://colorkoala.xyz/

一个快速生成调色板的工具，可以定义深色，浅色，色系。

37. SchemeColor

网址：https://www.schemecolor.com/

这是一个包含了数千个美丽色彩组合的网站，网站不仅可以查看并下载色彩搭配，还有展示色彩搭配的灵感来源图片。

38. Free Mesh Gradient Collection

网址：https://www.ls.graphics/meshgradients

这是一个生成融合在一起的多种渐变色工具的网站，可以下载sketch，ai，eps，jpg等格式。

39. WebGradients

网址：https://webgradients.com/

由顶级设计师策划的180个渐变色，可以下载sketch格式、psd格式文件，保存png文件，获取css3代码。

40. Gradient Buttons

网址：https://gradientbuttons.colorion.co/

渐变色设计的按钮，并且带悬停效果，可以复制css代码用在您的设计中。

41. ColorKit

网址：https://colorkit.io/

色彩混合工具，混合两种颜色生成多个颜色。

42. Eggradients

网址：https://www.eggradients.com/

金蛋形状展示渐变色，可以复制十六进制色值和css代码。

43. Cool Backgrounds

网址：https://coolbackgrounds.io/

带纹理效果的渐变色背景生成器，可以用于博客，网站，桌面，壁纸背景。

44. Google Art & Culture Experiment — Art Palette

网址：https://artsexperiments.withgoogle.com/artpalette/colors/242726-886c5f-d04b18-dfb24a-d4c5aa

结合艺术与文化的体验探索，通过选择色彩搭配搜索艺术作品。

45. GradPad

网址：http://ourownthing.co.uk/gradpad.html

渐变色生成器，随意挪动两个按钮，在网页中创建可爱的渐变色。

46. Khroma

网址：http://khroma.co/

Khroma是生成，发现，搜索和保存您想要使用的颜色组合和调色板的好工具。

47. Color palettes

网址：https://www.canva.com/colors/color-palettes/

浏览Canva的数千种颜色组合！非设计师专用。

48. Color Safe

网址：http://colorsafe.co/

测试网站的颜色使用的可访问性，让您的网站给美观易用。

49. Paletton

网址：http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

使用色轮创建调色板。

50. Colordot

网址：https://color.hailpixel.com/

非常简单的颜色选择器。

51. Colors

网址：https://klart.io/colors/

100％由数据驱动的配色方案集合。

52. Contrast Ratio

网址：https://contrast-ratio.com/

一款轻松计算颜色对比度的配色工具。

53. Color Lisa

网址：http://www.colorlisa.com/

世界上最伟大的艺术家的色彩杰作。

54. Color Designer

网址：https://colordesigner.io/

只需选择一种颜色，Color Designer就会帮助我们构建一个系统的配色方案，并基于我们所选的颜色生成多种色调和阴影等。

55. Color.review

网址：https://color.review/

用于探索和查找可访问颜色的现代工具。确保每个人都能看到您的作品。

56. Blend

网址：http://www.colinkeany.com/blend/

创建和自定义漂亮的CSS3渐变色。

57. Contrast

网址：https://usecontrast.com/

用于快速访问WCAG色彩对比度的macOS软件。

58. Grabient

网址：https://www.grabient.com/

一个非常漂亮且实用的渐变网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。

这么多的色彩工具就先到这里啦~

如果小伙伴们还发现哪些超赞的配色网站可以留言告诉我们～

在线咨询

上一篇：Html中的空格
下一篇：开发者指南如何在MyEclipse中编辑HTML或JSP文件？（一）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商