首頁 > web前端 > 前端問答 > css Blueprint是什麼

css Blueprint是什麼

青灯夜游
發布: 2023-01-04 09:38:01
原創
2456 人瀏覽過

Blueprint是一個css框架,它將佈局(layout)、排版(typography)、元件 (widget)、重置 (reset)、列印 (print) 等分放到不同的CSS檔案中。

css Blueprint是什麼

本教學操作環境:windows7系統、Dell G3電腦。

推薦:css影片教學

Blueprint (CSS框架)

Blueprint 是CSS框架,目的是減少你的CSS開發時間了。它給你的CSS了堅實的基礎,具有易於使用的網格的基礎上最高的項目,合理的排版,甚至打印樣式表。

在設計網頁時要以 Blueprint 為指導,然後再設計或產生 HTML,以便將 Blueprint CSS 樣式套用至 HTML 元素。實際上,由於 Blueprint 提供了強大的 CSS,因此可以在 HTML中設計網頁,而不必使用圖像設計程式來模擬最終頁面,例如 photoshop。從某個意義上說,Blueprint 提供了真正的所見即所得的(WYSIWYG)網頁設計,因為原型將使用與最終網站相同的程式碼。

此外,由於 Blueprint 的主要作用是類比列印頁的外觀,因此使用 Blueprint 進行互動式的設計的感覺更像是在使用 QuarkXPress 或 AdobeInDesign。 Blueprint 樣式是基於像素和一個 18 像素的基線網格。借助設計天賦和努力,可以創建具有專業外觀的頁面。

樣式範例

Blueprint 的預設網格是950 像素寬,分成24 個由10 像素分隔線隔開的30 像素寬的列:[( 24 列* 30 像素/列) (23 分隔線* 10 像素/分隔線) = 950 像素]。如果偏好或需要更寬或更窄的網格或不同的列寬,Blueprint 提供了一個 Ruby 工具用於將 Blueprint 重新產生到需要的規格中。 Ruby 工具還創建了一個網格圖像,可以在 Photoshop中引用,並且壓縮了最終的CSS以減小檔案大小,從而縮短了傳輸時間和頻寬。

通常,不應該編輯 Blueprint CSS 檔案。而是應該在一個單獨的檔案定義自己的樣式,並根據需要覆蓋 Blueprint 程式碼。這是最後一個檔案 css/custom.css 的作用,這個檔案是作為程式碼的一部分創建和維護的。

css Blueprint是什麼

更多程式相關知識,請造訪:程式設計課程! !

以上是css Blueprint是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板