前端设计课程的最终项目。

简介：
1、该网站的设计旨在纪念个人旅行的美好时光，以及对无限未来的憧憬。它捕捉了过去的美丽回忆，并表达了对未来的期许。 2、网站的布局设计主要集中在左上角，其中包含网站的标题名称和当前在线人数等信息。背景图则在右上角进行引入，点击个人头像模态框会弹出下拉列表，该列表包含了“我的旅游日记”、“个人中心”和“退出”等链接。此外，还设有登录和注册按钮，点击登录按钮即可进入登录页面。网站的设计初衷是确保用户在发布旅游日记前必须登录，从而更好地保障隐私。网站中央的内容区域则分为三大板块：最热、最新和话题三个主题驿站。每个主题下都列出了五条旅游日记的标题链接，用户可以通过点击相应的链接跳转到日记详情页面。 “最热”板块按照浏览次数降序排列， “最新”板块则按照旅游日记的发布时间进行排序，最新的旅游日记内容会排在最前面；而“话题”板块则是根据旅游日记的主题进行分类整理。网站的底部左下角提供了一个关于设计目的的简要介绍，右下角则分别展示了个人联系方式、合作方式和赞助商信息。点击名字会弹出相应的图片展示。 3、网站的具体设计流程首先选择了前端开发利器 WebStorm 作为本网页制作工具。随后创建了前端项目工程并建立了相应的文件夹结构，用于存放 CSS、JavaScript 文件以及网页中使用的各种图片，除了主页面 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 标签呈现, 在中屏显示的最新、最热、话题等主题下的具体旅游日记标题信息。