用 CSS 做出百度頁面將使您獲得一個機會來提高您的 CSS 技能。本文將向您展示如何使用 CSS 做出一個簡單的百度頁面。
// HTML 代碼 <html> <head> <title>百度</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="searchBar"> <form action="http://www.baidu.com/s" method="post" name="f"> <input type="text" name="wd" class="search-input"> <input type="submit" value="百度一下"> </form> </div> </body> </html>
上面的 HTML 代碼包含了一個搜索框和一個提交按鈕。
// CSS 代碼
#searchBar {
width: 500px;
margin: 0 auto;
text-align: center;
}
.search-input {
width: 400px;
height: 30px;
padding: 5px;
border: 2px solid #ccc;
font-size: 20px;
}
input[type="submit"] {
background-color: #3385ff;
color: #fff;
font-size: 20px;
padding: 10px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
}上面的 CSS 代碼對搜索框和提交按鈕進行了樣式調整。可以看到，在 #searchBar 中添加了一些屬性來進行布局和居中。.search-input 類定義了搜索框的樣式，使其看起來更加美觀。另外，input[type="submit"] 樣式將提交按鈕的樣式設為了藍色，字體顏色為白色，特別注意的是為了增強用戶體驗，增加了 hover 效果。
通過上述 CSS 代碼，我們已經可以實現一個簡單的百度頁面。當然，還有很多其他的屬性和技巧可以用來做更多精美的效果。
上一篇用css做的動畫效果嗎
下一篇115json會封號嗎