【前端入門篇】仿扇貝首頁

前言

小白玩家入門文章，意在記錄本人學習過程當中遇到的各類問題，歡迎各路大神指點。

第一次切頁面選擇的網站是扇貝單詞的首頁，很喜歡這種簡潔清爽的頁面風格。頁面在PC端預覽效果還算過得去，因爲沒作適配，定位也存在不少問題，致使頁面縮放或在移動端打開會慘不忍睹了。

學習目的：

1. 瞭解頁面HTML結構
2. 語義化命名
3. 盒子模型
4. CSS屬性
5. JS皮毛

• GitHub代碼：github.com/StevenYoung…

• GitHub預覽（手機慎點！！！）： stevenyoung21.github.io/qt_lesson/s…

使用工具及語言

1.  Vscode
2. Chrome
3. Page Ruler （Chrome拓展程序）：方便測量頁面各類尺寸。
   
4. Html+css+js

HTML結構

本次頁面我將其分爲兩個部分，頭部的導航欄（nav__bar）和主體內容（container），具體的命名細節以下圖：

頁面效果如圖：

CSS屬性

除了常規的樣式外，有三點值得記錄一下

1.用border畫三角圖形

效果如圖：

width: 0px;    border-top: 10px solid transparent;    border-right: 10px solid #DDD; border-bottom: 10px solid transparent; border-left: 10px solid transparent;複製代碼

2.border畫分割線：

效果如圖：

下拉框用ul li製做，8個li有內容，另兩個li用於畫分割線。

li 設置了cursor: pointer；可是鼠標移動到第5個和第8個li 的時候不該該出現pointer，因此在這兩個li中設置cursor: default；能夠解決。

下拉框這還有一個問題，當鼠標移動到li上時，每一個li的字體顏色白，背景變爲主題綠，可是兩個分割線也屬於li，當鼠標移動時分割線也會出現變色。我解決這個問題的方法比較low，用li:nth-child(1):hover 分別取了八次，跳除第5和第8這兩個li。

3.input框樣式設計

初始效果如圖：

點擊輸入時變換效果：

將輸入框分紅三部分，外面一個大盒子（input__btn），裏面左邊一個輸入框（input），右側一個搜索圖標（search__img）。用外層大盒子input__btn來控制位置和顯示的樣式，再把內部input輸入框的樣式所有幹掉。點擊輸入框變換樣式時，外層大盒子背景變白，寬度增長，內層輸入框背景變白，寬度增長，字體顏色變黑。再使用transition: all 0.5s;將變換過程變得柔和。這裏還要涉及一點JS的使用。

JS皮毛

接上部分輸入框，本次頁面只有輸入框這裏用到了一小段js代碼，效果如圖：

第一點，觸發樣式變化是當鼠標按下去未鬆開時（onmousedown），當鼠標移出（onmouseout）輸入框樣式恢復。順便再列舉一下關於鼠標的各種事件：

1. onclick ：用戶點擊完觸發事件
2. ondblclick ：雙擊觸發事件
3. onmousedown： 當鼠標按下時（未鬆開狀態）
4. onmouseup： 鬆開鼠標時觸發
5. onmouseout： 當鼠標從某個元素移開
6. onmousemove： 當鼠標移動

第二點，一開始獲取元素我用的是getElementByName，發現功能實現不了，查了一下文檔，getElementByName返回的是數組，getElementById返回的是一個元素。

第三點，用.style.cssText修改樣式。

js代碼以下：

function changeInputStyle(){var inputBtnStyle = document.getElementById('input__btn');inputBtnStyle.style.cssText = "width:180px;background-color:white;";var inputStyle = document.getElementById('input');inputStyle.style.cssText = "width:150px;background-color:white;color:#666;";}function initailStyle(){    var inputBtnStyle = document.getElementById('input__btn');    inputBtnStyle.style.cssText = "width:97px;background-color:#209E85;";        var inputStyle = document.getElementById('input');    inputStyle.style.cssText = "width:71px;background-color::#209E85;color:white;";} 複製代碼

總結

第一次寫前端頁面和技術類文章，一晃扇貝也陪我走過了三年，一路上花開花落，起起跌跌... 記錄一下，準備踏上新的一輪征途。

起初只想大概的把頁面結構搭建一下，後面出於強迫症的性格做祟，就把頁面各個細節扣了一遍。本次編程最大的收過就是搭建html頁面的結構和語義化命名，固然，我這個語義化只是相對本身以前的abc命名方式而言語義了，之後仍是要多積累一些編程詞彙。看着想要的樣式都能一點點實現出來，仍是蠻有成就感的。

長路漫漫，猶可期許，黑夜仍在繼續，夜空中最亮的星，請指引我前行。