🔥🔥🔥歡迎關注csdn前端領域博主: 前端小王hs

🔥🔥🔥email: 337674757@qq.com

🔥🔥🔥前端交流群： 598778642

有不少剛入門前端的同學經常問我前端布局的問題，總是跟我說在面對學校布置的作業或者想自己搭建博客的時候不知道怎么下手，不知道怎么去寫靜態的頁面，每當我解決了一個又一個同學的問題的時候，又有新的同學來問，故思來想去，還是出一篇博客來講一下怎么去開發前端靜態頁面，開發的基本思路是什么

一個頁面包括幾個區域

如果是用元素html寫，那就包括head頭，body身體和footer底部三個部分，如果是用框架比如vue去寫，那就都包括在template里

頁面主要分為什么？

可點擊的和不可點擊的，比如你中間是頁面，有可以跳轉的a標簽，就是可以點擊的，如果是主要內容兩邊的空白，那自然是不可點擊的，通俗來講，整個頁面的關鍵動作只有點擊

一般那些頁面元素是需要點擊的？

比如輪播圖，比如下拉框，比如按鈕，這些都是要點擊的

如果是看見網頁上方底部菜單欄，有什么實現的思路？

我們先分析要實現的布局：菜單欄位于中間，我們先用一個大框寬度百分百，再在中間寫一個框去包我們要寫的內容，然后在這個中間的框去寫我們需要的按鈕，我們看小米官網的布局，紅色的就是大框，藍色的就是中間我們要寫內容的框，我們再去中間的框去細分

實現的思路：
①可以寫個列表，也就是ul包住li，我相信很多人剛學的時候都是這樣操作的，ul包住li后通過向左向右浮動去實現布局，如果過了初學期，博主不建議這樣寫，因為有更好的實現方案
②可以寫個表格，在表格里通過插槽寫按鈕，再調整一些表格的寬度，表格的間距
③用柵格布局，在bootstrap叫柵格布局，在element中叫layout布局，博主推薦使用這種方式
這是最基本的三種實現方式，推薦使用第三種方式

如果你學過bootstrap，那或許引入bootstrap中的組件是最好的方式，用vue寫的可以引用element的組件

圖標哪里找？

常用的圖標可以去阿里的iconfont里找，很方便
圖標直通車

如果是自己仿寫京東頁面，小米頁面去練習的話，可以直接扣官網的圖
方法如下
①按ctrl+shift+c，把鼠標移入要扣的圖標，然后復制svg，放到自己新建的文本文檔
②把后綴txt改成svg再放進自己的項目里就可以用

按鈕的實現思路有哪些？

按鈕是我們的頁面最常見的元素，可以說整個頁面除了圖片就是按鈕，甚至圖片本身也是一個跳轉到另外頁面的按鈕，a標簽也是個按鈕，點擊可以跳轉到想去的頁面，那么按鈕的實現思路是怎么樣的呢？
我們常見的文字按鈕即text類型可以使用a標簽進行跳轉，如果是點擊圖片，那我們可以在圖片外面放一個div，在div中綁定一個click函數，然后我們在script中獲取到這個div，然后用location、navigate、back等方式去實現跳轉
我們也可以通過按鈕去實現下拉框，滑動圖片（輪播圖）等操作
下面示例實現這個操作的偽代碼

<div id='1' class='class' 綁定click><script> clcik函數中{ //用id或者class獲取div元素 let div = document.getelement...(1)或者(class) //為了養成良好的習慣，我們通常會log一下看有沒有獲取 console.log(div) //對拿到的元素進行操作 div.... } </script>

少用行內樣式

在開發的過程中，我們盡量少用行內樣式，一是為了template中的代碼規范，二是便于在css中維護樣式，推薦學習scss預編譯語言，嵌套屬性是一個很好的工具

樣式單位要規范

小白在修改寬度高度和邊距的過程中，很容易犯的一個錯誤就是像素px和百分比%單位混用，這樣的話會造成布局變形，所以在寫的時候一定要注意樣式的單位

什么時候用px單位，什么時候用百分比單位？

如果是要寫適應性就用百分比單位，如果是要固定的頁面就px單位

什么是適應性，如何實現適應性？

適應性就是會隨著你的窗口大小，頁面會自動調整，比如有些電腦是27寸，有些事25寸，有些分辨率1920X1080，有些是1680X1050等，所以我們在開發的時候一定要兼顧到各種情況，讓使用者有好的感受
那如何去實現適應呢？
上面說的百分比單位是一個不錯的實現方式，還有媒體布局，rem單位等

未來幾日會繼續更新前端靜態頁面的基本開發思路，未完待續…

總結

以上是生活随笔為你收集整理的前端静态页面基本开发思路（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。