## 首頁文件框架

首頁頁面為網站入口頁面,只有通過網址打開方可使用系統,所有用戶打開網站之后都可以看到環境保護網站的首頁頁面。
首頁頁面地址:index.html。
該頁面整體布局分為上中下,上面為導航菜單和圖片。中間為內容區,下面為頁腳區,顯示聯系郵箱、聯系地址,聯系QQ,聯系電話,以及聯系我們,版權所有、ICP備案、資源活動、法律聲明和環保方案。
中間內容區:服務介紹(垃圾分類、植樹造林和污水處理)、數據列表項、關于我們和志愿活動,要求每部分都要有圖片和文字說明。
服務介紹:垃圾分類、植樹造林和污水處理。
垃圾分類:四張圖片和對應文字解釋。
植樹造林:四張圖片和對應文字解釋。
污水處理:四張圖片和對應文字解釋。
數據列表項:展示垃圾分類改造發現次數、涉足新興市場數量、突破性發現數量、改造回放數量。
關于我們:圖片、標題、內容摘要、了解更多。
志愿活動:三張圖、文字描述、簡要介紹過長后用三個“…”替換。
通過導航菜單,可以從首頁點擊其它頁面,如:空氣凈化、園林景觀、服務簡要、動態新聞和聯系我們等頁面。
## 一、首頁界面設計效果圖

## 二、首頁界面布局
### 1.頭部引入文件

### 2.輪播圖效果實現

### 3.《服務介紹》內容區效果實現

### 4.《數據統計》內容區效果實現

### 5.《關于我們》內容區效果實現

### 6.《志愿活動》內容區效果實現

### 7.頁腳效果實現

### 8.引入js腳本文件

## 三、CSS樣式實現
### 1.index.css——頭部導航CSS樣式

### 2.回到頂部CSS樣式

### 3.index.css——輪播圖CSS樣式

### 4.index.css——服務介紹選項卡CSS樣式

### 5.index.css——數據列表CSS樣式

### 6.index.css——關于我們CSS樣式


### 7.index.css——志愿活動CSS樣式

### 8.common.css——通用樣式設置
### 9.導航標題樣式

### 10.導航下面的圖片樣式和底部樣式

### 11.reset.css——樣式設置

## 四、JS腳本實現
### 1.get-dom.js——元素獲取js腳本實現

### 2.to-top.js——回到頂部js腳本實現

### 3.index.js——圖片輪播和服務介紹選項卡功能js腳本實現
