大作业：开发一个精美的 Web 网站

大作业：开发一个精美的 Web 网站

实验目的：

掌握一个完整精美网页开发的基本方法

实验要求：

1、开发一个 Web 站点，至少有 3 个以上的页面；

2、采用 CSS 和 HTML 文件分开方法；

3、网页中至少应包括图片和文本内容；

4、网页主题突出、布局合理、设计美观。

 

设计详情：

1. 大作业包括六个网站（登入，选择修仙类型（法修，剑修，码修，人修），主题是修仙。

2.登入界面

• 简单图片与文字显示。

• 简单 js

                                                

• 在 go 处创建去选择修仙类型的页面链接。

3. 选择修仙类型界面

•  利用 css 设置可变化背景。

• 插入文字  　　利用使文字滚动起来。

• Js 部分

•  弹出窗口 
• 音乐播放按钮

 

• css 实现图片翻页功能

4.法修界面

• 利用简单 js 按钮控制音乐播放，同上
•  简单文字与视频排版。
•  创建链接返回修仙选择界面。

 

•  利用 css 实现图片散开隐藏功能。

5.剑修界面

•  3D 轮播功能（鼠标放在上面有会有颜色）

•  菜单栏（包括二级菜单）       
  标签定义导航链接的部分。
       （利用多层嵌套实现多级菜单导航。）
•  简单表格制作，对图样利用 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 属性设置元素的不透明级别。

 

心得体会：

　　在这次大作业实验中，因为兴趣原因选择了修仙的主题。但是后来发现设计实现修仙主题时不知道可以实现什么功能，通过对资料的查找与利用，最终使修仙这个主题更加完整。但是存在比较致命的缺点是，虽然功能齐全，并且花里胡哨的，但是页面设计与图片，色彩搭配可能和常人不一样吧，被评价为“早期盗版网站审美”，只能说每个人的审美欣赏点不一样吧。对于这份大作业还是花了我挺多时间与精力，尤其是为了让界面更加完整，所以需要学习课本之外的知识。

　　虽然以后不走开发的路子，但是留个纪念而且也可以给大家提供点思路也挺好的，以后累了回来捏一捏。

　　努力修仙，早一步飞升!!!各位码修道友也要加油哇！！！

源码地址：https://github.com/Simmon2333/Web-Test（大作业）