整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
如果網頁只有一種顏色，那是非常可怕的，顏色的設置豐富了網頁，就如同多彩繽紛的世界。
在了解css顏色之前，我們回顧下計算機是如何顯示顏色的？計算機根據色光三原色的原理通過各種算法來顯示顏色。
網頁中使用顏色關鍵字、16進制字符、rgb、rgba等表示紅，綠，藍三種顏色混合色，如下示例,幾種寫法都是指同一個顏色（紅色）：
color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)對于16進制形式，每2位表示一個顏色，從左到右分別是紅、綠、藍，每種顏色取值從00 到 FF。
如下示例：
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍色*/對于rgb的表示法，由三個參數組成，分別是紅、綠、藍，每種顏色取值從0 到 255。
如下示例：
color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍色*/紅，綠，藍值從0到255的結合，給出了總額超過1600多萬不同的顏色（256 × 256 ×256）。
但是現代大多數顯示器能夠顯示至少16384種顏色。所以在使用顏色時要格外注意，避免設置不能夠顯示的顏色，可以參考網頁安全色：https://www.w3school.com.cn/cssref/css_colors.asp。
顏色除了有三原色紅綠藍組成，還有亮度層級，如下圖：
rgba 中的a是指透明度，這個是css3新增加的屬性，通過rgba可以設置更加漂亮的顏色。
通過background屬性可以設置元素的背景色、背景圖片，語法如下：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;background 在一個聲明中設置所有的背景屬性，可以在這里設置如下屬性：
各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個值。
建議使用background 簡寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當然你也可以分開使用，比如：
background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;1、背景顏色 —— background-color
background-color 和之前講的的color 一樣，可以使用16進制、rgb、rgba等設置顏色。如下實例：
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>如下圖顯示：
注意：background-color: transparent; 指透明色，不顯示任何顏色。
2、背景圖片的使用——background-image
給html元素添加背景圖片，在早期網頁制作中被廣泛應用，如今已不建議大量使用。如下實例：
body {background-image:url(/static/bg.gif);}這里使用了一個125*125大小的圖片，如下：
但是你會發現，整個網頁鋪滿了圖片，上面的代碼默認會鋪滿整個頁面從左到右，從上到下 。如果不想被平鋪，可以使用background-repeat 設置。
背景圖片同時可以設置多個背景圖片，如下：
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);多個圖像以逗號隔開，在頁面中多個圖片會疊加顯示，第一張圖片顯示在最頂端。
如下效果：
3、背景重復方式 —— background-repeat
它有如下幾個屬性：
repeat | 默認。背景圖像將在垂直方向和水平方向重復。 |
repeat-x | 背景圖像將在水平方向重復。 |
repeat-y | 背景圖像將在垂直方向重復。 |
no-repeat | 背景圖像不重復。 |
inherit | 從父元素繼承 background-repeat 屬性的設置。 |
實例如下：
4、背景圖的位置 —— background-position
背景圖片默認顯示在左上角，語法如下：
background-position: x y; // x 距離左邊距離，y距離頂部距離如果要改變它的位置，可以使用關鍵字：top、bottom、left、right 和 center；或者使用長度值，如 100px 或 5cm；也可以使用百分數值。
x 可以取值 百分比| 數值| left | center | right。
y 可以取值 百分比| 數值| top| center | bottom。
當只設置一個值的時候，另一個會缺省為 center。
使用關鍵字，將背景圖片水平居中，垂直居中：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 使用百分比%：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 50% 50% 等同于 center center，顯示效果和上圖一樣。
還可以使用具體數值，比如 px、em、cm等。
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 顯示效果如下：
5、背景圖相對于容器的基準點 —— background-origin
就是設置背景圖片相對于html元素什么位置作為初始坐標點，語法：
background-origin: padding-box|border-box|content-box;幾種值得含義：
padding-box | 背景圖像相對填充框的位置 |
border-box | 背景圖像相對邊界框的位置 |
content-box | 背景圖像相對內容框的位置 |
如下實例：
6、背景圖片大小 —— background-size
默認會顯示背景圖原始尺寸，可以通過此屬性設置背景圖片在元素上的大小，語法：
background-size: width height;寬度和高度可以使用 數值、百分比%、cover 及 contain ;
數值：可以使用任何單位的數字，比如 px、em、cm等。如果設置一個值，第二個為"auto(自動)"。
百分比%：相對于其所在html原始寬度和高度，如果設置一個值，第二個為"auto(自動)"。
cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain：把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
如下示例：
7、背景圖像是否固定或者隨著頁面的其余部分滾動
background-attachment 屬性有以下幾個值：
scroll | 背景圖片隨頁面的其余部分滾動。這是默認 |
fixed | 背景圖像是固定的 |
inherit | 指定background-attachment的設置應該從父元素繼承 |
local | 背景圖片隨滾動元素滾動 |
如設置一個固定的背景圖片，不跟隨頁面滾動：
background-attachment:fixed;滾動滾動條，會發下背景圖片始終固定在屏幕那個位置。
8、背景繪制區域 —— background-clip
語法如下：
background-clip: border-box|padding-box|content-box;border-box | 默認值。背景繪制在邊框方框內（剪切成邊框方框）。 |
padding-box | 背景繪制在襯距方框內（剪切成襯距方框）。 |
content-box | 背景繪制在內容方框內（剪切成內容方框）。 |
這個屬性類似于 background-origin ，只不過它會裁剪背景圖片，如下示例：
9、背景層的混合模式 —— background-blend-mode
所謂混合模式就是將圖片與顏色或圖片與圖片進行混合，語法：
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;屬性值：
示例如下：
正常模式
luminosity 亮度模式
color 顏色模式
其它模式可以自己試試，看下有什么區別。
到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡寫也可以分開寫，要想完全掌握，還得多練習，每種屬性進行組合使用看看其效果。
一般建議使用 background 簡寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯誤，并補充。
上篇：前端入門——css鏈接樣式
眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數據 區塊鏈 測試 PPT JS(40g+300教程) HTML 簡歷 領取相關學習資料！
一、HTML
1、<image>標簽上title屬性與alt屬性的區別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》
2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體
加粗：<b>、<strong>
下標：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標簽列表》
3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景
section：定義文檔中的一個章節
nav：定義只包含導航鏈接的章節
header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
參考《HTML5 標簽列表》
4、請說說你對標簽語義化的理解？
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
6、你知道多少種Doctype文檔類型？
標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，
Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。
7、HTML與XHTML——二者有什么區別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關閉。
c. 標簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
h. sessionStorage 的數據在頁面會話結束時會被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術webworker, websocket等
移除的元素：
a. 純表現的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產生負面影響的元素：frame，frameset，noframes；
9、iframe的優缺點？
優點：
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區別？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有布局、樣式解析和腳本執行三個方面的區別。
a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用
d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
11、請闡述table的缺點
a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td
c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂
d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好？》
12、簡述一下src與href的區別
src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接
公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據 區塊鏈 測試 PPT JS HTML 簡歷 領取相關學習資料！
為室內設計師的你
是不是時常對配色感到頭疼呢？
覺得配色難或是花費時間大？
今天蘭姨來分享幾個
好用的色彩搭配網站
大家收藏效果更佳~
https://uigradients.com/
Uigradients是以漸變色彩為主的網站，里面接近上百種漸變配色方案，可根據自己風格來選擇搭配，點擊左上角，就可以瀏覽所有的配色圖，點擊你喜歡的圖片就可以查看大圖，右上角有免費下載的按鈕，選好你喜歡的配色就可以直接下載，還可以分享到你的社交賬號。
https://color.adobe.com/zh/
Adobe color 是一家在線色輪，提供RGB、CMYK、LAB、SHB、HEX五種色彩模式，非常人性化，用戶可以根據自己的配色要求進行實時搭配，是配色的絕佳去處。
Nipponcolors
Nipponcolors日本傳統配色網站，網站直接給出了各種顏色的CMYK值，RGB值，以色卡的形式呈現，當你點擊某個顏色的色卡時，整個網頁都會變成成你選擇的這個顏色，方便我們查看這種顏色是否適合大面積的使用。
http://www.flatuicolorpicker.com/
Flat Design應該是設計師們必不可少的一個網站，這個網站能夠進行顏色自動分類。
http://colorhunt.co/
該網站是以四色搭配板塊展現的，還可以通過PS拾取色彩信息。
http://www.peise.net
中文的配色網，內有許多色彩知識提供學習。有HEX、RGB、CMYK三種模式，可以下載應用到:Photoshop/AI 網頁端:HTML/CSS。
https://www.materialpalette.com/
Material Palette是一款提供Material Design配色的線上工具，它的用法很簡單，你只要找出想要搭配的兩種顏色，它就會顯示出兩種顏色搭配在一起的效果預覽，并提供你較深或較淺的顏色選項，以及其他你可能會用到的顏色代碼。
Coolors
Coolors是一個可以讓你簡單快速地選色生成工具，為你找出配色的靈感，該網站每次會為你挑選由五種顏色組合而成的調色盤，并顯示顏色的代碼，你可以快速選取使用，或是鎖定其中的幾種顏色。
http://zhongguose.com/
這是國內相對較好的色彩搭配網站了，提供RGB和CMYK兩種色彩模式，十分有中國特色。
Skala Color
Skala Color是一款為設計師和開發者而生的優質取色工具。這款取色器小巧簡潔但功能豐富，適用于OS X系統，支持大量的格式（如十六進制、CSS的RGBA模式或HSL模式、UIColor亦或是NSColor等等），在web、iOS、Android、或OS X開發商都能勝任。
https://colordrop.io/
四宮格配色，點一個就能顯示四個的色號，直接復制到ps或者是AI，使用起來非常方便。
http://webgradients.com
這里有很多漸變色的運用，有時候腦袋卡殼了，可以在這里尋找顏色的靈感。
https://color.hailpixel.com/
Color by Hailpixel這個網站可以調整色調、亮度、飽和度等等，使用起來十分便捷。
http://colrd.com/
這個網站可以根據顏色、漸變、調色板等尋找圖像資料。
ColorHexa
它能幫助我們擴展這個色彩，搭配出數種方案，甚至還有色盲修正方案。如果你只能確定一個必須使用的顏色，選擇這個工具或許能獲得一些靈感。
Color Scheme Designer
這是一個在線的配色工具，相比于Adobe color ，它擁有詳細的色彩修改方法，和簡單的顏色演示工具。國內有個舊版本的漢化版，不過還是建議去官網使用最新的。
LOL Colors
這是一個非常簡潔，但非常好用的配色網站，設計師們可以在這里找到很多色彩組合，把鼠標移動到不同顏色的水滴上會提示色彩代碼(Hex Code)的顏色值。
Colorfavs
用戶只需要把一張圖片上傳到網站上，系統會自動分析圖片里的顏色，并生成色系值，系統根據圖片推測你喜歡的色盤搭配。
http://www.colourlovers.com/
色彩社區不僅可以配色，還可以共享他人的色彩，共同切磋學習。
https://brandcolors.net/
該網站總結各企業品牌主打的配色，從里面找尋家居配色靈感也是不錯的選擇。
今天就分享到這啦，希望以上的配色網站能夠激發你們配色靈感，在設計的時候，不再讓配色成為你煩惱所在！
該文為原創內容
未經授權不得隨意轉載
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
