2.空氣凈化界面 · Web前端開發手冊

## 一、空氣凈化界面設計效果圖（2）空氣凈化頁面，空氣凈化界面如圖所示： ![](http://h.yiniuedu.com/f921e4a92badae97d684488126980808) 該頁面整體布局分為上中下，上面為導航菜單和圖片。中間為內容區，下面為頁腳區，顯示聯系郵箱、聯系地址，聯系QQ，聯系電話，以及聯系我們，版權所有、ICP備案、資源活動、法律聲明和環保方案。中間內容區：空氣凈化頁面顯示凈化案例2-3項，比如XXXX有限公司污水治理項目，有核心介紹文字展示，同時有MORE按鈕，點擊可以打開新的頁面，查看詳情。有XX環保公司重金屬治理項目，有核心介紹文字展示，同時有MORE按鈕，點擊可以打開新的頁面，查看詳情。空氣凈化頁面通過導航菜單也可以跳轉到首頁、空氣凈化、園林景觀、服務簡要、動態新聞和聯系我們等頁面。 ## 二、空氣凈化界面布局實現 ### 1.頭部引入文件 ![](http://h.yiniuedu.com/1512d336489a08a00726e62cc2696a5d) ### 2.回到頂部，導航菜單欄和案例一 ![](http://h.yiniuedu.com/3bf28601aa3d2cb787e1b41e3d065165) ### 3.案例二、頁腳和引入js ![](http://h.yiniuedu.com/fc8c1e295d81c67a9f9feac7c6f275b0) ## 三、頁面CSS樣式 ![](http://h.yiniuedu.com/1a3b5265804ffac62bdb38046aa04b73)