Bangdan页面布局样式SCSS
猫眼 PC 端的静态页面布局，结构清晰，代码还蛮规整的。bangdan.scss主要样式层，适合新手练手，理解页面结构怎么搭起来的。虽然没加什么复杂交互，但从头到尾看一遍，对前端入门挺有的。
样式文件里有不少flex布局，用得还蛮合理的。比如导航条和列表区域，都是用display: flex来做响应布局，左右分栏一目了然，改起来也方便。如果你之前用得比较多的是float，建议看看这份代码，思路会更现代一点。
还有一点不错的是，各个模块的划分比较清晰。像.header、.content这些结构写得简单直白，文件层级也没乱七八糟。你可以配合浏览器的开发者工具，一边看效果一边对照源码，会更直观。
源码虽然基础，但也不是随便拼的，布局上能看出是有点想法的。你可以尝试自己重构一遍，比如加点hover效果、切换动画，都是不错的练手方向。
如果你对 PC 端界面开发还在摸索阶段，顺带也可以看看下面这些文章：
- 登录界面布局 —— 登录页怎么排版，细节还挺多的
- PC 端整屏滚动 —— 如果你后面想做滚动效果，可以参考下
- Winform 界面布局详解 —— 桌面端开发方向也可以顺带了解下
，bangdan.scss是个不错的起点，别怕它基础。入门嘛，多看多练多动手。
如果你也在折腾 PC 端页面，不妨打开index.html跑一跑，改一改，效果一目了然。
文件大小：11.1KB
评论区