4.服務簡要界面 · Web前端開發手冊

## 一、服務簡要界面設計效果圖（4）服務簡要頁面，服務簡要界面如圖所示： ![](http://h.yiniuedu.com/5867fd0df113bd7d4d9a0b531aaff3d0) 該頁面整體布局分為上中下，上面為導航菜單和圖片。中間為內容區，下面為頁腳區，顯示聯系郵箱、聯系地址，聯系QQ，聯系電話，以及聯系我們，版權所有、ICP備案、資源活動、法律聲明和環保方案。中間內容區：服務簡要頁面有三個標簽，分別是：環保工程、大氣工程和水處理工程，每個標簽下5張圖片，要求按照一定的規則整齊排列，點擊不同圖片跳轉到不同的案例頁面。每個圖片都要和標簽對應一致。服務簡要頁面主要展示公司所從事服務的行業案例圖片展示。環保工程 ![](http://h.yiniuedu.com/ec82fb923289c0a02d25ca4ec665cb8e) 大氣工程 ![](http://h.yiniuedu.com/ad34a23e4e9ae403e9cb5a4b74a1a3b7) 水處理工程 ![](http://h.yiniuedu.com/e7852dcc7dcb80146e0ca696d958c03b) ## 二、服務簡要界面布局實現 ![](http://h.yiniuedu.com/68534d8a86e95c0b1ff7989541cceb70) ![](http://h.yiniuedu.com/ac339afd3e01473093a5fdf8fb4c10d4) ## 三、頁面CSS樣式實現 ![](http://h.yiniuedu.com/781c95df7698a752ae6450725a16a27b) ## 四、頁面js文件 ![](http://h.yiniuedu.com/cd6e95ed408d9cef03850222e082c14c)