葵司免费一区二区三区四区五区_久久九九久久九九_国产精品户外野外_亚洲免费在线精品一区

鄭州網站建設網頁設計在本質上就是一個進化的原則和理論創造的演化過程中打印。設計行業帶來了很多的技術網絡,但是一些花的時間掌握在一個虛擬環境。不幸的是,我們沒有一個單一的平臺為我們的內容出現在;我們必須戰斗與多個瀏覽器,操作系統,屏幕尺寸。

隨著網絡的發展,所以我們觀察到的設計原則。基于網格的設計有玫瑰近年來,即把他們的網站設計者可以根據一個圓柱狀的網格。網格系統是一個非常受歡迎的方法來組織和排列元素,并添加到一個頁面,一般命令通過應用比例和平衡。

把我們的知識的使用比例和平衡,你可以采用另一個印刷設計原則:基線網格。

鄭州網站建設-什么是基線網格嗎?

基線網格技術用于更好的你的基于web的排版。從本質上講,它使你所有的文本垂直網格,每個字母的底部被放置到電網,就像寫在橫格紙。最終的結果是一個身體的文字完美的組織,一個潛意識的識別的平衡��調和。

就像我以前說的,印刷是一個靜態的介質。設計一個打印格式允許您指定什么你所有的觀眾將會看到。然而,由于你的設計可替代平臺web上的解釋,你的CSS將不可避免地呈現你的行高,和其他印刷上的值,對于不同的用戶有不同的。對于很多設計師,這原來只是猜測和預測最終用戶將看到。

基線網格在打印

許多印刷設計師使用基線網格結合自己的設計套件,無論是排版軟件名稱或其他。網格在打印一直追溯到1200年代早期,不受限制的只是網頁設計。事實上,從網格的黃金比例(即大多數數學理論)是共享在生活的其他方面,最明顯的是架構。

網格可以把所有的設計元素——類型字符,攝影,繪畫和色彩——變成一個正式的關系,彼此;也就是說,網格系統是一種手段,引入秩序設計。一個故意設計組成一個更清晰,更整齊的排列和更成功的效果比隨機廣告放在一起。-約瑟夫·穆勒布羅克曼

鄭州網站建設-創建一個基線網格

現在,讓我們看看我們如何創建我們的基線網格。

首先,我們需要定義一個行高為基線網格基于比率與我們的字體大小,對于這個示例,1:1 5是一個很好的數量,提供我們一個慷慨的50%領先。如果我們有一個文本大小12 px,行高(使用這個1:1 5比)將18 px。150%是一個不錯的數量,給我們提供了一個設計,將很容易閱讀,但是這個值可以不同。然而,你應該盡量約130%的范圍-160%當考慮行高。

在我們繼續之前,你應該知道如何CSS屬性實際上作品行高。行高的是整體的、集體的高度行文本,而不是文本本身。它通過添加填充上面和下面的文本空間出來。如果我們真的需要一些文本和把它放在一個統治的背景,我們會看到文本定位在字里行間,��一定在他們。

到CSS

為了使事情簡單,我們假設我們的文本有一個基地大小為10 px。堅持我們的粗糙的比率,這意味著我們的行高將15 px,雖然我們可以改變這個。(做一個邊注,10 px是相當小的,我不一定會推薦它在大多數情況下,但我在這里用它純粹是為了使他們更容易在數學系)。為了使各種元素融入我們的基線網格系統,我們需要設置在我們的CSS。

在我們繼續下去之前,雖然,這些示例假設您使用的是某種CSS重置。如果你沒有,那么默認的利潤率可能會妨礙我們的工作今天做。

段落

開始做事了,一旦我們設置行高,我們需要配��一致的保證金在每個標題和段落。因為我們正在與一個15像素網格這里,我們踢做事了覆蓋標準的底部邊緣的一個段落標記(默認情況下,這是1 em,在這種情況下將10 px)來同我們的行高在文本。這將創建一個空行每一段下成比例,等于身高如果文本在那里居住。

頭

相似,因為標題,我們只是需要繼續遵守增量15像素。通過簡單的標簽在我們的保證金一邊150%行高,我們創建一個類似的、一致的打破。

我走之前任何進一步的,我想說的是你的文字可能不總是實際上坐在線,如果你申請一個你的背景。不要擔心,只要線高度是一樣的。如果你的文本漂浮在中間的線,你可以很容易地玩耍和你的利潤,但這不是必要的。

鄭州網站建設-列表

接下來,我們如何處理列表嗎?首先,我們要運用我們的標準保證金以同樣的方式,我們做我們的段落。這給了一個水平的一致性與內容。

這是開始變得容易了!如果你仍然有一個行高15像素定義在其他地方,你的列表將會適應得很好與其他內容。

圖像

圖片是在它開始變得有點困難。最好是,我們要有相同的一致性在我們的利潤率,因此圖像都是以同樣的方式對待的仿佛一塊文本。它意味著,你的圖片需要大小的倍數你行高價值,在這種情況下,15。

在我的例子中,我將向右浮動的形象,所以我有一個15像素邊緣應用到左邊和底部。與我們現有的保證金在段落,這給了我們一個一致的保證金等于我們余下的基線網格。

當然,這些并不是唯一的因素,我們需要修改以符合我們的新基線網格。關鍵是要確保你的工作在一個一致的增量,所以一切都是狹隘的,相同的網格。這可以導致和諧和平衡變得明顯在你的網頁在使用大量豐富的文本。

我們的示例

這是我們完成的例子,一個簡單的網頁標題、段落、特色一個圖像和一個列表。如果你想走出你的尺子,你可以,但我可以向你保證,一切遵循一致的網格,建立從我們的排版。

我們只是剛剛打破了表面使用基線網格。它可以變得更為困難當你開始試圖將它們應用到更復雜的設計,最終導致一些在網絡上使用。然而,它是可能的,并且會導致平衡,比例設計,可以導致更好的用戶體驗。

鄭州網站建設-結論

基線網格是一個偉大的方式和比例的增加一些平衡你的排版。這是其中的一個微妙的實現,可以添加到您的設計中一些自然的感覺。對于基線網格,我們的排版變得符合標準化的間隔給它,和諧的感覺。

然而,不幸的是,我們仍然要對抗這種威脅的瀏覽器不兼容的問題,可以使我們的CSS呈現不同的方式為不同的用戶當他們瀏覽在交替的瀏覽器、操作系統或設備。這是一個任務,似乎不像它在它的出路,盡管添加一個基線網格并提供其他優點。例如,這種類型的網格系統可以幫助極大,因此,當縮放和強迫瀏覽器重新呈現它的CSS。基線網格提供更多的靈活性和鼓勵為瀏覽器正確地做事。

這是一個比平時短文章,但那是因為基線網格沒有很多解釋關于或展示如何使用。真正的魔力來自當設計師調整和測試,以確保他的基線網格作品,高于一切,使設計吸引人的視覺效果(更)。另一種旋轉的事情,閱讀一個列表分開的文章在這個敏感話題。直到下一次,快樂的設計!

上一篇網頁設計應該掌握的分割布局

下一篇鄭州網站建設中光影特效運用技巧