不知不觉已经1个多月, 在这学习前端的一个多月里,纠结过、迷茫过也认可过,接下来就是检验我这一个多月时间里的学习成果,一个为期一周的项目。
项目简介:
项目分为PC端6个网页
1.登录、注册
2.电影首页
3.电影榜单
4.电影详情介绍
5.电影分类
6.资讯内容
和移动端9个网页
1.登录、注册
2.电影-待映
3.电影-热映
4.电影详情介绍
5.发现
6.我的
7.选择放映厅
8.选座
9.影院
项目特色:
PC端和移动端都能各自连通,从登录注册,到选座购票一气呵成。在此过程中,你可以浏览到电影的详细内容、资讯热点、口碑评分以及大家对此电影发表的评论。
项目开发中遇到的问题:。
问题1:
在input输入框中定位一个小图标,但会覆盖提示框中的提示信息。
解决:
给输入框加一个内边距。
问题2:
想给p标签下的p标签下的span标签一个样式,写了之后没效果,打开检查器发现没有选中。
原因:
p标签不能嵌套p标签和划分区域的标签,浏览器自动将我的父子级变成了兄弟级,所以没选中。
解决:
将父级的p标签换成div。
问题3:
移动端中创建一个i标签,i标签自带宽高,打开检查器,并没有发现继承,盒模型中宽高都是auto。
原因:
用了rem单位标签自带100的尺寸,也就是在100的基础上设置。
解决:
给boyd一个font-size: 0,让所有在body下的标签以0为基础。
问题4:
使用无序列表制作选座时,我想使第一排的第一个位置消失,给display:none,发现是消失了,但是消失的却是最后一 个,不管选中第一排的第2个还是第三个都是最后一个消失。
原因:
打开检查器,发现选中的第二个或第三个确实消失了,但浏览器呈现出来的却是最后一个消失,因为使用display:none, 座位在消失的
同时,所占的位置也消失了,所以后面的座位就占了消失的座位的位置,并不是最后一个消失。
解决:
将地上display:none换成opacity: 0使该座位变透明。
项目总结:
这个项目检验了我这一个多月以来的学习成果,从初次接触前端,一步一步解决所遇到的问题,到现在能独立完成一个项目,让我有了很大的信心迎接后面的学习。
猫眼项目包含了我们之前所学的全部知识点,自己以及中途遇到的问题强反应出我对那些知识点的不熟悉,在寻找解决方法时,又将零碎的知识点融会贯通。