Web前端大作业2.0.zip

上传者: 41327345 | 上传时间: 2021-04-04 09:03:07 | 文件大小: 11.41MB | 文件类型: ZIP
1、设计的目的 做个棋手类网站以怀念个人围棋的时光。还有此刻的美丽,以及无限的未来向往。 2、设计布局 主页设计布局是在网站的右上角是标准的导航栏,包括主页、国内风云、风云人物、国外盛况、国外四位棋手简介、比赛报名等,点击相应的导航标签,跳转到相同模块对应的详情页展示,其网站左上角是网站标题,中间穿插背景图来突出适应网站风格。网站中央是图片跟内容简介,主要介绍国内棋手界风云,左边是图片,突出主题。接下来是风云人物链接资料,点击对应人物会弹出DIV文本框显示每个棋手的风云人物资料简介,点击右边的关闭按钮会关闭整个弹出的文本框,非常方便适宜网站的总体要求。接下来是国外盛况介绍,下面依次是四张围棋手的图片一字排开设计,鼠标悬停在上面会出现棋手姓名以及简介,点击图片会把棋手图片放大到中屏居中显示,还可以实现左右切换棋手图片,点击左上角的关闭按钮即可关闭弹出的图片。接下来拉到下面的国外四位棋手简介可以发现这是树形布局的四个div框,依照树形结构错落有致排开,分别展示上面四位棋手对应的资料简介,以及人物生平获奖资料等。网站靠近底部的位置就是国内群雄争霸比赛报名的Form表单,有棋手姓名、棋手电话、邮箱、比赛宣言等四项内容,并在提交前会依次检验文考框是否已经按照格式要求填写,如果没有按照要求规则填写会提示请修改该内容,直到符合要求为止,才能报名,填写完毕后点击报名,会弹出“恭喜棋手,报名成功,请等待组委会后续短信通知比赛规则”提示框,点击确定即可关闭报名成功提示框。 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径,创建好的项目工程目录结构如下所示。 首先设计网站主页也就是核心内容index.html,先要设计总体的导航条栏目,并点击对应主题来到其链接的详情页,这里采用href标签,用id进行位置定位。页面总体采用 CSS+DIV 布局,最外层DIV为框架,导航条设计。

文件下载

资源详情

[{"title":"( 45 个子文件 11.41MB ) Web前端大作业2.0.zip","children":[{"title":"Web前端大作业2.0","children":[{"title":"WindCloud","children":[{"title":"index.html <span style='color:#111;'> 41.51KB </span>","children":null,"spread":false},{"title":"js","children":[{"title":"jquery.filterizr.js <span style='color:#111;'> 37.13KB </span>","children":null,"spread":false},{"title":"SmoothScroll.min.js <span style='color:#111;'> 6.44KB </span>","children":null,"spread":false},{"title":"controls.js <span style='color:#111;'> 574B </span>","children":null,"spread":false},{"title":"jquery-1.11.1.min.js <span style='color:#111;'> 93.54KB </span>","children":null,"spread":false},{"title":"bootstrap.js <span style='color:#111;'> 68.08KB </span>","children":null,"spread":false},{"title":"jquery.chocolat.js <span style='color:#111;'> 9.90KB </span>","children":null,"spread":false},{"title":"jarallax.js <span style='color:#111;'> 14.35KB </span>","children":null,"spread":false},{"title":"easing.js <span style='color:#111;'> 4.65KB </span>","children":null,"spread":false}],"spread":true},{"title":"pic","children":[{"title":"1-1G1021243430-u.jpg <span style='color:#111;'> 12.11KB </span>","children":null,"spread":false},{"title":"left.png <span style='color:#111;'> 711B </span>","children":null,"spread":false},{"title":"1-1G1021243160-L.jpg <span style='color:#111;'> 2.81MB </span>","children":null,"spread":false},{"title":"1-1G1021242070-L.jpg <span style='color:#111;'> 1.35MB </span>","children":null,"spread":false},{"title":"1-1G1021242230-L.jpg <span style='color:#111;'> 3.55MB </span>","children":null,"spread":false},{"title":"close.png <span style='color:#111;'> 704B </span>","children":null,"spread":false},{"title":"1-1G1021242380-L.png <span style='color:#111;'> 378.48KB </span>","children":null,"spread":false},{"title":"1.jpg <span style='color:#111;'> 43.38KB </span>","children":null,"spread":false},{"title":"1-1G1021242500-L.jpg <span style='color:#111;'> 26.32KB </span>","children":null,"spread":false},{"title":"1-1G1021243310-L.jpg <span style='color:#111;'> 2.80MB </span>","children":null,"spread":false},{"title":"1-1G1021243430-L.jpg <span style='color:#111;'> 26.92KB </span>","children":null,"spread":false},{"title":"right.png <span style='color:#111;'> 1.30KB </span>","children":null,"spread":false},{"title":"1-1G1021243030-L.jpg <span style='color:#111;'> 36.87KB </span>","children":null,"spread":false},{"title":"3.jpg <span style='color:#111;'> 57.43KB </span>","children":null,"spread":false}],"spread":false},{"title":".idea","children":[{"title":"misc.xml <span style='color:#111;'> 179B </span>","children":null,"spread":false},{"title":"workspace.xml <span style='color:#111;'> 155.39KB </span>","children":null,"spread":false},{"title":"WindCloud.iml <span style='color:#111;'> 469B </span>","children":null,"spread":false},{"title":"inspectionProfiles","children":null,"spread":false},{"title":"modules.xml <span style='color:#111;'> 277B </span>","children":null,"spread":false}],"spread":true},{"title":"站点说明书.docx <span style='color:#111;'> 56.49KB </span>","children":null,"spread":false},{"title":"fonts","children":[{"title":"glyphicons-halflings-regular-5.html <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false},{"title":"glyphicons-halflings-regulard41d.html <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false},{"title":"fontawesome-webfont3e6e-2.html <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false},{"title":"fontawesome-webfont3e6e.html <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false},{"title":"fontawesome-webfont3e6e.ttf <span style='color:#111;'> 149.21KB </span>","children":null,"spread":false},{"title":"glyphicons-halflings-regular-3.html <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false},{"title":"fontawesome-webfont3e6e.eot <span style='color:#111;'> 74.72KB </span>","children":null,"spread":false},{"title":"glyphicons-halflings-regular.html <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false},{"title":"fontawesome-webfontd41d.eot <span style='color:#111;'> 74.72KB </span>","children":null,"spread":false},{"title":"fontawesome-webfont3e6e-3.html <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false},{"title":"glyphicons-halflings-regular-2.html <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false},{"title":"glyphicons-halflings-regular-4.html <span style='color:#111;'> 1.28KB </span>","children":null,"spread":false}],"spread":false},{"title":"css","children":[{"title":"animate.css <span style='color:#111;'> 65.59KB </span>","children":null,"spread":false},{"title":"chocolat.css <span style='color:#111;'> 2.15KB </span>","children":null,"spread":false},{"title":"font-awesome.css <span style='color:#111;'> 38.02KB </span>","children":null,"spread":false},{"title":"bootstrap.css <span style='color:#111;'> 142.80KB </span>","children":null,"spread":false},{"title":"style.css <span style='color:#111;'> 26.00KB </span>","children":null,"spread":false}],"spread":true}],"spread":true}],"spread":true}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明