首頁 web前端 html教學 html的特殊字元-css3 content:'特殊符號'應該如何使用

html的特殊字元-css3 content:'特殊符號'應該如何使用

Jan 20, 2018 am 10:16 AM
content html

这次给大家带来html的特殊字符-css3 content:"特殊符号"应该如何使用,使用html的特殊符号应该如何使用的注意事项有哪些,下面就是实战案例,一起来看一下。

项目中用到的一些特殊字符和图标

html代码

<div class="cross"></div>    
css代码
.cross{    
    width: 20px;    
    height: 20px;    
    background-color: #F3F9FF;    
    border-radius: 10px;    
    border: 1px solid #DBE6EF;    
    display: inline-block;    
    position: relative;    
    bottombottom: 20px;    
    rightright: 15px;    
}    
.cross:after{    
    content: "\2715";//特殊字符或形状    
    color: #a2b6c5;    
    font-size: 12px;    
    position: relative;    
    left: 4px;    
    bottombottom: 3px;    
    cursor: pointer;    
}
登入後複製

就是一个圆圈里面带个叉叉

特殊字符和形状可以省去很多事情,整理了一下网上的,留着以后用


基本形状  ▲ 9650 25B2    ► 9658 25BA    ► 9658 25BA   ▼ 9660 25BC ◄ 9668 25C4    ❤ 10084 2764   ✈ 9992 2708   ★ 9733 2605 ✦ 10022 2726   ☀ 9728 2600     ◆ 9670 25C6   ◈ 9672 25C8 ▣ 9635 25A3

 

标点,特殊符号
« 171 00AB       » 187 00BB        ‹ 139 008B      › 155 009B        “ 8220 201C    ” 8221 201D  ‘ 8216 2018      ’ 8217 2019       • 8226 2022     ◦ 9702 25E6      ¡ 161 00A1       ¿ 191 00BF  ℅ 8453 2105   № 8470 2116     & 38 0026       @ 64 0040         ℞ 8478 211E    ℃ 8451 2103  ℉ 8457 2109   ° 176 00B0         | 124 007C       ¦ 166 00A6     – 8211 2013      — 8212 2014 … 8230 2026   ¶ 182 00B6        ∼ 8764 223C   ≠ 8800 2260
法律符号 
® 174 00AE    © 169 00A9     ℗ 8471 2117     ™ 153 0099     ℠ 8480 2120

 

各种箭头 

⇠ 8672 21E0  ⇢ 8674 21E2  ⇡ 8673 21E1  ⇣ 8675 21E3  ↞ 8606 219E  ↠ 8608 21A0  ↟ 8607 219F  ↡ 8609 21A1  ← 8592 2190  → 8594 2192  ↑ 8593 2191  ↓ 8595 2193  ↔ 8596 2194  ↕ 8597 2195  ⇄ 8644 21C4  ⇅ 8645 21C5  ↢ 8610 21A2  ↣ 8611 21A3  ⇞ 8670 21DE  ⇟ 8671 21DF  ↫ 8619 21AB  ↬ 8620 21AC  ⇜ 8668 21DC  ⇝ 8669 21DD  ↚ 8602 219A  ↛ 8603 219B  ↮ 8622 21AE  ↭ 8621 21AD

形状 
⇦ 8678 21E6  ⇨ 8680 21E8  ⇧ 8679 21E7  ⇩ 8681 21E9  ↷ 8631 21B7  ↶ 8630 21B6  ↻ 8635 21BB  ↺ 8634 21BA  ⟳ 10227 27F3  ⟲ 10226 27F2  ⟰ 10224 27F0  ⟱ 10225 27F1  ↵ 8629 21B5  ↯ 8623 21AF  ⇵ 8693 21F5
向右的箭头 
➔ 10132 2794  ➙ 10137 2799  ➨ 10152 27A8  ➲ 10162 27B2  ➜ 10140 279C  ➞ 10142 279E  ➟ 10143 279F  ➠ 10144 27A0  ➤ 10148 27A4  ➥ 10149 27A5  ➦ 10150 27A6  ➧ 10151 27A7  ➵ 10165 27B5  ➸ 10168 27B8  ➼ 10172 27BC  ➽ 10173 27BD  ➺ 10170 27BA  ➳ 10163 27B3  ➾ 10174 27BE

 

货币 
$ 36 0024  ¢ 162 00A2  £ 163 00A3  ¤ 164 00A4  € 8364 20AC  ¥ 165 00A5  ₱ 8369 20B1  ₹ 8377 20B9

 

數學 
½ 189 00BD  ¼ 188 00BC  ¾ 190 00BE  ⅓ 8531 2153  ⅔ 8532 2154  ⅛ 8539 215B   ‰ 8240 2030  % 37 0025  < 60 003C  > 62 003E 
音樂符號
♩ 9833 2669  ♪ 9834 266A  ♫ 9835 266B  ♬ 9836 266C  ♭ 9837 266D  ♯ 9839  ♭ 9837 266D  ♯ 1399 ☐ 9744 2610  ☑ 9745 2611  ☒ 9746 2612  ✓ 10003 2713  ✔ 10004 2714  ✕ 10005 2715  ✖ 10006 2716  ✗ 10007 2717  ✘ 10008 2718 
十字 
☨ 9768 2628  ☩ 9769 2629  ✝ 10013 271D  ✞ 10014 271E  ✟ 10015 271F  ✠ 10016 2720  ✚ 10010 271A  † 8224 2020  ✢ 10018 2722  ✤ 10020 2724  ✣ 10019 2723  ✥ 10021 2725 
星星、星號、雪花 
★ 9733 2605  ✭ 10029 272D  ✮ 10030 272E  973 10017 2721  ✯ 10031 272F  ✵ 10037 2735  ✶ 10038 2736  ✸ 10040 2738  ✹ 1001 ✸ 10040 2738  ✹ 10011 10042 273A  ✱ 10033 2731  ✲ 10034 2732  ✴ 10036 2734  ✳ 10035 2733  ✻ 100435 59 274B  ❆ 10054 2746  ❄ 10052 2744  ❅ 10053 2745 
雜項 
☻ 9787 263B  1978 2709  ☎ 9742 260E  ☏ 9743 260F  ✆ 9990 2706  � 65533 FFFD  ☁ 9729 2601 65533 FFFD  ☁ 9729 2601 5730 2025 731 2603  ❈ 10056 2748  ✿ 10047 273F  ❀ 10048 2740  ❁ 10049 2741  ☘ 9752 ❁ 10049 2741  ☘ 9752 2618469761  ❂ 10050 2742  ☥ 9765 2625  ☮ 9774 262E  ☯ 9775 262F  ☪ 9770 262A  ☤ 9764 2624  ✄ 9988 2704  ✂ 9986 2702  ☸ 9784 2638  ⚓ 9875 2693  ☣ 9763 2623  ⚠ 9888 26A0  ⚡ 9889 26A1  ☢ 9762 2622  ♻ 9851 267B  ♿ 9855 267F  ☠ 9760 2620 
手型、鉛筆、筆 
☜ 9756 261C  ☞ 9758 261E  ☝ 9757 261D  ☟ 9759 261F  9996 270C9 7759 ✐ 10000 2710  ✏ 9999 270F  ✑ 10001 2711  ✒ 10002 2712 
天空、植物 
☽ 9789 263D  ☾ 9790 263E  ♂ 9794 2642  ♀ 9792 2640  ☿ 9791 263F  ♁ 9793 2641  ♅ 9797 2645  ♆ 9798 2646  ♇ 9799 2647 
98 
♈ 9800 2648  ♉ 9801 26499800 2648  ♉ 9801 26499 ♋ 9803 264B  ♌ 9804 264C  ♍ 9805 264D  ♎ 9806 264E  ♏ 9807 264F  ♑ 9809 26591 2659125 765912655 265912655 265912655 2659152655 2659132655 702655 2659125555335 653 
#象棋,撲克牌 
♚ 9818 265A  ♛ 9819 265B  ♜ 9820 265C  ♝ 9821 265D  ♞ 98225 9823 265F  ♔ 9812 2654  ♕ 9813 2655  ♖ 9814 2656  ♗ 9815 2657  ♘ 9816 26585  ♣ 9827 2663  ♥ 9829 2665  ♦ 9830 2666  ♤ 9828 2664  ♧ 9831 2667  ♡ 98256261 ##Α 913 0391  Β 914 0392  Γ 915 0393  Δ 916 0394  Ε 917 0395  Ζ 918 0396  Ε 917 0395  Ζ 918 0396  Η 919  Κ 922 039A  Λ 923 039B  Μ 924 039C  Ν 925 039D  Ξ 926 039E  Ο 927 039F  926 039E  Ο 927 039F Ρ 929 03A1  Σ 931 03A3  Τ 932 03A4  Υ 933 03A5  Φ 934 03A6  Χ 935 03A7  Φ 934 03A6  Χ 935 03A7  Φ 934 03A6  Χ 935 03A7  Ψ 936 0335#a#11035 Ω#A#。已經掌握了方法,更多精彩請關注php中文網其它相關文章!


相關閱讀:

怎麼用h5的sse伺服器傳送EventSource事件


H5的本機儲存和本機資料庫詳細介紹


h5如何實現記住密碼功能

#

以上是html的特殊字元-css3 content:'特殊符號'應該如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles