简介：
这是一份包含多个前端设计课程作业项目的压缩文件，内含HTML、CSS和JavaScript等技术的实际应用案例。 设计一个网站来纪念个人旅游的日子，并展望未来的美好愿景。 ### 设计布局： 主页的左上角包含网站标题名称及当前在线人数，背景图引入页面氛围；右上角设有下拉式用户头像框，点击后显示“我的旅游日记”、“个人中心”和“退出”等选项。未登录状态下提供“登录”与“注册”的按钮链接至相应的页面。设计初衷是确保只有已登录的用户才能发布私人旅行日志以保证内容隐私性。 主页中央部分设有三大板块：“最热”，“最新”，及“话题”。每个版块下展示五篇相关日记标题，点击后跳转到具体详情页。“最热”依据浏览量排序，“最新”则按照发布时间排列；而“话题”则是根据当日主题进行分类。网站底部左下方简述设计目的，并在右下方提供赞助商信息的链接。 ### 具体实施步骤： 采用WebStorm作为前端开发工具，创建项目文件夹存储CSS、JS和图片等资源，二级页面存放于html文件夹内并通过相对路径实现跳转功能。主页index.html为网站核心内容页，所有二级页面均可从该主页面访问并返回。 设计时使用了CSS+DIV布局技术，并通过抽取重复代码的方式优化效率（如利用header.html与footer.html分别替代首页头部和底部信息）。背景图的引入采用background-image:url(../pic/backpic.jpeg); background-repeat: no-repeat; background-size:100%这样的方式。日记链接及网站底部链接使用了ui、li标签以实现导航功能，同时在中屏显示“最新”、“最热”等主题下的旅游日记标题。