鄭州網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)在本質(zhì)上就是一個(gè)進(jìn)化的原則和理論創(chuàng)造的演化過程中打印。設(shè)計(jì)行業(yè)帶來了很多的技術(shù)網(wǎng)絡(luò),但是一些花的時(shí)間掌握在一個(gè)虛擬環(huán)境。不幸的是,我們沒有一個(gè)單一的平臺為我們的內(nèi)容出現(xiàn)在;我們必須戰(zhàn)斗與多個(gè)瀏覽器,操作系統(tǒng),屏幕尺寸。
隨著網(wǎng)絡(luò)的發(fā)展,所以我們觀察到的設(shè)計(jì)原則。基于網(wǎng)格的設(shè)計(jì)有玫瑰近年來,即把他們的網(wǎng)站設(shè)計(jì)者可以根據(jù)一個(gè)圓柱狀的網(wǎng)格。網(wǎng)格系統(tǒng)是一個(gè)非常受歡迎的方法來組織和排列元素,并添加到一個(gè)頁面,一般命令通過應(yīng)用比例和平衡。
把我們的知識的使用比例和平衡,你可以采用另一個(gè)印刷設(shè)計(jì)原則:基線網(wǎng)格。
鄭州網(wǎng)站建設(shè)-什么是基線網(wǎng)格嗎?
基線網(wǎng)格技術(shù)用于更好的你的基于web的排版。從本質(zhì)上講,它使你所有的文本垂直網(wǎng)格,每個(gè)字母的底部被放置到電網(wǎng),就像寫在橫格紙。最終的結(jié)果是一個(gè)身體的文字完美的組織,一個(gè)潛意識的識別的平衡��調(diào)和。
就像我以前說的,印刷是一個(gè)靜態(tài)的介質(zhì)。設(shè)計(jì)一個(gè)打印格式允許您指定什么你所有的觀眾將會(huì)看到。然而,由于你的設(shè)計(jì)可替代平臺web上的解釋,你的CSS將不可避免地呈現(xiàn)你的行高,和其他印刷上的值,對于不同的用戶有不同的。對于很多設(shè)計(jì)師,這原來只是猜測和預(yù)測最終用戶將看到。
基線網(wǎng)格在打印
許多印刷設(shè)計(jì)師使用基線網(wǎng)格結(jié)合自己的設(shè)計(jì)套件,無論是排版軟件名稱或其他。網(wǎng)格在打印一直追溯到1200年代早期,不受限制的只是網(wǎng)頁設(shè)計(jì)。事實(shí)上,從網(wǎng)格的黃金比例(即大多數(shù)數(shù)學(xué)理論)是共享在生活的其他方面,最明顯的是架構(gòu)。
網(wǎng)格可以把所有的設(shè)計(jì)元素——類型字符,攝影,繪畫和色彩——變成一個(gè)正式的關(guān)系,彼此;也就是說,網(wǎng)格系統(tǒng)是一種手段,引入秩序設(shè)計(jì)。一個(gè)故意設(shè)計(jì)組成一個(gè)更清晰,更整齊的排列和更成功的效果比隨機(jī)廣告放在一起。-約瑟夫·穆勒布羅克曼
鄭州網(wǎng)站建設(shè)-創(chuàng)建一個(gè)基線網(wǎng)格
現(xiàn)在,讓我們看看我們?nèi)绾蝿?chuàng)建我們的基線網(wǎng)格。
首先,我們需要定義一個(gè)行高為基線網(wǎng)格基于比率與我們的字體大小,對于這個(gè)示例,1:1 5是一個(gè)很好的數(shù)量,提供我們一個(gè)慷慨的50%領(lǐng)先。如果我們有一個(gè)文本大小12 px,行高(使用這個(gè)1:1 5比)將18 px。150%是一個(gè)不錯(cuò)的數(shù)量,給我們提供了一個(gè)設(shè)計(jì),將很容易閱讀,但是這個(gè)值可以不同。然而,你應(yīng)該盡量約130%的范圍-160%當(dāng)考慮行高。
在我們繼續(xù)之前,你應(yīng)該知道如何CSS屬性實(shí)際上作品行高。行高的是整體的、集體的高度行文本,而不是文本本身。它通過添加填充上面和下面的文本空間出來。如果我們真的需要一些文本和把它放在一個(gè)統(tǒng)治的背景,我們會(huì)看到文本定位在字里行間,��一定在他們。
到CSS
為了使事情簡單,我們假設(shè)我們的文本有一個(gè)基地大小為10 px。堅(jiān)持我們的粗糙的比率,這意味著我們的行高將15 px,雖然我們可以改變這個(gè)。(做一個(gè)邊注,10 px是相當(dāng)小的,我不一定會(huì)推薦它在大多數(shù)情況下,但我在這里用它純粹是為了使他們更容易在數(shù)學(xué)系)。為了使各種元素融入我們的基線網(wǎng)格系統(tǒng),我們需要設(shè)置在我們的CSS。
在我們繼續(xù)下去之前,雖然,這些示例假設(shè)您使用的是某種CSS重置。如果你沒有,那么默認(rèn)的利潤率可能會(huì)妨礙我們的工作今天做。
段落
開始做事了,一旦我們設(shè)置行高,我們需要配��一致的保證金在每個(gè)標(biāo)題和段落。因?yàn)槲覀冋谂c一個(gè)15像素網(wǎng)格這里,我們踢做事了覆蓋標(biāo)準(zhǔn)的底部邊緣的一個(gè)段落標(biāo)記(默認(rèn)情況下,這是1 em,在這種情況下將10 px)來同我們的行高在文本。這將創(chuàng)建一個(gè)空行每一段下成比例,等于身高如果文本在那里居住。
| 001 002 003 |
p {
margin-bottom: 15px;
}
|
這是結(jié)果:身體的文字下面的邊緣一個(gè)段落等于行高。
頭
相似,因?yàn)闃?biāo)題,我們只是需要繼續(xù)遵守增量15像素。通過簡單的標(biāo)簽在我們的保證金一邊150%行高,我們創(chuàng)建一個(gè)類似的、一致的打破。
<iframe allowtransparency="true" frameborder="0" height="250" hspace="0" id="aswift_0" marginheight="0" marginwidth="0" name="aswift_0" scrolling="no" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-style: inherit; font-family: inherit; vertical-align: baseline; overflow-x: hidden; overflow-y: hidden; left: 0px; position: absolute; top: 0px; " vspace="0" width="300"></iframe>| 001 002 003 004 005 |
h1 {
font-size: 20px;
line-height: 30px;
margin-bottom: 15px;
}
|
這個(gè)例子在右邊有我們的CSS應(yīng)用,使利潤率在我們的標(biāo)題符合我們的基線網(wǎng)格。因?yàn)槲覀兊念^有一個(gè)字體大小的兩倍我們正常的文本,它占了���排在我們的網(wǎng)格。
我走之前任何進(jìn)一步的,我想說的是你的文字可能不總是實(shí)際上坐在線,如果你申請一個(gè)你的背景。不要擔(dān)心,只要線高度是一樣的。如果你的文本漂浮在中間的線,你可以很容易地玩耍和你的利潤,但這不是必要的。
鄭州網(wǎng)站建設(shè)-列表
接下來,我們?nèi)绾翁幚砹斜韱?首先,我們要運(yùn)用我們的標(biāo)準(zhǔn)保證金以同樣的方式,我們做我們的段落。這給了一個(gè)水平的一致性與內(nèi)容。
| 001 002 003 |
ul, ol {
margin-bottom: 15px;
}
|
這是開始變得容易了!如果你仍然有一個(gè)行高15像素定義在其他地方,你的列表將會(huì)適應(yīng)得很好與其他內(nèi)容。
因?yàn)槲覀兊男懈呤嵌x在父元素的CSS,我們只需要定義邊緣得到我們的列表并運(yùn)行在我們的基線網(wǎng)格系統(tǒng)。
圖像
圖片是在它開始變得有點(diǎn)困難。最好是,我們要有相同的一致性在我們的利潤率,因此圖像都是以同樣的方式對待的仿佛一塊文本。它意味著,你的圖片需要大小的倍數(shù)你行高價(jià)值,在這種情況下,15。
在我的例子中,我將向右浮動(dòng)的形象,所以我有一個(gè)15像素邊緣應(yīng)用到左邊和底部。與我們現(xiàn)有的保證金在段落,這給了我們一個(gè)一致的保證金等于我們余下的基線網(wǎng)格。
| 001 002 003 004 |
img.left {
float: left;
margin: 0 0 15px 15px;
}
|
當(dāng)然,這些并不是唯一的因素,我們需要修改以符合我們的新基線網(wǎng)格。關(guān)鍵是要確保你的工作在一個(gè)一致的增量,所以一切都是狹隘的,相同的網(wǎng)格。這可以導(dǎo)致和諧和平衡變得明顯在你的網(wǎng)頁在使用大量豐富的文本。
我們的示例
這是我們完成的例子,一個(gè)簡單的網(wǎng)頁標(biāo)題、段落、特色一個(gè)圖像和一個(gè)列表。如果你想走出你的尺子,你可以,但我可以向你保證,一切遵循一致的網(wǎng)格,建立從我們的排版。
我們只是剛剛打破了表面使用基線網(wǎng)格。它可以變得更為困難當(dāng)你開始試圖將它們應(yīng)用到更復(fù)雜的設(shè)計(jì),最終導(dǎo)致一些在網(wǎng)絡(luò)上使用。然而,它是可能的,并且會(huì)導(dǎo)致平衡,比例設(shè)計(jì),可以導(dǎo)致更好的用戶體驗(yàn)。
鄭州網(wǎng)站建設(shè)-結(jié)論
基線網(wǎng)格是一個(gè)偉大的方式和比例的增加一些平衡你的排版。這是其中的一個(gè)微妙的實(shí)現(xiàn),可以添加到您的設(shè)計(jì)中一些自然的感覺。對于基線網(wǎng)格,我們的排版變得符合標(biāo)準(zhǔn)化的間隔給它,和諧的感覺。
然而,不幸的是,我們?nèi)匀灰獙惯@種威脅的瀏覽器不兼容的問題,可以使我們的CSS呈現(xiàn)不同的方式為不同的用戶當(dāng)他們?yōu)g覽在交替的瀏覽器、操作系統(tǒng)或設(shè)備。這是一個(gè)任務(wù),似乎不像它在它的出路,盡管添加一個(gè)基線網(wǎng)格并提供其他優(yōu)點(diǎn)。例如,這種類型的網(wǎng)格系統(tǒng)可以幫助極大,因此,當(dāng)縮放和強(qiáng)迫瀏覽器重新呈現(xiàn)它的CSS。基線網(wǎng)格提供更多的靈活性和鼓勵(lì)為瀏覽器正確地做事。
這是一個(gè)比平時(shí)短文章,但那是因?yàn)榛€網(wǎng)格沒有很多解釋關(guān)于或展示如何使用。真正的魔力來自當(dāng)設(shè)計(jì)師調(diào)整和測試,以確保他的基線網(wǎng)格作品,高于一切,使設(shè)計(jì)吸引人的視覺效果(更)。另一種旋轉(zhuǎn)的事情,閱讀一個(gè)列表分開的文章在這個(gè)敏感話題。直到下一次,快樂的設(shè)計(jì)!
技術(shù)創(chuàng)造價(jià)值 服務(wù)締造品牌
Copyright ? 2011-2024 鄭州開拓者電子科技有限公司 All Rights Reserved