網(wǎng)頁(yè)排版經(jīng)常用到的5個(gè)CSS基礎(chǔ)

2020-03-24 16:45:29

字體：大中小

供稿：網(wǎng)友

圖文混排! 我想，你會(huì)想到這個(gè)。這里，準(zhǔn)備給你介紹幾個(gè)個(gè)在文章的排版中會(huì)用到的CSS基礎(chǔ)，當(dāng)然，包括圖文混排，是怎樣做到的。準(zhǔn)備好了嗎? 那我們開(kāi)始： 1. 首行縮進(jìn) 你知道的，從小學(xué)，老師就教我們，段落的開(kāi)頭應(yīng)該空兩格。而你使用word的時(shí)候，也有首行縮進(jìn)這個(gè)功能，但在html中你的空格鍵好像起不了作用了。當(dāng)然，你可以用 nbsp;來(lái)代替一個(gè)空格，但這不是理想的方式，用CSS吧，簡(jiǎn)單，有效： p 你的內(nèi)容 /p 這樣的話，這個(gè)有段落就會(huì)顯示兩個(gè)字符的縮進(jìn)了。縮進(jìn)更多? 修改2em, 2表示2個(gè)字符，你可以相應(yīng)增加或者減少。 2. 圖文混排在word中，我們可以用環(huán)繞來(lái)讓文字顯示在圖片周?chē)鳦SS，中，我們可以用float，來(lái)讓文字在沒(méi)有清理浮動(dòng)的時(shí)候，顯示在圖片以外的空白處。如下所示：在下面的代碼中，把float設(shè)置成left，圖片會(huì)顯示在左邊，而right則顯示在右邊，而margin-right是為了不讓文字和圖片貼在一起需要寫(xiě)的，如果你設(shè)置的是float:right;剛相應(yīng)應(yīng)該是把 margin-right改成margin-left： img src="圖片地址" alt="圖片說(shuō)明" / 3. 設(shè)置背景色先來(lái)看一個(gè)示例，如果你有需要引用的內(nèi)容，而主題中又沒(méi)有設(shè)置，或者希望自己定制一下背景顏色。代碼如下，如果你不知道顏色是如何定義的，你可以看看web216安全，換上相用的顏色代號(hào)就可以了，比如#faf7e8表示上面的淺黃色： p 4. 讓文字居中如上例，只要在代碼中加入text-align:center，就可以讓文章在容器的寬度內(nèi)水平居中。OH，容易哦?! 5. 顯示一個(gè)邊框邊框我們會(huì)用到border，添加一個(gè)邊框，只要加上 1px代碼邊框的大小，而dotted是邊框的樣式，常用的樣式用三個(gè):solid(實(shí)邊) dashed(虛線) dotted(點(diǎn)狀虛線). 就像上面實(shí)例的邊框中，我使用的是dotted邊。好吧，就寫(xiě)這5個(gè)比較常用的。更多的CSS基礎(chǔ)知識(shí)，你可以到w3school中文學(xué)習(xí)，不需要很多時(shí)間，你就可以輕松排版了html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS濾鏡-Wave屬性

下一篇：需要掌握的八個(gè)CSS布局技巧