Web前端大作业-港珠澳大桥.zip

上传者: 41327345 | 上传时间: 2021-04-04 09:03:09 | 文件大小: 6.23MB | 文件类型: ZIP
1、设计的目的 做个网站以纪念港珠澳大桥彰显大国基建魅力,为中国工程师点赞喝彩。港珠澳大桥此刻的美丽,以及无限的未来向往正是中国工匠人的工匠精神延续。 2、设计布局 主页设计布局是在网站的左上角是网站标题名称为港珠澳大桥、首页、项目简介、设计理念、设计特点、大桥影响、桥见美景共六大模块,点击相应的导航栏目页面跳转到相应位置。首页采用div+js+css来实现四张港珠澳大桥背景图的引入和隔一定时间实现循环自动来回切换背景图,通过js设置切换间隔,每张图的停留时间。网站中央是内容,分别包含五大板块,每个版块由不同的div块组成,右上角是主题,下面是详情的文字介绍,右边配上相应的图片,增加网站的观赏性,吸引性。港珠澳大桥美的恰恰是其在不同场景下的景色图。网站底部分别是网站版权介绍信息,采用居中透明显示,文字大小和样式用css来控制,美观大方。 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径,创建好的项目工程目录结构如下所示: 站点结构图: 首先设计网站主页也就是核心内容index.html。页面总体采用 CSS+DIV 布局,最外层DIV为框架。导航栏主要采用a标签以及span标签,并在a标签里面用锚点链接到其对应的模块位置,点击即可跳转到指定位置,使得网站更加人性化,方便展示内容。

文件下载

资源详情

[{"title":"( 34 个子文件 6.23MB ) Web前端大作业-港珠澳大桥.zip","children":[{"title":"Web前端大作业-港珠澳大桥","children":[{"title":"fonts","children":null,"spread":false},{"title":"html","children":null,"spread":false},{"title":"js","children":null,"spread":false},{"title":"css","children":[{"title":"default.css <span style='color:#111;'> 2.84KB </span>","children":null,"spread":false},{"title":"bootstrap.css <span style='color:#111;'> 142.73KB </span>","children":null,"spread":false},{"title":"chocolat.css <span style='color:#111;'> 2.08KB </span>","children":null,"spread":false},{"title":"img","children":[{"title":"dot.png <span style='color:#111;'> 507B </span>","children":null,"spread":false},{"title":"dot_ie6.png <span style='color:#111;'> 389B </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":".idea","children":[{"title":"misc.xml <span style='color:#111;'> 179B </span>","children":null,"spread":false},{"title":"workspace.xml <span style='color:#111;'> 48.62KB </span>","children":null,"spread":false},{"title":"前端设计课程大作业.iml <span style='color:#111;'> 469B </span>","children":null,"spread":false},{"title":"inspectionProfiles","children":null,"spread":false},{"title":"modules.xml <span style='color:#111;'> 313B </span>","children":null,"spread":false}],"spread":true},{"title":"index.html <span style='color:#111;'> 14.10KB </span>","children":null,"spread":false},{"title":"站点说明书.docx <span style='color:#111;'> 70.05KB </span>","children":null,"spread":false},{"title":"pic","children":[{"title":"4.jpg <span style='color:#111;'> 1.32MB </span>","children":null,"spread":false},{"title":"bc1e6604c7bbcf1eb6b9c88f9c400d7.png <span style='color:#111;'> 135.82KB </span>","children":null,"spread":false},{"title":"5beb7faaae57b.jpg <span style='color:#111;'> 20.06KB </span>","children":null,"spread":false},{"title":"4.5.jpg <span style='color:#111;'> 162.02KB </span>","children":null,"spread":false},{"title":"rig-img01.jpg <span style='color:#111;'> 50.26KB </span>","children":null,"spread":false},{"title":"5ca468e97eecf.png <span style='color:#111;'> 224.85KB </span>","children":null,"spread":false},{"title":"4 .jpg <span style='color:#111;'> 59.74KB </span>","children":null,"spread":false},{"title":"5ca46924e48ca.png <span style='color:#111;'> 283.41KB </span>","children":null,"spread":false},{"title":"3.jpg <span style='color:#111;'> 38.53KB </span>","children":null,"spread":false},{"title":"p","children":[{"title":"4.jpg <span style='color:#111;'> 80.55KB </span>","children":null,"spread":false},{"title":"3.png <span style='color:#111;'> 284.52KB </span>","children":null,"spread":false},{"title":"3.jpg <span style='color:#111;'> 180.38KB </span>","children":null,"spread":false},{"title":"1.jpg <span style='color:#111;'> 245.59KB </span>","children":null,"spread":false},{"title":"2.jpg <span style='color:#111;'> 200.67KB </span>","children":null,"spread":false}],"spread":false},{"title":"943646411a7dd3ff29f80b946cb2991.png <span style='color:#111;'> 191.44KB </span>","children":null,"spread":false},{"title":"5ca46af3b8b50.png <span style='color:#111;'> 284.52KB </span>","children":null,"spread":false},{"title":"rig-img02.jpg <span style='color:#111;'> 6.99KB </span>","children":null,"spread":false},{"title":"1845ce822281e6ab9c1f07ab351af96.png <span style='color:#111;'> 211.59KB </span>","children":null,"spread":false},{"title":"1.jpg <span style='color:#111;'> 1.01MB </span>","children":null,"spread":false},{"title":"4b8571bd0046de8b466d0edb46eacc8.png <span style='color:#111;'> 190.16KB </span>","children":null,"spread":false},{"title":"e4334601a682f07959355df5ce33cbf.png <span style='color:#111;'> 144.71KB </span>","children":null,"spread":false},{"title":"2.jpg <span style='color:#111;'> 890.97KB </span>","children":null,"spread":false},{"title":"5cbe831467f2a.jpg <span style='color:#111;'> 163.44KB </span>","children":null,"spread":false}],"spread":false}],"spread":true}],"spread":true}]

评论信息

免责申明

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