前端導航項目流程與要點

目標

做一個自己使用的前端常用網(wǎng)址導航.

成果預(yù)覽

https://akanetang.github.io/my-page/dist/index.html

技術(shù)棧

  • jQuery
  • LocalStorage
  • SVG Symbols
  • 媒體查詢
  • git & Github

思路

  • Figma作圖
    ○ 將想好的頁面樣子畫出來
  • 實現(xiàn)手機端
    ○ 寫HTML主頁面
    ○ 寫CSS,為各個部分添加樣式
    ○ 寫JS（事件監(jiān)聽、DOM操作）
  • 實現(xiàn)PC端
    ○ 通過媒體查詢加上pc頁面的CSS
    ○ 寫JS（單獨處理PC上的邏輯）
  • 發(fā)布到Github

要點筆記

--制作流程中需要注意以及當時漏掉的地方

  1. 網(wǎng)頁head當中meta要設(shè)置好.可以看一下成熟網(wǎng)頁的代碼是怎么寫的.


    image.png

    2.CSS reset(將瀏覽器本身自帶的樣式重置)以及給設(shè)置灰色背景。


    image.png

    3、按鈕內(nèi)的文字應(yīng)設(shè)置為不換行
    image.png

    4.input默認有個border，需要刪掉或者覆蓋，不然很丑


    image.png

    5.代碼里不要有很多height，不然重新改一下（經(jīng)驗）
    6.只有a標簽可以包含塊級元素（本身里面是內(nèi)聯(lián)元素）
    image.png

    7.localstorage只能存字符串，不能存對象。所以要把hashmap保存為字符串。
    （localStorage是掛在window下的，所以可以省略window.）
    8.localStorage什么時候消失？當用戶清除cookie及其他網(wǎng)站數(shù)據(jù)的時候，會被清除。（若是用戶硬盤空間滿了，可能會把數(shù)據(jù)刪掉，但幾率很小）無痕窗口關(guān)閉后也會刪除數(shù)據(jù)。
    9.搞一個背景圖.(載入圖片,圖片重復(fù),隨頁面滾動,原圖片位于頁面中上)
    image.png

※

若之后有想要優(yōu)化的地方會繼續(xù)補充.

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容