整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
網(wǎng)絡(luò)上，有序列表可以使您的 HTML 頁(yè)面更有組織、簡(jiǎn)潔且易于閱讀。在本文中，我將向您展示如何在 HTML 中創(chuàng)建高質(zhì)量、有趣的有序列表。您將學(xué)習(xí)如何在平凡的列表中帶來(lái)鮮為人知的＂Wow＂效果。讓我們開始吧！
HTML 中的有序列表（ordered list）使用 <ol> 元素創(chuàng)建，并且對(duì)于每個(gè)列表項(xiàng)使用 <li> 元素。下面是一段有序列表的基本示例：
html<ol>
<li>項(xiàng)目 1</li>
<li>項(xiàng)目 2</li>
</ol>
在上面的示例中，您可以看到列表由 <ol> 元素包圍，每個(gè)列表項(xiàng)使用 <li> 元素表示。
要讓您的有序列表更具吸引力，您可以通過(guò)使用 CSS 進(jìn)行累積 з?熄culation。以下是一些建議：
css1）CSS3 中提供的新選擇器 —— 屬性選擇器：
屬性選擇器就是通過(guò)正則的方式去匹配指定屬性的元素，為其設(shè)置樣式。
在 CSS3 中新增了三種屬性選擇器，如下所示：
選擇器 | 描述 |
E[attr^=“xx”] | 選擇元素 E，其中 E 元素的 attr 屬性是以 xx 開頭的任何字符。 |
E[attr$=“xx”] | 選擇元素 E，其中 E 元素的 attr 屬性是以 xx 結(jié)尾的任何字符。 |
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開發(fā)</a></li>
<li><a href="https://learningnotes.com">學(xué)習(xí)筆記</a></li>
</ul>
</body>
</html>顯示為，
（2）子元素偽類選擇器就是選擇某元素的子元素的一種選擇器。
在 CSS3 中，有以下幾種子元素偽類選擇器：
選擇器 | 描述 |
E:first-child | 選擇元素 E 的第一個(gè)子元素。 |
E:last-child | 選擇元素 E 的最后一個(gè)子元素。 |
E:nth-child(n) | 選擇元素 E 的第 n 個(gè)子元素，n 有三種取值，數(shù)字、odd 和 even。注意第一個(gè)子元素的下標(biāo)是 1。 |
E:only-child | 選擇元素 E 下唯一的子元素。 |
E:first-of-type | 選擇父元素下第一個(gè) E 類型的子元素。 |
E:last-of-type | 選擇父元素下最后一個(gè) E 類型的子元素。 |
E:nth-of-type(n) | 選擇父元素下第 n 個(gè) E 類型的子元素，n 有三種取值，數(shù)字、odd 和 even。 |
E:only-of-type | 選擇父元素唯一的 E 類型的子元素。 |
E:nth-last-child(n) | 選擇所有 E 元素倒數(shù)的第 n 個(gè)子元素。 |
E:nth-last-of-type(n) | 選擇所有 E 元素倒數(shù)的第 n 個(gè)為 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>
顯示效果，
（3）UI 偽類選擇器是通過(guò)元素的狀態(tài)來(lái)選擇的一種選擇器。
在 CSS3 中有以下幾種 UI 偽類選擇器。
選擇器 | 描述 |
:focus | 給獲取焦點(diǎn)的元素設(shè)置樣式。 |
::selection | 給頁(yè)面中被選中的文本內(nèi)容設(shè)置樣式。 |
:checked | 給被選中的單選框或者復(fù)選框設(shè)置樣式。 |
:enabled | 給可用的表單設(shè)置樣式。 |
:disabled | 給不可用的表單設(shè)置樣式。 |
:read-only | 給只讀表單設(shè)置樣式。 |
:read-write | 給可讀寫的表單元素設(shè)置樣式。 |
:valid | 驗(yàn)證有效。 |
:invalid | 驗(yàn)證無(wú)效。 |
練習(xí)一：屬性有效性驗(yàn)證
頁(yè)面上有一個(gè)郵箱輸入框，當(dāng)你的輸入滿足郵箱格式時(shí)，輸入框的背景顏色為綠色；當(dā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>
/*格式錯(cuò)誤*/
input:invalid {
background-color: red;
}
/*格式正確*/
input:valid {
background-color: green;
}
</style>
</head>
<body>
電子郵箱：<input type="email" />
</body>
</html>練習(xí)二：獲得焦點(diǎn)驗(yàn)證
頁(yè)面上有一個(gè)姓名輸入框和一個(gè)密碼輸入框，當(dāng)聚焦輸入框時(shí)，輸入框的背景顏色會(huì)發(fā)生改變，
<!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>練習(xí)：
在前面的內(nèi)容中，我們已經(jīng)學(xué)習(xí)了 CSS3 的選擇器應(yīng)用。我們?cè)谥暗恼鹿?jié)中也做過(guò)橫向?qū)Ш剑@里我們結(jié)合所學(xué)的 CSS3 選擇器來(lái)實(shí)現(xiàn)一個(gè)升級(jí)版的導(dǎo)航。
按以上要求用 HTML 完成以下效果：
解題：
在的網(wǎng)頁(yè)設(shè)計(jì)千篇一律，越來(lái)越多的設(shè)計(jì)師想嘗試更加大膽的色彩搭配，所以我們搜集整理了超齊全的一份包含了58個(gè)色彩工具的網(wǎng)站，app還有插件，幫助您做成更好的設(shè)計(jì)。當(dāng)然這些色彩搭配不是憑空捏造出來(lái)的，而是從各個(gè)地方獲取來(lái)的靈感，結(jié)合色彩心理學(xué)，這些搭配不僅好看，還符合您更高層次的情感需求。
1.Muzli colors
網(wǎng)址：https://colors.muz.li/
使用此工具可以快速創(chuàng)建編輯調(diào)色板，最大的特點(diǎn)是可以根據(jù)您創(chuàng)建的色彩搭配直接在app設(shè)計(jì)模板上預(yù)覽，并且還能下載。
2. Colorable
網(wǎng)址：https://colorable.jxnblk.com/
這個(gè)工具主要查看字體顏色和背景顏色的對(duì)比效果。
3. Color Leap — History’s Palettes
網(wǎng)址：https://colorleap.app/home
這個(gè)工具可以搜素過(guò)去四千年以來(lái)使用的180個(gè)調(diào)色板。
4. Picular
網(wǎng)址：https://picular.co/
這是一個(gè)顏色搜索工具，只要輸入搜索的關(guān)鍵詞，就能像google一樣展示相關(guān)的顏色，可以復(fù)制色號(hào)和查看使用該顏色的圖片。
5. Colourcode
網(wǎng)址：https://colourco.de/
colourco.de是一款在線設(shè)計(jì)工具，可以讓你非常直觀的組合各種顏色。
6. Palettte App
網(wǎng)址：https://palettte.app/
palettte和之前見(jiàn)到的網(wǎng)站不太一樣，它是一款色彩編輯和重映射工具，能夠幫助你從一個(gè)顏色中構(gòu)建出另外一種顏色，還支持單個(gè)顏色的微調(diào)
7. Colorinspire
網(wǎng)址：https://www.colorinspire.io/
精選各種色彩靈感，可以馬上用在您的設(shè)計(jì)項(xiàng)目中。
8. ColorSpace
網(wǎng)址：https://mycolor.space/
調(diào)色板生成器，以及漸變色工具。只要輸入您的顏色，網(wǎng)站馬上會(huì)生成與之相搭配的漸變色和調(diào)色板。
9. Pigment
網(wǎng)址：https://pigment.shapefactory.co/
一種根據(jù)光線和顏料生成的清新鮮艷的獨(dú)特調(diào)色板。
10. Adobe Color
網(wǎng)址：https://color.adobe.com/create
這個(gè)adobe出品的調(diào)色板應(yīng)該是比較熟悉了，每種顏色方案由五個(gè)顏色組成。您可以自己生成，也可以看流行的搭配方案。
11. Colors & Fonts
網(wǎng)址：https://www.colorsandfonts.com/
這是一個(gè)為開發(fā)者和設(shè)計(jì)師準(zhǔn)備的調(diào)色板，漸變色，字體的靈感庫(kù)。
12. HueSnap
網(wǎng)址：https://www.huesnap.com/
這是一個(gè)可以自己創(chuàng)建色彩搭配并與人共享的網(wǎng)站。獲取顏色的方式可以讀取圖片或者自己選擇。
13. Culrs
網(wǎng)址：https://culrs.com/
culrs為您提供了一個(gè)簡(jiǎn)單明了的方法來(lái)選擇調(diào)色板。
14. Eva Design System
網(wǎng)址：https://colors.eva.design/
使用深度學(xué)習(xí)算法生成的調(diào)色板。比較贊的是深色模式，可以看顏色在深色背景下的效果。
15. Scale
網(wǎng)址：https://hihayk.github.io/scale/
一種全新的生成顏色的方式。調(diào)整兩邊色顏色，生成中間的混合色。
16. Site Palette
網(wǎng)址：http://palette.site/
一個(gè)瀏覽器插件，可以查看正在訪問(wèn)網(wǎng)頁(yè)的配色。設(shè)計(jì)師和前端工程師必備工具。
17. BrandColors
網(wǎng)址：https://brandcolors.net/
集合了500多個(gè)不同品牌的官方用色，包含了facebook，Twitter，instagram等。
18. Colorwise
網(wǎng)址：https://colorwise.io/
這個(gè)網(wǎng)站在product hunt中的投票最高，應(yīng)該深受設(shè)計(jì)師喜歡。
19. HTML Color Codes
網(wǎng)址：https://htmlcolorcodes.com/
使用這個(gè)網(wǎng)站可以很容易的為您的網(wǎng)站查找各種顏色的十六進(jìn)制顏色代碼，RGB色值，HSL色值。
20. ColorBox
網(wǎng)址：https://www.colorbox.io/
這是一個(gè)生成漸變色色值的工具。
21. Generate — Coolors.co
網(wǎng)址：https://coolors.co/
快速生成各種調(diào)色板的網(wǎng)站，您可以保存分享這些配色方案。
22. Color — Cloudflare Design
網(wǎng)址：https://cloudflare.design/color/
用于ui界面設(shè)計(jì)的調(diào)色板工具，可以實(shí)時(shí)查看背景文字圖標(biāo)選擇框的顏色效果。
23. Instant Duotone Effect Generator
網(wǎng)址：https://duotones.co/
上傳圖片，就能查看圖片生成漂亮的雙色調(diào)效果。網(wǎng)站預(yù)設(shè)十幾種常用的雙色調(diào)配色工具。
24. Color Tool — Material Design
網(wǎng)址：https://material.io/resources/color/#!/?view.left=0&view.right=0
安卓app界面設(shè)計(jì)的好幫手，可以為安卓界面創(chuàng)建調(diào)色板，并測(cè)試顏色搭配的可訪問(wèn)性。
25. Blendy
網(wǎng)址：https://blendy.ml/
這是一個(gè)快速預(yù)覽圖片通過(guò)css代碼實(shí)現(xiàn)特效后的效果。您可以復(fù)制css代碼用在您的設(shè)計(jì)中。
26. LOL Colors
網(wǎng)址：https://www.webdesignrankings.com/resources/lolcolors/
精選挑選的色彩搭配靈感。
27. Color Hunt
網(wǎng)址：https://colorhunt.co/
Color Hunt是一個(gè)免費(fèi)開放的色彩靈感平臺(tái)，擁有數(shù)千種時(shí)尚的手工挑選的色彩搭配調(diào)色板。
28. ColorMe
網(wǎng)址：https://colorme.io/
可視化的css顏色調(diào)試網(wǎng)站。
29. Polarite
網(wǎng)址：https://www.polarite.app/
Polarite是一款機(jī)器學(xué)習(xí)的顏色生成app，用于生成和諧的配色方案。
30. Gradient Hunt
網(wǎng)址：https://gradienthunt.com/
精選了數(shù)千種時(shí)尚漸變色的網(wǎng)站，每天更新。
31. Palettable
網(wǎng)址：https://www.palettable.io/4EDED7
自動(dòng)生成一個(gè)一個(gè)的顏色，讓你選擇喜歡或者不喜歡。所有向您展示的顏色都是從數(shù)百萬(wàn)設(shè)計(jì)師挑選中生成的。
32. ColorSpark
網(wǎng)址：https://colorspark.app/
一個(gè)非常簡(jiǎn)單的單色和漸變色隨機(jī)生成器。
33. SVG Colorizer
網(wǎng)址：https://www.iconshock.com/svg-color/
自動(dòng)為svg圖標(biāo)和插畫配色，這些svg文件可以是網(wǎng)站提供的，也能自己上傳。
34. Sip
網(wǎng)址：https://sipapp.io/
適用于Mac的拾色軟件，可以收集整理分享各種配色方案。
35. CoolHue 2.0
網(wǎng)址：https://webkul.github.io/coolhue/sketch-plugin/
sketch上使用的漸變色調(diào)色板插件。
36. Color Koala
網(wǎng)址：https://colorkoala.xyz/
一個(gè)快速生成調(diào)色板的工具，可以定義深色，淺色，色系。
37. SchemeColor
網(wǎng)址：https://www.schemecolor.com/
這是一個(gè)包含了數(shù)千個(gè)美麗色彩組合的網(wǎng)站，網(wǎng)站不僅可以查看并下載色彩搭配，還有展示色彩搭配的靈感來(lái)源圖片。
38. Free Mesh Gradient Collection
網(wǎng)址：https://www.ls.graphics/meshgradients
這是一個(gè)生成融合在一起的多種漸變色工具的網(wǎng)站，可以下載sketch，ai，eps，jpg等格式。
39. WebGradients
網(wǎng)址：https://webgradients.com/
由頂級(jí)設(shè)計(jì)師策劃的180個(gè)漸變色，可以下載sketch格式、psd格式文件，保存png文件，獲取css3代碼。
40. Gradient Buttons
網(wǎng)址：https://gradientbuttons.colorion.co/
漸變色設(shè)計(jì)的按鈕，并且?guī)彝ＰЧ梢詮?fù)制css代碼用在您的設(shè)計(jì)中。
41. ColorKit
網(wǎng)址：https://colorkit.io/
色彩混合工具，混合兩種顏色生成多個(gè)顏色。
42. Eggradients
網(wǎng)址：https://www.eggradients.com/
金蛋形狀展示漸變色，可以復(fù)制十六進(jìn)制色值和css代碼。
43. Cool Backgrounds
網(wǎng)址：https://coolbackgrounds.io/
帶紋理效果的漸變色背景生成器，可以用于博客，網(wǎng)站，桌面，壁紙背景。
44. Google Art & Culture Experiment — Art Palette
網(wǎng)址：https://artsexperiments.withgoogle.com/artpalette/colors/242726-886c5f-d04b18-dfb24a-d4c5aa
結(jié)合藝術(shù)與文化的體驗(yàn)探索，通過(guò)選擇色彩搭配搜索藝術(shù)作品。
45. GradPad
網(wǎng)址：http://ourownthing.co.uk/gradpad.html
漸變色生成器，隨意挪動(dòng)兩個(gè)按鈕，在網(wǎng)頁(yè)中創(chuàng)建可愛(ài)的漸變色。
46. Khroma
網(wǎng)址：http://khroma.co/
Khroma是生成，發(fā)現(xiàn)，搜索和保存您想要使用的顏色組合和調(diào)色板的好工具。
47. Color palettes
網(wǎng)址：https://www.canva.com/colors/color-palettes/
瀏覽Canva的數(shù)千種顏色組合！非設(shè)計(jì)師專用。
48. Color Safe
網(wǎng)址：http://colorsafe.co/
測(cè)試網(wǎng)站的顏色使用的可訪問(wèn)性，讓您的網(wǎng)站給美觀易用。
49. Paletton
網(wǎng)址：http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
使用色輪創(chuàng)建調(diào)色板。
50. Colordot
網(wǎng)址：https://color.hailpixel.com/
非常簡(jiǎn)單的顏色選擇器。
51. Colors
網(wǎng)址：https://klart.io/colors/
100％由數(shù)據(jù)驅(qū)動(dòng)的配色方案集合。
52. Contrast Ratio
網(wǎng)址：https://contrast-ratio.com/
一款輕松計(jì)算顏色對(duì)比度的配色工具。
53. Color Lisa
網(wǎng)址：http://www.colorlisa.com/
世界上最偉大的藝術(shù)家的色彩杰作。
54. Color Designer
網(wǎng)址：https://colordesigner.io/
只需選擇一種顏色，Color Designer就會(huì)幫助我們構(gòu)建一個(gè)系統(tǒng)的配色方案，并基于我們所選的顏色生成多種色調(diào)和陰影等。
55. Color.review
網(wǎng)址：https://color.review/
用于探索和查找可訪問(wèn)顏色的現(xiàn)代工具。確保每個(gè)人都能看到您的作品。
56. Blend
網(wǎng)址：http://www.colinkeany.com/blend/
創(chuàng)建和自定義漂亮的CSS3漸變色。
57. Contrast
網(wǎng)址：https://usecontrast.com/
用于快速訪問(wèn)WCAG色彩對(duì)比度的macOS軟件。
58. Grabient
網(wǎng)址：https://www.grabient.com/
一個(gè)非常漂亮且實(shí)用的漸變網(wǎng)站，支持 CSS 樣式代碼復(fù)制、360度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。
這么多的色彩工具就先到這里啦~
如果小伙伴們還發(fā)現(xiàn)哪些超贊的配色網(wǎng)站可以留言告訴我們～
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
