猫眼项目的学习与实操

一、简述

经过一个多月的HTML和CSS的学习,我从一个啥也不会的小白,慢慢变得能够独立完成一系列页面,想要更全面的了解自己这一阶段的学习成果,我开始了为期5天的"猫眼"项目演练,即根据现有的猫眼官网模板进行代码编写,以下为我的计划,以及中途遇到的问题和解决方法。

二、计划

三、项目效果图

PC:

1、首页

添加各种hover效果,并且在需要跳转的地方添加<a>标签

2、电影

扫描二维码关注公众号,回复: 7801668 查看本文章

每一个电影海报被hover有放大效果,且可以跳转到相应的电影简介页面

  1. 电影简介(详情)

使用复选框实现评论的显示、隐藏效果

  1. 榜单

 

  1. 资讯

    使用工程化,将相同的属性单独写出,简化了代码

     

     

  2. 登录

用<a>标签与首页相连接,增加用户体验

  1. 注册

若没有账号,可以进行注册,注册成功后跳转到首页。

 

 

app

  1. 登录

移动端的用户通常安装软件后就会进行登录

  1. 注册

    没有账号可以进行注册

  2. 影院——热映

上方为广告,使用动画让图片滚动显示

  1. 电影院

选择想看的电影,进入购票,可以就近选择电影院

  1. 时间

进入电影院后可以更换想看的电影

可以横向滚动,选择不同的电影

  1. 电影详情

 

下方演员介绍可以进行横向滚动

 

电影详情简介可以隐藏内容,增添用户体验感

  1. 购票——选座

选时间,时间引用了字体,区别于其他内容,方便用户阅读

选座可以更加完善,用复选框的原理让座位可以被选中

  1. 待映

  1. 找片、发现

  1. 我的

用户可以从我的—设置里面进行账号的更换

 

四、心得

在进行该项目时,不仅将 我目前所学进行了统一的整理,加强了使用的熟练度,并且在我遇到各种困难和未知的知识点时,促使我进行了自学与总结,加强了我的学习能力,明白了自己哪里掌握良好,哪里是我的薄弱点,有效的提高了我的html与css水平。总的来说,要想熟练运用html和css就是需要不断地练习,希望在之后的学习工作中我可以做到效果达成的过程中,尽量简化代码,让人二次阅读更轻松。

猜你喜欢

转载自www.cnblogs.com/yuanjunjundebo/p/11827936.html