Baidu首頁是中國最大的搜索引擎之一,它的頁面設計以簡潔明了、易于使用為主旨。在頁面設計中,CSS技術起著至關重要的作用。
/*CSS代碼*/ /*設置整個頁面的字體和顏色*/ body { font-family: Arial, sans-serif; color: #333; } /*設置頭部的樣式*/ .header { background-color: #fff; border-bottom: 1px solid #ddd; padding: 20px; } /*設置搜索框的樣式*/ .search-box { width: 500px; height: 40px; background-color: #f1f1f1; border-radius: 20px; margin-top: 20px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 5px 10px; } /*搜索按鈕的樣式*/ .search-btn { width: 80px; height: 30px; background-color: #3385ff; color: #fff; border-radius: 15px; cursor: pointer; text-align: center; line-height: 30px; } /*設置鏈接的樣式*/ a { color: #3385ff; text-decoration: none; }
首先,我們設置了整個頁面的字體和顏色。然后,為了讓頁面看起來更美觀,我們著重設置了頭部和搜索框的樣式。
頭部的樣式使用了純白色的背景、灰色的底部邊框以及一些內邊距。搜索框的樣式則顯得更復雜一些,我們設置了其寬度、高度、背景顏色、圓角等,在樣式設計過程中使用了flex布局,讓搜索按鈕能夠呈現出相對于搜索框相對于獨立的樣式。
最后,我們也特別注意了頁面中鏈接的樣式,避免與其他的文本以及背景顏色混在一起,通過設置鏈接的顏色、下劃線和鼠標懸浮的效果等來讓用戶更好地操作搜索引擎。