Web前端大型课程设计（版本2.0）。

简介：
1、设计的目的 该棋手类网站旨在纪念个人对围棋的热爱，并寄托对当下美好时光以及无限未来的憧憬。 2、设计布局 主页的布局设计将标准的导航栏置于网站的右上角，导航栏包含主页、国内风云、风云人物、国外盛况以及国外四位棋手的简介和比赛报名等模块。用户可以通过点击相应的导航标签，跳转到对应模块的详细页面进行浏览。网站的左上角则展示网站标题，中间部分则采用背景图来强化整体网站风格。网站中央区域主要呈现图片与内容简介，以介绍国内棋手界面的风云变幻。左侧区域则以图片为主导，突出主题内容。随后是“风云人物”链接资料区，用户点击对应人物的链接，将弹出一个DIV文本框显示该棋手的详细风云人物资料简介。通过点击文本框右侧的关闭按钮可以轻松关闭该弹出的文本框，从而满足网站总体运营的需求。接下来是“国外盛况”介绍部分，下方依次排列四张围棋手的图片，采用一字排开的设计风格；鼠标悬停在图片上时会显示棋手的姓名和简介；点击图片可以实现棋手图片的放大显示，并支持左右切换功能。点击左上角的关闭按钮则可关闭弹出的图片窗口。最后，“国外四位棋手简介”区域采用了树形布局的四个DIV框，错落有致地排列展示了四位棋手对应的资料简介以及相关获奖信息。 网站底部靠近区域设置了国内群雄争霸比赛报名的Form表单，包含了棋手姓名、电话、邮箱以及比赛宣言等四项必填信息。在提交报名之前，系统会对输入框进行格式校验，若填写内容未符合要求则会提示用户修改；直至所有内容都按照规范填写后方可提交报名申请。完成报名提交后，系统会弹出“恭喜棋手，报名成功，请等待组委会后续短信通知比赛规则”提示框供用户确认查看。 3、网站的具体设计流程 首先，我们选择使用前端开发利器 WebStorm 作为本网页制作工具，并启动一个前端项目工程。随后，创建与该项目相对应的文件夹结构，用于存放各种 CSS、JavaScript 文件，以及网页中使用的各类图片。此外，除了主页面 index.html 之外，还需将所有二级页面的文件存储在名为“html”的文件夹下。在二级页面以及主页之间跳转的网页链接上，应采用相对路径而非绝对路径。以下是创建好的项目工程目录结构的示例。 接下来，我们将着手设计网站的主页——即核心内容 index.html。首先要规划整体导航栏的栏目，并确保点击对应主题能够链接到其详情页。为此，我们利用 `href` 标签和 `id` 属性进行位置定位。整个页面的布局采用 CSS 结合 DIV 布局方式：最外层的 DIV 作为框架，而导航栏的设计则在此框架内完成。