接前一篇文 實現(xiàn)微博首頁實例，今天來動手實現(xiàn)首頁的第一個部分。

要實現(xiàn)什么

今天要實現(xiàn)的是上圖中框起來的部分，以及點擊最右邊圖標(biāo)內(nèi)容展開為如下圖的部分。

先看一眼最終的成品效果：

基本上是做到效果類似吧，下面來拆解一下實現(xiàn)步驟。

我們把實現(xiàn)分成三步：

• 實現(xiàn)第一行的 logo 和搜索框

• 實現(xiàn)第二行的菜單

• 實現(xiàn)第三行的菜單展開區(qū)域

第一行的 logo 和搜索框

第一行的內(nèi)容比較簡單，只用到 img 元素和表單的 input 元素，當(dāng)然最后的標(biāo)簽，還是圖片(img)元素。

只要按順序把它們排列好就行了。

<div class="search">   <img class="logo" src="../img/4-2-1-logo.svg" width="40" height="40" />   <input placeholder="大家都在搜: IT從業(yè)指北" type="text" value="" />   <img class="edit" src="../img/4-2-1-edit.png" width="40" height="40" /> </div> 

從布局上來說，只是簡單的使用了 div，然后在里面依次放置了 img，input 和 img。

為了讓排版更接近，搭配使用了以下 CSS 樣式。目前看不太懂也沒有關(guān)系，后續(xù)的 CSS 課程之后就能有更清楚的理解。

簡單來說，在 CSS 里就是指定了寬度，字體大小，顏色，上下之間的間距，是否有邊框等等。

div.search {   margin-top: 5px;   width: 750px;   background-color: #fafafa;   align-self: center; } .search img.logo {   float: left;   margin-right: 5px;   line-height: 40px; } .search input {   float: left;   border: 0;   border-radius: 5em;   height: 40px;   padding-left: 20px;   width: 630px;   background-color: #eee;   margin-right: 10px;   font-size: 1em; } .search img.edit {   float: right;   margin-top: 5px;   margin-right: 5px; } 

實現(xiàn)第二行的菜單

接下來的菜單，更簡單了。就是一排超鏈接的排列。當(dāng)然，因為最后有一個展開圖標(biāo)，所以也用到了 img 元素。

<div class="nav">   <a href="#" class="selected">熱門</a>   <a href="#">榜單</a>   <a href="#">同城</a>   <a href="#">社會</a>   <a href="#">科技</a>   <a href="#">明星</a>   <a href="#">電影</a>   <a href="#">音樂</a>   <a href="#">數(shù)碼</a>   <a href="#">汽車</a>   <img     id="menuControl"     class="expand"     src="../img/4-2-1-expand.png"     onclick="toggleMenu()"     width="30"     height="30"   /> </div> 

這里除了使用了 CSS 樣式對超鏈接進(jìn)行了樣式處理，還在 img 元素上添加了 onclick 事件，這里面的邏輯暫時先不展開，只需要明白它是在控制菜單區(qū)域的展開關(guān)閉就好了。

div.nav {   padding-top: 5px;   width: 750px;   align-self: center;   padding-bottom: 5px;   background-color: #fafafa;   border-bottom: 1px solid #eee; }  .nav a {   display: inline-block;   width: 45px;   line-height: 30px;   text-align: center;   text-decoration: none;   color: #aaa;   padding-bottom: 3px;   margin-right: 18px; } .nav a:hover {   color: orange; } .nav a.selected {   margin-left: 18px;   border-bottom: 2px solid #aaa; } .nav img.expand {   float: right;   margin-right: 10px;   cursor: pointer; } 

鏈接元素的樣式有點復(fù)雜，主要是它有幾個不同的狀態(tài)，這里并沒有全部寫。此處內(nèi)容更多也會在 CSS 里講解。

實現(xiàn)第三行的菜單展開區(qū)域

第三行的內(nèi)容，其實和第二行差不多，唯一不同的，是通過 CSS 實現(xiàn)了樣式的不同。

<div id="menu" class="menu">   <a href="#" class="selected">熱門</a>   <a href="#">榜單</a>   <a href="#">同城</a>   <a href="#">社會</a>   <a href="#">科技</a>   <a href="#">明星</a>   <a href="#">電影</a>   <a href="#">音樂</a>   <a href="#">數(shù)碼</a>   <a href="#">汽車</a>   <a href="#">游戲</a> </div> 

對比之下，基本上和前一塊內(nèi)容的 HTML 代碼一樣。而不一樣的，則是下面的 CSS 樣式。

div.menu {   padding: 10px 0 10px 20px;   margin-top: 5px;   width: 750px;   align-self: center; } .menu a {   display: inline-block;   width: 170px;   text-decoration: none;   margin-right: 10px;   background-color: #eee;   margin-top: 10px;   text-align: center;   color: #333;   padding: 5px 0;   border-radius: 0.1em; } .menu a.selected {   color: orange; } 

整體效果

錄制了一個 gif 動畫，展示上述代碼的整體效果。

明天咱們接著實現(xiàn)接下來的部分。