接前一篇文 實現微博首頁實例，今天來動手實現首頁的第一個部分。
要實現什么
今天要實現的是上圖中框起來的部分，以及點擊最右邊圖標內容展開為如下圖的部分。
先看一眼最終的成品效果：
基本上是做到效果類似吧，下面來拆解一下實現步驟。
我們把實現分成三步：
實現第一行的 logo 和搜索框
實現第二行的菜單
實現第三行的菜單展開區域
第一行的 logo 和搜索框
第一行的內容比較簡單，只用到 img 元素和表單的 input 元素，當然最后的標簽，還是圖片(img)元素。
只要按順序把它們排列好就行了。
<div class="search"> <img class="logo" src="../img/4-2-1-logo.svg" width="40" height="40" /> <input placeholder="大家都在搜: IT從業指北" type="text" value="" /> <img class="edit" src="../img/4-2-1-edit.png" width="40" height="40" /> </div>
從布局上來說，只是簡單的使用了 div，然后在里面依次放置了 img，input 和 img。
為了讓排版更接近，搭配使用了以下 CSS 樣式。目前看不太懂也沒有關系，后續的 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; }
實現第二行的菜單
接下來的菜單，更簡單了。就是一排超鏈接的排列。當然，因為最后有一個展開圖標，所以也用到了 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="#">數碼</a> <a href="#">汽車</a> <img id="menuControl" class="expand" src="../img/4-2-1-expand.png" onclick="toggleMenu()" width="30" height="30" /> </div>
這里除了使用了 CSS 樣式對超鏈接進行了樣式處理，還在 img 元素上添加了 onclick 事件，這里面的邏輯暫時先不展開，只需要明白它是在控制菜單區域的展開關閉就好了。
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; }
鏈接元素的樣式有點復雜，主要是它有幾個不同的狀態，這里并沒有全部寫。此處內容更多也會在 CSS 里講解。
實現第三行的菜單展開區域
第三行的內容，其實和第二行差不多，唯一不同的，是通過 CSS 實現了樣式的不同。
<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="#">數碼</a> <a href="#">汽車</a> <a href="#">游戲</a> </div>
對比之下，基本上和前一塊內容的 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 動畫，展示上述代碼的整體效果。
明天咱們接著實現接下來的部分。
該文章在 2024/10/22 12:22:35 編輯過
400 186 1886
