在網(wǎng)頁開發(fā)中,CSS是一種很方便的工具,可以用來美化和布局網(wǎng)頁。下面我們就來看一下如何使用CSS做一個簡單的公告欄。
.notice { background-color: #efefef; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; text-align: center; font-size: 16px; }
以上是我們要添加的CSS樣式代碼。要先在HTML文件中添加一個div元素,并給它添加一個類名“notice”。如下所示:
<div class="notice"> <p>這是一個簡單公告欄。</p> </div>
以上是我們要在HTML文件中添加的代碼。現(xiàn)在我們來解釋一下CSS代碼的作用:
- background-color:設(shè)置背景顏色。
- border:設(shè)置邊框樣式。
- padding:設(shè)置內(nèi)邊距。
- margin-bottom:設(shè)置下外邊距。這是為了避免公告欄和下面的內(nèi)容緊貼在一起。
- text-align:設(shè)置文本對齊方式。這里我們設(shè)置為居中。
- font-size:設(shè)置字體大小。
以上就是使用CSS做一個簡單公告欄的步驟了。大家可以根據(jù)自己的需要來調(diào)整樣式,使公告欄更加美觀。另外,CSS還有很多其他的應(yīng)用,有興趣的同學(xué)可以去了解一下。
下一篇css元素多屬性