百度作為中國最大的搜索引擎,早已深入人心。如果我們想要學(xué)習(xí)CSS的話,使用百度主頁來做樣本是一個(gè)不錯(cuò)的選擇。
下面是CSS模仿百度主頁的代碼:
body { font-family: '微軟雅黑', sans-serif; } a { text-decoration: none; color: #333; } #logo { width: 150px; height: 40px; background: url('https://www.baidu.com/img/bd_logo1.png') no-repeat; } #search-form { width: 500px; margin: 0 auto; padding-top: 100px; } #search-input { width: 390px; height: 30px; border: 1px solid #ccc; border-right: none; padding-left: 10px; float: left; } #search-button { width: 100px; height: 32px; border: none; background-color: #3385ff; color: #fff; font-weight: bold; float: left; cursor: pointer; } #hot-topic { margin-top: 20px; } #hot-topic li { float: left; margin-right: 10px; } #hot-topic li a { font-size: 14px; } #news-list { width: 600px; margin: 0 auto; margin-top: 50px; } .news-item { margin-bottom: 20px; } .news-item .title { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .news-item .time { font-size: 12px; color: #999; } .news-item .content { font-size: 14px; color: #333; line-height: 1.5; margin-top: 10px; }
這里我們主要使用了id選擇器、類選擇器、標(biāo)簽選擇器等常用的選擇器,還涉及到了盒子模型、浮動(dòng)、文字排版等css基礎(chǔ)知識(shí)。當(dāng)然,這只是一個(gè)簡單的例子,實(shí)際應(yīng)用中還有很多需要考慮的地方。