由于第一篇的反響不錯，所以今天抽空寫寫前端靜態頁面基本開發思路（二）
第一篇開發思路直通車→前端靜態頁面基本開發思路（一）

現在的靜態頁面的設計基本上都涉及到了輪播圖，而且一般都是頂部菜單欄過了就是輪播圖的區域，比如小米官網，京東官網等，所以今天我們就從輪播圖的實現開始講

輪播圖的實現

對于初學者來說，輪播圖可能是在學習js基礎的時候了解的，這里再講一下輪播圖的實現原理：
①弄幾張圖，每張圖的寬高都一樣
②畫一個框，輪播圖的框，圖標在框里面
③把每張圖的寬度計算出來，加上每張圖之間的間距
京東輪播圖案例：

④拿到每張圖的元素，就是通過getelementby…拿到
⑤定時器，用于圖片的移動
⑥在輪播圖滑到最后一張圖時切換第一張圖實現循環輪播

輪播圖的大致思路就是如此，但現在我們開發一般都是用插件，那我們可以聯想到使用bootstrap插件對吧
所以我們可以引用bootstrap插件就可以使用了
這是第一種思路，即使用bootstrap插件
第二種思路是使用swiper插件，swiper插件是一款專注于輪播圖的插件，直接導入把圖片換上就可以用了

這是兩種輪播圖最常用的開發思路

商品展現區域實現

什么是商品展現區域，看下圖：

截圖來自京東，在其他購物類的網站也都有這個布局，用于展示商品
要實現這種布局，最好的思路只有一個，就是用柵格布局，也就是element的layout布局，在學習bootstrap的時候應該會學到這個布局，這里就不過闡述了
簡單的柵格布局，加上每一行和每一列的邊距，就可以實現這個頁面

如果不了解柵格布局的可能會想著使用表格，我個人建議是不要使用表格，有更簡單和更易于維護的柵格布局是最好的

側邊欄的廣告實現

也就是下面的這種布局：

你會發現這種廣告無論你怎么移動屏幕，他都固定在那里，其實這種一個定位
需要了解四種定位：相對定位，絕對定位，粘滯定位和固定定位
這種廣告的定位其實就是一種固定地位，position:fixed，是相對于窗口來定位的，只需要在css里設置樣式，定位在合適的地方就可以了

底部菜單欄如何實現

什么是底部菜單欄呢，就是在底部放了很多友情鏈接，兄弟網站還有備案信息的區域
例如bootstrap的底部菜單

如果是最上面的一欄，也就是github開頭的那一欄，實現的方式有很多種，簡單講幾個思路
①柵格布局
②表格
③列表+向左浮動
④純div+行內樣式
…
主要是這四種思路

最下面的幾句話就是行內樣式span或者div然后br換行了，一般底部菜單欄就鏈接和幾句介紹，所以實現起來是比較簡單的

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

總結

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

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