web网页设计实验报告

这周把之前拖了很久的页设验报个人主页重新做了一遍。上次写HTML还是计实三年前，那时候用Dreamweaver拖控件，页设验报表格布局，计实字体全是页设验报宋体。这次打开VS Code，计实手写代码，页设验报感觉完全不一样了。计实

先搭结构。页设验报我习惯用<div>包一切，计实但这次试了<header>、页设验报<nav>、计实<main>、页设验报<footer>这些语义标签。计实写的页设验报时候没觉得有什么特别，直到用浏览器打开，发现默认样式居然自带间距，不像<div>那样全堆在一起。查了下才知道HTML5的语义标签本身不带样式，但浏览器会按块级元素处理。我干脆在CSS里给它们统一设了margin和padding，省得后面乱。

布局用的Flexbox。之前一直用float，清浮动清到头疼。这次试了display: flex;，父容器一设，子元素自动排成一行。想换行就加flex-wrap: wrap;，想对齐就justify-content: space-between;。写导航栏的时候，左边logo右边菜单，三行代码搞定。以前用float得算宽度、写clearfix，现在完全不用。不过也踩了个坑：Flex容器里的文字如果太长，会把容器撑开。得给子元素加min-width: 0;或者overflow: hidden;才能正常收缩。这个在文档里没写清楚，试了半小时才找到原因。

响应式部分用了媒体查询。设了三个断点：768px、1024px、1200px。手机上一列，平板两列，桌面三列。写的时候发现，如果直接改flex-direction，布局会跳。后来改成flex-basis配合百分比，过渡就顺了。另外图片得加max-width: 100%;，不然在小屏幕上会溢出。这个我忘了加，测试的时候图片撑破了容器，页面出现横向滚动条。查了半天，最后在img的全局样式里补上才解决。

颜色和字体也调了几轮。原来用纯黑#000，太刺眼。换成#333，柔和一些。背景没敢用纯白，用了#fafafa，带一点点灰。字体试了系统默认的sans-serif，但中文在Windows上会变成微软雅黑，Mac上是苹方，显示效果不一样。最后指定了字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;，让系统自己选。中文字体单独设了"PingFang SC"、"Microsoft YaHei"，这样两边都好看。

交互部分只加了hover效果。导航链接悬停时下划线从中间展开，用transform: scaleX()做的。按钮悬停变深色，加了个transition: background-color 0.3s;。本来想加动画，但发现用多了页面会卡。尤其那个卡片翻转效果，在低端安卓机上掉帧严重。最后删了，只保留最基础的过渡。性能比炫酷重要。

测试的时候用Chrome DevTools的设备模拟，从iPhone SE到iPad Pro都过了一遍。发现两个问题：一是点击区域太小，手指容易点错，把按钮padding从8px加到12px；二是字体在Retina屏上有点糊，加了-webkit-font-smoothing: antialiased;好了一些。另外用Lighthouse跑了个分，性能92，可访问性78。可访问性扣分主要在对比度和alt属性，后面补了图片描述和颜色调整。

最后部署到GitHub Pages。之前用FTP传服务器，现在直接push到仓库，设置里开Pages，两分钟搞定。域名没买，用默认的github.io。加载速度还行，首屏1.2秒。主要因为没用什么大图，CSS和JS都内联了，减少请求数。下次试试把字体图标换成SVG sprite，应该还能再快一点。

整个实验下来，最大的感受是：手写代码比拖控件可控得多。每个像素都知道怎么来的，改起来也快。但前提是得熟悉盒模型和文档流，不然调半天不知道问题在哪。Flexbox和Grid确实省事，不过老项目里float和position还是得会。工具在变，基础没变。