新浪網是國內最大的綜合門戶網站之一,擁有豐富的內容和廣泛的用戶群,其網站的設計也是應該引起我們的注意。下面,我們來學習一下如何使用CSS制作新浪網的頁面。
/* 頁面主體部分樣式 */ body { font-family: Arial, sans-serif; background-color: #fff; color: #333; } /* 頂部導航欄樣式 */ #top-nav { background-color: #f6f6f6; height: 40px;; padding: 10px; box-sizing: border-box; } /* logo樣式 */ #logo { font-size: 24px; color: #f90; font-weight: bold; float: left; margin-right: 50px; } /* 導航鏈接樣式 */ #nav-links { float: left; } #nav-links a { display: inline-block; margin-right: 20px; color: #333; text-decoration: none; font-size: 16px; } /* 搜索框樣式 */ #search-input { border-radius: 20px; border: none; padding: 10px 20px; background-color: #ddd; margin-right: 20px; width: 200px; box-sizing: border-box; font-size: 14px; float: left; } /* 搜索按鈕樣式 */ #search-button { border-radius: 20px; border: none; padding: 10px 20px; background-color: #f90; color: #fff; font-size: 14px; float: left; } /* 主要內容區樣式 */ #content { width: 960px; margin: 0 auto; padding-top: 20px; } /* 新聞列表樣式 */ .news-list { margin-top: 40px; } .news-list li { display: flex; border-bottom: 1px solid #ccc; padding: 20px 0; } .news-list li .thumbnail { width: 200px; height: 120px; background-color: #ddd; margin-right: 20px; } .news-list li .content { flex: 1; } .news-list li h3 { font-size: 20px; } .news-list li p { font-size: 16px; color: #999; } /* 頁腳樣式 */ #footer { background-color: #f6f6f6; height: 100px; margin-top: 40px; text-align: center; line-height: 100px; font-size: 14px; }
使用以上CSS樣式,我們可以制作出一個簡單的新浪網:
以上就是我們制作新浪網頁面的步驟以及所需的CSS樣式,希望對您有所幫助。
上一篇css制作正弦曲線