資訊專欄INFORMATION COLUMN
摘要：最兼容將使用圖片和繪制結合在一起?？s寫形式，注意的使用也有層級關系。文字屬于里的內容，主要設計的是樣式。小結隨著的發(fā)展，如今這個小并不是解決類似樣式的最佳方式了，但是里面蘊含著滑動門的原理前幾年非常流行的一種方法，參考傳智播客的導航欄。
跟著視頻將 HTML 和 CSS （不包括 HTML5 和 CSS3）全部粗略學習了一遍之后，感覺有必要再系統(tǒng)性地進行一下復習和總結。第一篇文章將會以一個小 demo 來總結一下 background 的用法。
Demo: Buttondemo如下（涉及到本地圖片，因此預覽效果有問題）：
https://jsfiddle.net/ChasonZhang/185mmr99/
效果如下：
按鈕來源（亞馬遜（Amazon）的按鈕樣式）：
看了上面按鈕樣式之后，我想到的解決方案有如下幾種：
background最簡單：直接使用不帶文字的圖片作為按鈕的背景樣式，缺點在于針對不同的按鈕寬度（如上圖登錄按鈕和購買按鈕）需要設計師進行重復的繪制，增加了額外的工作量，且缺乏重用性。
最完美：使用CSS進行繪制： linear-gradient 和 border-radius ，缺乏在于部分低版本IE（具體哪個版本待查證，印象中是 IE8 及以下）不兼容 border-radius。
最兼容：將使用圖片和CSS繪制結合在一起。
background 屬性在第3種方法中得到了充分的利用。
下圖是 w3c 上關于 background 的屬性清單：
經(jīng)過簡單的試驗，可以得出以下幾條結論：
背景圖片默認以原尺寸填充，填充范圍包括盒模型的 padding 和 content 區(qū)域；
背景圖片默認以左上角為原始位置(0, 0)，默認按照從左到右、從上到下的順序**重復填充**，直到填充滿整個填充范圍；
background-image 可以設置 background-size (CSS3) 的值， background-color 不可以；感興趣的話另外兩個 CSS3 新屬性也可以研究一下，不過兼容性都需要 IE9 及以上。
縮寫形式： background: color image position/size repeat origin clip attachment initial|inherit; ，注意 / 的使用；
background 也有層級關系。
blackground 不影響盒模型的寬高，不屬于盒模型的內容（content）。之前的浮動與清浮動系列文章里提到過，塊元素占滿整行，高度由內容撐開。也就是說，在 div 里輸入幾行文字，div 就有多高；但是如果 div 為空（除了背景圖沒有其他文字等內容），那么背景圖就不會顯出來。作為初學者曾經(jīng)跳進過的坑，這一點還是要注意的，插入純背景圖需要對塊級元素設置寬高。但是，如果在 div 中插入 img 元素，那這就完全不是一回事，雖然渲染效果可能一模一樣。
以上幾點，是對 background 基本知識的總結，作為初學者，我以為掌握到這種程度基本上算合格了。
樣式說明：Styling樣式代碼如下：
整個樣式的思路是：
將按鈕分為兩部分：文字+背景。文字屬于 html 里的內容，css主要設計的是樣式。
將背景拆分為三部分，豎直著切三刀，左右分別是帶兩個圓角的小矩形，中間是一段橫長的矩形。
將中間部分繼續(xù)豎起切，切成一條條1像素寬的矩形，然后需要多寬的矩形，就用多少條1px矩形。打個簡單的比方，就是先微分，再積分。
在這個例子中，使用 background 屬性時，需要注意給所有塊級元素設置寬，寬只需要 .btn 設置一次就可以。
布局說明：Coding代碼如下，基本的三層嵌套布局。
加入購物車
知其所以然
在構造這個布局的時候，有一個問題需要明白：
為什么 .btnR 需要放在 .btnL 里面？
.btnL 放在 .btn 里面可以理解，但是 .btnL 和 .btnR 不是并列關系嗎？假設 .btnR 不放在 .btnL 里面，而是與之并列，會出現(xiàn)按鈕背景兩邊圓角部分錯位排列的效果，原因在于兩個塊級元素都有寬高，會分別占據(jù)一行。
隨著 CSS3 的發(fā)展，如今這個小 demo 并不是解決類似樣式的最佳方式了，但是里面蘊含著 **CSS 滑動門**的原理（前幾年非常流行的一種方法，參考傳智播客的導航欄）。當然了，在這里以這個小 demo 為例，主要是為了總結一下 background 的用法。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111109.html
摘要：不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。新增屬性選擇器用于定義元素屬性以開頭的元素的樣式如上所示，標記鏈接為綠色?？梢允菙?shù)字，或關鍵字或公式。 CSS1 中定義的選擇器 類型選擇器 用于選擇指定類型的元素（其實他就是 html 標簽選擇器），常見用法如下： body { /*對 body 元素定義樣式*/ } body,div { ...
摘要：不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。新增屬性選擇器用于定義元素屬性以開頭的元素的樣式如上所示，標記鏈接為綠色。可以是數(shù)字，或關鍵字或公式。 CSS1 中定義的選擇器 類型選擇器 用于選擇指定類型的元素（其實他就是 html 標簽選擇器），常見用法如下： body { /*對 body 元素定義樣式*/ } body,div { ...
摘要：網(wǎng)站性能類似于二八定律，其中的優(yōu)化將帶來網(wǎng)站的性能提升。代碼重用最大的性能缺陷之一是文件大小過大和不必要的瀏覽器呈現(xiàn)。最大程度上減少文件大小的快速方法就是盡可能多地重用樣式。此外，圖像可能被壓縮，刪除任何不必要的注釋和顏色配置文件。 性能與組織 當能夠扎實的理解并編寫HTML和CSS這門專業(yè)知識。隨著網(wǎng)站代碼量和流量的增長，另一種新技能也開始發(fā)揮作用，這對于開發(fā)效率和用戶體驗都至關重要...
摘要：網(wǎng)站性能類似于二八定律，其中的優(yōu)化將帶來網(wǎng)站的性能提升。代碼重用最大的性能缺陷之一是文件大小過大和不必要的瀏覽器呈現(xiàn)。最大程度上減少文件大小的快速方法就是盡可能多地重用樣式。此外，圖像可能被壓縮，刪除任何不必要的注釋和顏色配置文件。 性能與組織 當能夠扎實的理解并編寫HTML和CSS這門專業(yè)知識。隨著網(wǎng)站代碼量和流量的增長，另一種新技能也開始發(fā)揮作用，這對于開發(fā)效率和用戶體驗都至關重要...
閱讀 2205·2021-11-25 09:43
閱讀 1171·2021-11-23 09:51
閱讀 3505·2021-11-23 09:51
閱讀 3633·2021-11-22 09:34
閱讀 1566·2021-10-09 09:43
閱讀 2128·2019-08-30 15:53
閱讀 3168·2019-08-30 14:07
閱讀 577·2019-08-28 18:14
