整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML 拾色器

          取顏色:或輸入顏色值:OK或使用 HTML5:選擇的顏色:黑色文本陰影白色文本陰影red#ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)hsv(0, 100%, 100%)淡 / 暗:100% #ffffff95% #ffe5e590% #ffcccc85% #ffb3b380% #ff999975% #ff808070% #ff666665% #ff4d4d60% #ff333355% #ff1a1a50% #ff000045% #e6000040% #cc000035% #b3000030% #99000025% #80000020% #66000015% #4d000010% #3300005% #1a00000% #000000

          Hue

          Hue HexRgbHslHsv
          0 #ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)hsv(0, 100%, 100%)
          15 #ff4000rgb(255, 64, 0)hsl(15, 100%, 50%)hsv(15, 100%, 100%)
          30 #ff8000rgb(255, 128, 0)hsl(30, 100%, 50%)hsv(30, 100%, 100%)
          45 #ffbf00rgb(255, 191, 0)hsl(45, 100%, 50%)hsv(45, 100%, 100%)
          60 #ffff00rgb(255, 255, 0)hsl(60, 100%, 50%)hsv(60, 100%, 100%)
          75 #bfff00rgb(191, 255, 0)hsl(75, 100%, 50%)hsv(75, 100%, 100%)
          90 #80ff00rgb(128, 255, 0)hsl(90, 100%, 50%)hsv(90, 100%, 100%)
          105 #40ff00rgb(64, 255, 0)hsl(105, 100%, 50%)hsv(105, 100%, 100%)
          120 #00ff00rgb(0, 255, 0)hsl(120, 100%, 50%)hsv(120, 100%, 100%)
          135 #00ff40rgb(0, 255, 64)hsl(135, 100%, 50%)hsv(135, 100%, 100%)
          150 #00ff80rgb(0, 255, 128)hsl(150, 100%, 50%)hsv(150, 100%, 100%)
          165 #00ffbfrgb(0, 255, 191)hsl(165, 100%, 50%)hsv(165, 100%, 100%)
          180 #00ffffrgb(0, 255, 255)hsl(180, 100%, 50%)hsv(180, 100%, 100%)
          195 #00bfffrgb(0, 191, 255)hsl(195, 100%, 50%)hsv(195, 100%, 100%)
          210 #007fffrgb(0, 127, 255)hsl(210, 100%, 50%)hsv(210, 100%, 100%)
          225 #0040ffrgb(0, 64, 255)hsl(225, 100%, 50%)hsv(225, 100%, 100%)
          240 #0000ffrgb(0, 0, 255)hsl(240, 100%, 50%)hsv(240, 100%, 100%)
          255 #4000ffrgb(64, 0, 255)hsl(255, 100%, 50%)hsv(255, 100%, 100%)
          270 #7f00ffrgb(127, 0, 255)hsl(270, 100%, 50%)hsv(270, 100%, 100%)
          285 #bf00ffrgb(191, 0, 255)hsl(285, 100%, 50%)hsv(285, 100%, 100%)
          300 #ff00ffrgb(255, 0, 255)hsl(300, 100%, 50%)hsv(300, 100%, 100%)
          315 #ff00bfrgb(255, 0, 191)hsl(315, 100%, 50%)hsv(315, 100%, 100%)
          330 #ff0080rgb(255, 0, 128)hsl(330, 100%, 50%)hsv(330, 100%, 100%)
          345 #ff0040rgb(255, 0, 64)hsl(345, 100%, 50%)hsv(345, 100%, 100%)
          360 #ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)hsv(0, 100%, 100%)

          HSL Saturation

          Sat HexRgbHslHsv
          100% #ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)hsv(0, 100%, 100%)
          95% #f90606rgb(249, 6, 6)hsl(0, 95%, 50%)hsv(0, 97%, 98%)
          90% #f20d0drgb(242, 13, 13)hsl(0, 90%, 50%)hsv(0, 95%, 95%)
          85% #ec1313rgb(236, 19, 19)hsl(0, 85%, 50%)hsv(0, 92%, 93%)
          80% #e61919rgb(230, 25, 25)hsl(0, 80%, 50%)hsv(0, 89%, 90%)
          75% #df2020rgb(223, 32, 32)hsl(0, 75%, 50%)hsv(0, 86%, 88%)
          70% #d92626rgb(217, 38, 38)hsl(0, 70%, 50%)hsv(0, 82%, 85%)
          65% #d22d2drgb(210, 45, 45)hsl(0, 65%, 50%)hsv(0, 79%, 83%)
          60% #cc3333rgb(204, 51, 51)hsl(0, 60%, 50%)hsv(0, 75%, 80%)
          55% #c63939rgb(198, 57, 57)hsl(0, 55%, 50%)hsv(0, 71%, 78%)
          50% #bf4040rgb(191, 64, 64)hsl(0, 50%, 50%)hsv(0, 67%, 75%)
          45% #b94646rgb(185, 70, 70)hsl(0, 45%, 50%)hsv(0, 62%, 73%)
          40% #b34d4drgb(179, 77, 77)hsl(0, 40%, 50%)hsv(0, 57%, 70%)
          35% #ac5353rgb(172, 83, 83)hsl(0, 35%, 50%)hsv(0, 52%, 68%)
          30% #a65959rgb(166, 89, 89)hsl(0, 30%, 50%)hsv(0, 46%, 65%)
          25% #9f6060rgb(159, 96, 96)hsl(0, 25%, 50%)hsv(0, 40%, 63%)
          20% #996666rgb(153, 102, 102)hsl(0, 20%, 50%)hsv(0, 33%, 60%)
          15% #936c6crgb(147, 108, 108)hsl(0, 15%, 50%)hsv(0, 26%, 58%)
          10% #8c7373rgb(140, 115, 115)hsl(0, 10%, 50%)hsv(0, 18%, 55%)
          5% #867979rgb(134, 121, 121)hsl(0, 5%, 50%)hsv(0, 10%, 53%)
          0% #808080rgb(128, 128, 128)hsl(0, 0%, 50%)hsv(0, 0%, 50%)

          HSL 淡 / 暗

          Lum HexRgbHslHsv
          100% #ffffffrgb(255, 255, 255)hsl(0, 0%, 100%)hsv(0, 0%, 100%)
          95% #ffe5e5rgb(255, 229, 229)hsl(0, 100%, 95%)hsv(0, 10%, 100%)
          90% #ffccccrgb(255, 204, 204)hsl(0, 100%, 90%)hsv(0, 20%, 100%)
          85% #ffb3b3rgb(255, 179, 179)hsl(0, 100%, 85%)hsv(0, 30%, 100%)
          80% #ff9999rgb(255, 153, 153)hsl(0, 100%, 80%)hsv(0, 40%, 100%)
          75% #ff8080rgb(255, 128, 128)hsl(0, 100%, 75%)hsv(0, 50%, 100%)
          70% #ff6666rgb(255, 102, 102)hsl(0, 100%, 70%)hsv(0, 60%, 100%)
          65% #ff4d4drgb(255, 77, 77)hsl(0, 100%, 65%)hsv(0, 70%, 100%)
          60% #ff3333rgb(255, 51, 51)hsl(0, 100%, 60%)hsv(0, 80%, 100%)
          55% #ff1a1argb(255, 26, 26)hsl(0, 100%, 55%)hsv(0, 90%, 100%)
          50% #ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)hsv(0, 100%, 100%)
          45% #e60000rgb(230, 0, 0)hsl(0, 100%, 45%)hsv(0, 100%, 90%)
          40% #cc0000rgb(204, 0, 0)hsl(0, 100%, 40%)hsv(0, 100%, 80%)
          35% #b30000rgb(179, 0, 0)hsl(0, 100%, 35%)hsv(0, 100%, 70%)
          30% #990000rgb(153, 0, 0)hsl(0, 100%, 30%)hsv(0, 100%, 60%)
          25% #800000rgb(128, 0, 0)hsl(0, 100%, 25%)hsv(0, 100%, 50%)
          20% #660000rgb(102, 0, 0)hsl(0, 100%, 20%)hsv(0, 100%, 40%)
          15% #4d0000rgb(77, 0, 0)hsl(0, 100%, 15%)hsv(0, 100%, 30%)
          10% #330000rgb(51, 0, 0)hsl(0, 100%, 10%)hsv(0, 100%, 20%)
          5% #1a0000rgb(26, 0, 0)hsl(0, 100%, 5%)hsv(0, 100%, 10%)
          0% #000000rgb(0, 0, 0)hsl(0, 0%, 0%)hsv(0, 0%, 0%)

          HSV Saturation

          Sat HexRgbHslHsv
          100% #ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)hsv(0, 100%, 100%)
          95% #ff0d0drgb(255, 13, 13)hsl(0, 100%, 53%)hsv(0, 95%, 100%)
          90% #ff1919rgb(255, 25, 25)hsl(0, 100%, 55%)hsv(0, 90%, 100%)
          85% #ff2626rgb(255, 38, 38)hsl(0, 100%, 57%)hsv(0, 85%, 100%)
          80% #ff3333rgb(255, 51, 51)hsl(0, 100%, 60%)hsv(0, 80%, 100%)
          75% #ff4040rgb(255, 64, 64)hsl(0, 100%, 63%)hsv(0, 75%, 100%)
          70% #ff4d4drgb(255, 77, 77)hsl(0, 100%, 65%)hsv(0, 70%, 100%)
          65% #ff5959rgb(255, 89, 89)hsl(0, 100%, 68%)hsv(0, 65%, 100%)
          60% #ff6666rgb(255, 102, 102)hsl(0, 100%, 70%)hsv(0, 60%, 100%)
          55% #ff7373rgb(255, 115, 115)hsl(0, 100%, 73%)hsv(0, 55%, 100%)
          50% #ff8080rgb(255, 128, 128)hsl(0, 100%, 75%)hsv(0, 50%, 100%)
          45% #ff8c8crgb(255, 140, 140)hsl(0, 100%, 78%)hsv(0, 45%, 100%)
          40% #ff9999rgb(255, 153, 153)hsl(0, 100%, 80%)hsv(0, 40%, 100%)
          35% #ffa6a6rgb(255, 166, 166)hsl(0, 100%, 83%)hsv(0, 35%, 100%)
          30% #ffb3b3rgb(255, 179, 179)hsl(0, 100%, 85%)hsv(0, 30%, 100%)
          25% #ffbfbfrgb(255, 191, 191)hsl(0, 100%, 88%)hsv(0, 25%, 100%)
          20% #ffccccrgb(255, 204, 204)hsl(0, 100%, 90%)hsv(0, 20%, 100%)
          15% #ffd9d9rgb(255, 217, 217)hsl(0, 100%, 93%)hsv(0, 15%, 100%)
          10% #ffe6e6rgb(255, 230, 230)hsl(0, 100%, 95%)hsv(0, 10%, 100%)
          5% #fff2f2rgb(255, 242, 242)hsl(0, 100%, 98%)hsv(0, 5%, 100%)
          0% #ffffffrgb(255, 255, 255)hsl(0, 0%, 100%)hsv(0, 0%, 100%)

          HSV 亮 / 暗

          Value HexRgbHslHsv
          100% #ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)hsv(0, 100%, 100%)
          95% #f20000rgb(242, 0, 0)hsl(0, 100%, 48%)hsv(0, 100%, 95%)
          90% #e60000rgb(230, 0, 0)hsl(0, 100%, 45%)hsv(0, 100%, 90%)
          85% #d90000rgb(217, 0, 0)hsl(0, 100%, 43%)hsv(0, 100%, 85%)
          80% #cc0000rgb(204, 0, 0)hsl(0, 100%, 40%)hsv(0, 100%, 80%)
          75% #bf0000rgb(191, 0, 0)hsl(0, 100%, 38%)hsv(0, 100%, 75%)
          70% #b30000rgb(179, 0, 0)hsl(0, 100%, 35%)hsv(0, 100%, 70%)
          65% #a60000rgb(166, 0, 0)hsl(0, 100%, 33%)hsv(0, 100%, 65%)
          60% #990000rgb(153, 0, 0)hsl(0, 100%, 30%)hsv(0, 100%, 60%)
          55% #8c0000rgb(140, 0, 0)hsl(0, 100%, 28%)hsv(0, 100%, 55%)
          50% #800000rgb(128, 0, 0)hsl(0, 100%, 25%)hsv(0, 100%, 50%)
          45% #730000rgb(115, 0, 0)hsl(0, 100%, 23%)hsv(0, 100%, 45%)
          40% #660000rgb(102, 0, 0)hsl(0, 100%, 20%)hsv(0, 100%, 40%)
          35% #590000rgb(89, 0, 0)hsl(0, 100%, 18%)hsv(0, 100%, 35%)
          30% #4d0000rgb(77, 0, 0)hsl(0, 100%, 15%)hsv(0, 100%, 30%)
          25% #400000rgb(64, 0, 0)hsl(0, 100%, 13%)hsv(0, 100%, 25%)
          20% #330000rgb(51, 0, 0)hsl(0, 100%, 10%)hsv(0, 100%, 20%)
          15% #260000rgb(38, 0, 0)hsl(0, 100%, 8%)hsv(0, 100%, 15%)
          10% #1a0000rgb(26, 0, 0)hsl(0, 100%, 5%)hsv(0, 100%, 10%)
          5% #0d0000rgb(13, 0, 0)hsl(0, 100%, 3%)hsv(0, 100%, 5%)
          0% #000000rgb(0, 0, 0)hsl(0, 0%, 0%)hsv(0, 0%, 0%)

          RGB (Red, Green, Blue)

          RedGreenBlue
          25500

          rgb(255, 0, 0) #ff0000

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          灰色陰影

          有很多細心的小伙伴應該能注意到,在開發的過程中超鏈接,按鈕在按下的時候,在元素身上會出現灰色的陰影,閃爍一下。然而這樣會給用戶體驗帶來不好的影響,對于這個問題到底應該怎么解決?

          解決方法:

          a,input,button{

          -webkit-tap-highlight-color: transparent;

          -webkit-touch-callout: none;

          -webkit-user-select: none;

          }

          2

          按鈕 IOS 下默認樣式

          在開發的過程中按照設計圖給 button 編寫好 css 樣式,在 PC 端進行測試的時候沒有任何異常,但是通過真機測試的時候就會發現自己寫的 css 樣式,被 IOS 的默認樣式給干掉了,和自己想的完全不一樣。

          解決方法:

          input[type="button"],

          input[type="submit"],

          input[type="reset"]{

          appearance: none;

          -webkit-appearance: none;

          }

          textarea{

          appearance: none;

          -webkit-appearance: none;

          }

          主軸(X軸)富余空間管理

          給父級級div添加css樣式

          • -wekit-box-pack:start;

            在主軸開始位置,富余空間在主軸的結束位置

          • -wekit-box-pack:end;

            元素在主軸結束位置,富余空間在主軸的開始位置

          • -wekit-box-pack:center;

            富余空間平均分配,放在元素兩側位置

          • -wekit-box-pack:justify;

            富余空間平均分配在每兩個元素之間

          3. 側軸(Y軸)富余空間管理

          給父級級div添加css樣式

          • -webkit-box-align:star;

            元素在側軸開始位置,富余空間在側軸的結束位置

          • -webkit-box-align:end;

            元素在側軸結束位置,富余空間在側軸的開始位置

          • -wbekit-box-align:center;

            富余空間平均分配,放在元素兩側位置

          這里需要注意嘍,以上所有屬性都是要加給父級的哦,給子元素會沒有任何效果的。

          4. 元素彈性空間

          給子元素添加css樣式

          -webkit-boxt-flex:number;

          更改css屬性

          *{

          margin:0px;

          padding:0px;

          }

          #box {

          height:400px;

          display:-webkit-box;

          background:green;

          }

          #box div {

          width:50px;

          height:50px;

          background:red;

          margin:5px;

          }

          #box div:nth-child(1){

          -webkit-box-flex:1;

          }

          #box div:nth-child(2){

          -webkit-box-flex:2;

          }

          #box div:nth-child(3){

          -webkit-box-flex:3;

          }

          #box div:nth-child(4){

          -webkit-box-flex:4;

          }

          #box div:nth-child(5){

          -webkit-box-flex:5;

          }

          5.HTML5 相應式雖然很強大,但仍然是比較新興的技術,PC 端對與相應式的處理兼容并不是特別的好,IE8 以上的版本才會兼容響應式的處理與兼容。那么IE8 以下版本應該如何做到兼容呢?

          引入遠程兼容 javascript 文件,也可以把 javascript 文件下載到本地進行響應式的兼容

          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

          6.

          移動設備像素比

          說到像素比,那么到底什么是像素比呢?像素比是瀏覽器廠商出產時候對移動設備的設置,把一個像素放大至 N 個像素去顯示,這里的 N = 像素比。我們對像素比的屬性只能獲取,不能對其進行設置。

          舉個栗子 :

          現在有個 div,設置 CSS 屬性,假設當前設備獲取到的像素比為:2

          <div id="box"></div>

          <style type="text/css">

          #box{

          width:100px;

          height:100px;

          background:red;

          }

          </style>

          TML 代碼約定

          很多 Web 開發人員對 HTML 的代碼規范知之甚少。

          在2000年至2010年,許多Web開發人員從 HTML 轉換到 XHTML。

          使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

          而針對于 HTML5 ,我們應該形成比較好的代碼規范,以下提供了幾種規范的建議。

          使用正確的文檔類型

          文檔類型聲明位于HTML文檔的第一行:

          <!DOCTYPE html>

          如果你想跟其他標簽一樣使用小寫,可以使用以下代碼:

          <!doctype html>

          使用小寫元素名

          HTML5 元素名可以使用大寫和小寫字母。

          推薦使用小寫字母:

          • 混合了大小寫的風格是非常糟糕的。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <SECTION>

          <p>這是一個段落。</p>

          </SECTION>

          非常糟糕:

          <Section>

          <p>這是一個段落。</p>

          </SECTION>

          推薦:

          <section>

          <p>這是一個段落。</p>

          </section>

          除此之外,中星小編還介紹4款最受歡迎的HTML5/CSS3應用及代碼,一起來看看吧。

          1、基于HTML5 Canvas的圖表插件Chart.js

          chart.js是一款基于HTML5 Canvas的圖表插件,chart.js的功能非常強大,它不僅提供了常見的柱形圖、折線圖、餅狀圖,而且還提供了環形圖、雷達圖,樣式外觀多樣,圖表的色彩搭配也比較清新。chart.js還有一個特點就是圖表在初始化的時候有彈性動畫特效,這也是HTML5 Canvas的一大功勞。

          柱形圖折線圖餅狀圖環形圖雷達圖極線圖

          2、HTML5 3D動畫柱狀圖表

          這次我們要分享一款很酷的HTML5 3D圖表應用,它是一款柱狀圖表,呈3D的外觀樣式,并且我們可以改變圖表的顏色主題,讓其更加符合你的需求。這款HTML5圖表可以切換需要查看的圖表數據,在切換的時候有不錯的動畫效果,而且,我們還可以切換圖表的大小,以適應不同大小的瀏覽窗口。

          3、CSS3 3D環形進度條 帶進度百分比

          這是一款基于純CSS3的環形進度條,而且,從外觀上看,這款進度條很有3D立體的感覺,尤其是在進度條上有立體的投影,顯得非常小巧迷人。另外,進度條的環形中央帶有進度百分比,可以實時根據進度來更新百分比的數值,和之前分享的HTML5/CSS3扇形進度條動畫相比有一定優勢。

          4、純CSS3垂直Tab菜單 Tab樣式可自定義

          Tab菜單在網頁上使用起來非常方便,也比較節省空間,所以很多門戶網站很喜歡用Tab菜單。今天我們要來分享一款垂直方向的Tab菜單,它是用純CSS3實現的,加載和切換特別靈活。另外,Tab菜單的樣式你可以使用CSS重新定義,擴展很方便。

          、編碼格式:使用UTF-8

          請確保您的編輯器使用的字符編碼為UTF-8,沒有字節順序標記。在html模板或文檔中通過meta來定義編碼格式。

          6、注釋

          根據需要解釋代碼,這個就不多說了,團隊開發這個非常重要,盡管很多時候大家不愿意遵守,但確實重要!

          7、TODO待定項

          尚未實現的或待定的內容一定要標識強調出來,利用TODO辨識,而非其他諸如@@來強調。在todo項中如果有必要列明聯系人,比如負責人。在TODO后追加一個冒號作為行動內容,例如TODO:為網站增加html5模板。


          主站蜘蛛池模板: 日本高清无卡码一区二区久久| 亚洲国产成人一区二区三区| 久久一区不卡中文字幕| 亚洲熟妇AV一区二区三区宅男| 国产精品无码一区二区三区不卡 | 射精专区一区二区朝鲜| 鲁丝丝国产一区二区| 国产成人无码精品一区二区三区| 日本人的色道www免费一区| 亚洲高清美女一区二区三区| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 国产一区视频在线免费观看| 亚洲一区二区三区在线视频| 日本一区二区三区在线视频观看免费| 亚洲一区精彩视频| 美女视频黄a视频全免费网站一区| 精品一区二区久久久久久久网精| 国产日韩精品视频一区二区三区 | 日本一区二区三区在线视频观看免费| 亚洲无删减国产精品一区| 波多野结衣中文字幕一区| 亚洲日韩AV无码一区二区三区人| 无码av免费一区二区三区试看| 久久精品综合一区二区三区| 无码AⅤ精品一区二区三区| 日韩在线视频一区二区三区| 国产福利无码一区在线| 日韩一区二区三区四区不卡| 麻豆一区二区99久久久久| 一区二区三区观看免费中文视频在线播放 | 中文字幕无码免费久久9一区9| 日韩精品一区二区三区视频| 国产一区二区三区免费视频| 国产激情一区二区三区在线观看 | 精品国产一区二区三区| 无码精品一区二区三区| 99精品一区二区三区无码吞精| 国产美女一区二区三区| 亚洲av乱码一区二区三区香蕉| 精品国产伦一区二区三区在线观看| 日韩精品无码中文字幕一区二区|