前端设计课程大作业.zip
1、设计的目的
做个网站以怀念个人旅游的日子。还有此刻的美丽,以及无限的未来向往。
2、设计布局
主页设计布局是在网站的左上角是网站标题名称、当前在线人数等，有背景图引入，右上角有个人头像模态下拉框，点击出现下拉列表，包含我的旅游日记、个人中心、退出等链接，还有登录、注册按钮，点击登录按钮来到登录页面，网站设计初衷就是自己要登录后才能发布旅游日记，这样更能保证私密性。网站中央是内容，包含三大板块，分别是最热、最新、话题三个主题驿站，每个主题下面是列出5条内容日记的标题链接，点击对应链接跳转到日记详情页面，最热代表浏览次数最多，最新就是根据发布旅游日记的时间来排序，最新发的日记内容排在最前面，话题是根据这次发布旅游日记的主题来排序的。网站尾部的左下角是网站设计目的简介，右下角分别是个人联系方式、合作方式、赞助商本人等。点击名字会弹出图片。
3、网站具体设计过程
首先选定 本网页制作工具是前端开发利器： WebStorm，创建前端项目工程，并创建相应的文件夹，存放各个css、js，还有网页中用到的各种图片，以及除了主页面index.html之外的二级页面，其存放在html文件夹下，在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径，创建好的项目工程目录结构如下所示;
首先设计网站主页也就是核心内容index.html，所有的二级页面都可以从主页跳转过去，相应的二级页面也都有主页的链接，可以随时返回到主页面。页面总体采用 CSS+DIV 布局，最外层DIV为框架，对重复页面代码进行抽取，比如网站头部用header.html来代替，网站底部用footer.html来代替，在各个要引用的网页上直接在其头部和尾部用iframe标签引入即可（），在背景图引入时采用（background-image:url("../pic/backpic.jpeg"); background-repeat: no-repeat; background-size:100% a）background-image标签进行操作。在日记链接显示以及网站底部链接上采用ui、li标签，在中屏显示的最新、最热、话题等主题下的具体旅游日记标题。
文件下载
资源详情
[{"title":"（ 68 个子文件 2.22MB ） 前端设计课程大作业.zip","children":[{"title":"前端设计课程大作业","children":[{"title":"css","children":[{"title":"bootstrap.css <span style='color:#111;'> 149.19KB </span>","children":null,"spread":false},{"title":"site.css <span style='color:#111;'> 2.72KB </span>","children":null,"spread":false}],"spread":true},{"title":"pic","children":[{"title":"202009081648222500.jpg <span style='color:#111;'> 81.98KB </span>","children":null,"spread":false},{"title":"202009081533206562.jpg <span style='color:#111;'> 44.47KB </span>","children":null,"spread":false},{"title":"13.gif <span style='color:#111;'> 1.70KB </span>","children":null,"spread":false},{"title":"202005211418406247.jpg <span style='color:#111;'> 94.72KB </span>","children":null,"spread":false},{"title":"0fbc5a16c3fa4a9386fbeb2388c58c75.jpg-mobile <span style='color:#111;'> 44.95KB </span>","children":null,"spread":false},{"title":"625a65869f294c09b994cf695d7a638f.jpg-mobile <span style='color:#111;'> 122.52KB </span>","children":null,"spread":false},{"title":"1f3c1.png <span style='color:#111;'> 861B </span>","children":null,"spread":false},{"title":"8f9b-86f9-445f-8330-00f4f18184ed51 <span style='color:#111;'> 28.52KB </span>","children":null,"spread":false},{"title":"1f64f.png <span style='color:#111;'> 1.43KB </span>","children":null,"spread":false},{"title":"b1b861e3ba4847398f7fd620e9f41121.jpg-mobile <span style='color:#111;'> 28.10KB </span>","children":null,"spread":false},{"title":"2371-21b4-441b-aaae-3d29355fcf0204 <span style='color:#111;'> 2.26KB </span>","children":null,"spread":false},{"title":"645518fec5cd4ca5922990128c5110ea.jpg-mobile <span style='color:#111;'> 78.96KB </span>","children":null,"spread":false},{"title":"202005211412517080.jpg <span style='color:#111;'> 78.03KB </span>","children":null,"spread":false},{"title":"1f3a4.png <span style='color:#111;'> 870B </span>","children":null,"spread":false},{"title":"1568764917665.png@!750 <span style='color:#111;'> 2.17KB </span>","children":null,"spread":false},{"title":"dd825cd10d5d47a39bdcb474f037da62.jpg-mobile <span style='color:#111;'> 110.39KB </span>","children":null,"spread":false},{"title":"c5f8d70b6f184078b2b2267907eba840.jpg-mobile <span style='color:#111;'> 23.45KB </span>","children":null,"spread":false},{"title":"202005211528006047.jpg <span style='color:#111;'> 40.82KB </span>","children":null,"spread":false},{"title":"202005211528153758.jpg <span style='color:#111;'> 68.95KB </span>","children":null,"spread":false},{"title":"202005211521428431.jpg <span style='color:#111;'> 55.23KB </span>","children":null,"spread":false},{"title":"202005211428263952.jpg <span style='color:#111;'> 22.17KB </span>","children":null,"spread":false},{"title":"babe8dd1c08f455e8d8b06a314182969.jpg-mobile <span style='color:#111;'> 44.72KB </span>","children":null,"spread":false},{"title":"202005211415096283.jpg <span style='color:#111;'> 76.33KB </span>","children":null,"spread":false},{"title":"202009081527289687.jpeg <span style='color:#111;'> 96.06KB </span>","children":null,"spread":false},{"title":"202005211421512795.jpg <span style='color:#111;'> 25.52KB </span>","children":null,"spread":false},{"title":"userimg.jpg <span style='color:#111;'> 61.51KB </span>","children":null,"spread":false},{"title":"202009081518589062.jpg <span style='color:#111;'> 48.62KB </span>","children":null,"spread":false},{"title":"progress.gif <span style='color:#111;'> 2.55KB </span>","children":null,"spread":false},{"title":"0c91-eca0-4054-b536-f85ba5c7c2c641 <span style='color:#111;'> 18.88KB </span>","children":null,"spread":false},{"title":"df4c9a762ed14c09ad2fa20c6818b295.jpg-mobile <span style='color:#111;'> 46.09KB </span>","children":null,"spread":false},{"title":"202005211427315914.jpg <span style='color:#111;'> 20.64KB </span>","children":null,"spread":false},{"title":"79.gif <span style='color:#111;'> 1.48KB </span>","children":null,"spread":false},{"title":"top.png <span style='color:#111;'> 1.50KB </span>","children":null,"spread":false},{"title":"202005211421283508.jpg <span style='color:#111;'> 59.51KB </span>","children":null,"spread":false},{"title":"202009081540090000.jpeg <span style='color:#111;'> 71.47KB </span>","children":null,"spread":false},{"title":"1f3c6.png <span style='color:#111;'> 1.41KB </span>","children":null,"spread":false},{"title":"2020080815591990751.jpg <span style='color:#111;'> 111.33KB </span>","children":null,"spread":false},{"title":"backpic.jpeg <span style='color:#111;'> 116.39KB </span>","children":null,"spread":false},{"title":"202009081536453593.jpeg <span style='color:#111;'> 60.43KB </span>","children":null,"spread":false},{"title":"202005211624079812.jpg <span style='color:#111;'> 69.47KB </span>","children":null,"spread":false},{"title":"202005211417081670.jpg <span style='color:#111;'> 65.64KB </span>","children":null,"spread":false},{"title":"159.gif <span style='color:#111;'> 23.11KB </span>","children":null,"spread":false},{"title":"202005211520075133.jpg <span style='color:#111;'> 25.58KB </span>","children":null,"spread":false}],"spread":false},{"title":"站点说明书.docx <span style='color:#111;'> 75.09KB </span>","children":null,"spread":false},{"title":"fonts","children":[{"title":"glyphicons-halflings-regular.woff <span style='color:#111;'> 22.88KB </span>","children":null,"spread":false},{"title":"glyphicons-halflings-regular.woff2 <span style='color:#111;'> 17.61KB </span>","children":null,"spread":false},{"title":"glyphicons-halflings-regular.ttf <span style='color:#111;'> 44.34KB </span>","children":null,"spread":false},{"title":"glyphicons-halflings-regular.eot <span style='color:#111;'> 19.66KB </span>","children":null,"spread":false},{"title":"glyphicons-halflings-regular.svg <span style='color:#111;'> 106.19KB </span>","children":null,"spread":false}],"spread":true},{"title":"index.html <span style='color:#111;'> 6.94KB </span>","children":null,"spread":false},{"title":"js","children":[{"title":"jquery.min.js <span style='color:#111;'> 81.15KB </span>","children":null,"spread":false},{"title":"jquery-2.2.4.min.js <span style='color:#111;'> 83.58KB </span>","children":null,"spread":false},{"title":"bootstrapValidator.js <span style='color:#111;'> 326.25KB </span>","children":null,"spread":false},{"title":"bootstrap.min.js <span style='color:#111;'> 36.18KB </span>","children":null,"spread":false},{"title":"bootstrapValidator.min.js <span style='color:#111;'> 108.35KB </span>","children":null,"spread":false}],"spread":true},{"title":"html","children":[{"title":"login.html <span style='color:#111;'> 7.83KB </span>","children":null,"spread":false},{"title":"footer.html <span style='color:#111;'> 4.12KB </span>","children":null,"spread":false},{"title":"message2.html <span style='color:#111;'> 11.98KB </span>","children":null,"spread":false},{"title":"hangzhou.html <span style='color:#111;'> 10.92KB </span>","children":null,"spread":false},{"title":"header.html <span style='color:#111;'> 2.26KB </span>","children":null,"spread":false},{"title":"message.html <span style='color:#111;'> 12.14KB </span>","children":null,"spread":false}],"spread":true},{"title":".idea","children":[{"title":"misc.xml <span style='color:#111;'> 179B </span>","children":null,"spread":false},{"title":"modules.xml <span style='color:#111;'> 313B </span>","children":null,"spread":false},{"title":"workspace.xml <span style='color:#111;'> 26.96KB </span>","children":null,"spread":false},{"title":"前端设计课程大作业.iml <span style='color:#111;'> 469B </span>","children":null,"spread":false},{"title":"inspectionProfiles","children":null,"spread":false}],"spread":true},{"title":"scss","children":[{"title":"style.scss <span style='color:#111;'> 2.24KB </span>","children":null,"spread":false}],"spread":true}],"spread":true}],"spread":true}]
评论信息
其他资源
- AD9910 QPSK实现，ISE完整代码
- EPUB唯美字体包KOBO专用版3.0
- ir2110使用方法以及自举电容的选择
- JAVA_EE_api_中英文对照版.chm(田克传制作)
- labview下3D姿态显示
- 摩拜杯 算法挑战赛 第三名 解决方案
- C#winform打开图片文件夹列表自动显示
- mesh 2d 有限元划分网格 matlab程序
- javaweb-文件管理系统
- 雷蛇幻彩灯光配置文件官方静态彩虹
- 数学建模元胞自动机.rar
- STM32人机界面demo程序
- 用MFC实现折线图，柱形图，饼图
- 集成固体微波电路-射频设计基础
- Java EE实用教程 郑阿奇 第3版 课本源代码
- 视频网闸功能边界.xls
- 在MapReduce中对大型数据集进行聚类的高效分布式密度峰
- C#连接MongoDB数据库.docx
- python-3.7.9-macosx10.9.pkg
- redis-manager.zip
- PW5200系列_2.0.pdf
- ivykis-0.42.4-2.el8.x86_64.rpm
- 餐饮管理系统.zip
- uboot启动流程的详细分析
- 纯CSS3绘制小叮当头像动画特效.zip
- json的jmeter的jar包
- Linux网络体系结构：Linux内核中网络协议的设计与实现
- FTP客户端程序
免责申明
【只为小站】的资源来自网友分享，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论 【只为小站】 经营者是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二条之规定，若资源存在侵权或相关问题请联系本站客服人员，zhiweidada#qq.com，请把#换成@，本站将给予最大的支持与配合，做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明
本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二条之规定，若资源存在侵权或相关问题请联系本站客服人员，zhiweidada#qq.com，请把#换成@，本站将给予最大的支持与配合，做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明