世界杯静态网页

介绍 😊

这是一个以世界杯为主题的静态网页，是我和好友在大一下学期，一起做的 HTML+CSS 期末作品。因为世界杯刚好在期末期间举办，所以以此为项目主题。这是我们做的第一个 HTML+CSS 项目，比较用心去做了，现在开源出来，希望对你们的学习有帮助哈。

浏览 👀

点击 世界杯静态网页 即可在线浏览项目。

下载 🧑🏻‍💻

进入项目地址，点击 Clone or download 按钮，在点击 Download ZIP ，即可下载。解压文件后打开文件夹，点击 世界杯.html 即可跳转至浏览器浏览项目。

项目结构 ⛩

• 每个页面为一个文件夹，如 新闻页面 在名字为 新闻页面 的文件夹里。
• 因为 导航栏 和 尾栏 是每个页面的公共部分，所以我们把它们提取出来放在对应的文件夹里，由其他页面调用,如 导航栏 放在名字为 导航栏 的文件夹里。
• 其中在每个页面的文件夹里，分别有 .html 文件 和 主体文件 文件夹，.html 文件为该页面的入口，而 主体文件 文件夹则存放着 .css 文件和网页的相关素材。

界面设计 🎨

• 整体采用圆角矩形、毛玻璃设计，并采用黑色为基色，使网页的内容更加凸显。
• 导航栏采用了类似于Mac OS dock的设计，美观大方，光标移动到图标上会放大。
• 尾栏采用了抽屉式设计，拉到最底才出现，向上拉则隐藏。（尾栏所列赞助商仅为样例，与本项目无关），其中右边的国旗和中国字样是地区选择框，我们希望我们的网站能让不同的国家和地区都能看，但具体功能没有实现。
• 赛况页面可以显示三个时间点的赛况信息，分别是今天、明天和昨天，点击栏目两边的按钮即可切换。
• 新闻页面采用两种尺寸的卡片显示新闻，以适应新闻内容的需要，以及让画面没那么单调。光标移动到新闻卡片，图片会自动放大，再移动到新闻标题，即可预览新闻部分内容。
• 球队页面采用提手式设计，光标移动到国旗和国家或以下区块，即可查看球队的介绍，而每个国名框的背景颜色，是我们精心挑选的颜色，是与国旗颜色最搭的颜色。其他新闻页面类似。
• 玩家页面分为两个部分，一个是球员，一个是教练。每个卡片上有玩家的名字、照片、号码、国家和国旗，其中球员的卡片上还有球服上的编号。
• 图片页面采用了一图一大框的模式，尽量让图的全部内容显示出来，让用户专注于图片的内容。
• 搜索页面我们希望有语音搜索的功能，但是没有实现，只放了个按钮哈。

分工 👬🏻

我负责的内容：

• 页面总设计
• 整个项目的导航栏
• 整个项目的尾栏
• 赛况页面
• 玩家页面
• 搜索页面

好友负责的内容：

• 讨论部分设计方案
• 素材收集与调整
• 新闻页面
• 球队页面
• 图片页面