HTML5+CSS3猫眼界面还原练习
猫眼电影的界面排布，挺考验前端基本功的，尤其是布局和响应式这一块。用 HTML5 加 CSS 就能还原出一个还不错的原型界面，适合练手。
导航栏的布局用的是Flexbox搞定左右对齐，响应也快，代码也简单。比如导航左边放 logo，右边几个菜单按钮，用justify-content: space-between一行搞定。
电影列表区就更了，用Grid来做卡片式排布，整齐、好看、适配性也强。比如一行放四张电影海报，屏幕小了自动变两张，配个@media就能实现。
像index.html里，结构划得比较清楚：、都分好了，用语义化标签写页面，后期维护起来也方便。样式都集中写在style.css里，用.movie-card、.header这些类名来控制样式，命名清楚，改起来不费劲。
字体和配色也没落下，颜色用了#e54847这种比较亮的红，挺符合娱乐氛围。字体配font-family: 'PingFang SC', sans-serif，中文显示效果不错。页面整体调性还挺猫眼的。
如果你正好在练布局，或者想做个仿站练习，这套代码比较合适。结构不复杂，样式也清爽，拿来就能改。顺手还能复习下Flex和Grid的用法，蛮值的。
文件大小：387.07KB
评论区