大作業：開發一個精美的 Web 網站
大作業：開發一個精美的 Web 網站
實驗目的：
掌握一個完整精美網頁開發的基本方法
實驗要求：
1、開發一個 Web 站點，至少有 3 個以上的頁面；
2、採用 CSS 和 HTML 文件分開方法；
3、網頁中至少應包括圖片和文本內容；
4、網頁主題突出、布局合理、設計美觀。
設計詳情：
1. 大作業包括六個網站（登入，選擇修仙類型（法修，劍修，碼修，人修），主題是修仙。
2.登入介面
- 簡單圖片與文字顯示。
- 簡單 js
- 在 go 處創建去選擇修仙類型的頁面鏈接。
3. 選擇修仙類型介面
利用 css 設置可變化背景。
利用 css 設置可變化背景。
- 插入文字 利用<marquee ></marquee>使文字滾動起來。
- Js 部分
- 彈出窗口
-
音樂播放按鈕
- css 實現圖片翻頁功能
4.法修介面
- 利用簡單 js 按鈕控制音樂播放，同上
- 簡單文字與影片排版。
- 創建鏈接返回修仙選擇介面。
- 利用 css 實現圖片散開隱藏功能。
5.劍修介面
- 3D 輪播功能（滑鼠放在上面有會有顏色）
- 菜單欄（包括二級菜單） <nav> 標籤定義導航鏈接的部分。</nav> （利用多層嵌套實現多級菜單導航。）
- 簡單表格製作，對圖樣利用 css 設計樣式。
- 圖片自動亂換播放，同實驗一。
- 創建鏈接返回修仙選擇介面。
6.人修介面
- 創建鏈接返回修仙選擇介面。
- 詳細設計思路同實驗三。
- 利用 js 實現簡單計算成績功能，並對其提出適當建議。設計詳情思路同
- 創建鏈接返回修仙選擇介面。
- 背景圖片變換功能，同上。
- 簡單文字顯示，利用簡單css 對其樣式調整。
- 利用CSS設計美觀化列表。
-
利用 css 設計圖片拉伸功能
display: flex;將對象作為彈性伸縮盒顯示
justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items 屬性定義 flex 子項在 flex 容器的當前行的側軸（縱軸）方向上的對齊方式。
flex-wrap 屬性規定 flex 容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。Wrap：規定靈活的項目在必要的時候拆行或拆列。
flex-direction 屬性規定靈活項目的方向。
visibility 屬性規定元素是否可見。
box-shadow 屬性可以設置一個或多個下拉陰影的框。
border-radius：向 div 圖層添加圓角邊框。
opacity 屬性設置元素的不透明級別。
心得體會：
在這次大作業實驗中，因為興趣原因選擇了修仙的主題。但是後來發現設計實現修仙主題時不知道可以實現什麼功能，通過對資料的查找與利用，最終使修仙這個主題更加完整。但是存在比較致命的缺點是，雖然功能齊全，並且花里胡哨的，但是頁面設計與圖片，色彩搭配可能和常人不一樣吧，被評價為「早期盜版網站審美」，只能說每個人的審美欣賞點不一樣吧。對於這份大作業還是花了我挺多時間與精力，尤其是為了讓介面更加完整，所以需要學習課本之外的知識。
雖然以後不走開發的路子，但是留個紀念而且也可以給大家提供點思路也挺好的，以後累了回來捏一捏。
努力修仙，早一步飛升!!!各位碼修道友也要加油哇！！！
源碼地址：//github.com/Simmon2333/Web-Test（大作業）
