CSS是網頁設計中不可或缺的一部分,掌握CSS可以讓我們更好地制作出獨特而精美的網頁。下面將介紹如何使用CSS制作百度官網。
首先,在HTML文檔頭部引入樣式表,這樣我們才能使用CSS樣式進行美化。在head標簽內添加如下代碼:
<link rel="stylesheet" type="text/css" />
接著,我們可以對百度官網進行一些樣式設置。比如改變背景色、字體顏色、字體大小等。代碼如下:
body{ background-color: #f6f6f6; font-size: 16px; color: #333333; }
下面再對搜索框進行美化。代碼如下:
#kw{ width: 550px; height: 34px; border: none; border-radius: 17px; background-color: #f1f1f1; font-size: 16px; color: #333333; padding: 0 15px; margin: 25px 0 0 80px; } #su{ background-color: #3385ff; color: #fff; width: 80px; height: 34px; border: none; border-radius: 17px; font-size: 16px; margin: 25px 0 0 -2px; }
以上代碼設置了搜索框和搜索按鈕的樣式,包括寬度、高度、圓角、背景色、字體大小等,使它們更加美觀和實用。
最后,我們來設置一下百度首頁底部的鏈接樣式。代碼如下:
.bottom a{ color: #999999; font-size: 12px; text-decoration: none; margin-right: 15px; } .bottom a:hover{ color: #3385ff; text-decoration: underline; }
以上代碼設置了鏈接的字體顏色、字體大小、下劃線等樣式,使鼠標懸停時可以更好地看到鏈接的效果。
通過以上的CSS樣式設置,我們可以得到一個更美觀、實用的百度官網。