web页面设计代码

凌晨两点，面设码我盯着屏幕上那行`display: flex;`，计代终于明白为什么隔壁老张的面设码导航栏总在IE里散架。他用了浮动，计代我用了弹性盒，面设码结果IE11连`gap`都不认。计代代码这东西，面设码写的计代时候爽，调试的面设码时候才知道什么叫“一失足成千古恨”。

很多人觉得web页面设计就是计代堆标签、调颜色，面设码其实真正的计代核心在布局逻辑。你打开任何一个网站，面设码第一眼看到的计代不是文字，而是面设码结构——头栏、侧边栏、内容区、页脚，这些区块怎么排、怎么响应、怎么在不同设备上不塌方，全看CSS那几行属性。我见过新手用`position: absolute`硬怼出个居中，结果窗口一缩，元素直接飞出屏幕外。别笑，真事。

写页面代码最忌讳的是“想当然”。你以为`width: 100%`就是撑满整个容器？错了，它撑满的是父元素的content-box，要是忘了加`box-sizing: border-box`，padding一多，实际宽度就超了，横向滚动条就这么来的。我有个习惯，每写一个布局前先在脑子里过一遍“盒模型”——content、padding、border、margin，四层叠起来才是元素真正占的空间。这玩意儿不复杂，但得刻在肌肉记忆里。

然后是响应式。别一上来就搞媒体查询，那是最后一步。真正的做法是先写流动布局——用百分比、`max-width`、`vw`这些相对单位，让页面在没断点时也能自然伸缩。比如一个卡片列表，你用`grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))`，它自己会适配从手机到桌面，根本不用你操心。等布局真的崩了，再针对具体断点加媒体查询。我见过有人为每个设备写三套样式，结果维护时改一处要动三处，纯属自找麻烦。

交互代码呢？`hover`效果别只改颜色，加个`transition`让过渡有节奏感。但别过度，一个页面五六个动画，用户会晕。我常用的一个小技巧是给按钮加上`transform: scale(0.98)`按下时的反馈，配合`transition: transform 0.1s ease`，手感立刻不一样。还有，别用`alert()`弹窗，那是上个世纪的产物，用自定义`modal`或者`toast`提示，体验差着十万八千里。

说到JavaScript，别一股脑全塞进`