web网页设计期末作业

浏览器地址栏里敲下localhost，页设业回车。计期那一刻，末作我盯着屏幕，页设业手心全是计期汗。我的末作web网页设计期末作业，一个关于本地咖啡馆的页设业静态站点，终于在这一刻跑了起来。计期页面上那张手绘的末作咖啡杯Logo，其实是页设业用PS钢笔工具描了三遍才成的型，边缘还是计期有点毛躁。可它就在那儿，末作在我自己写的页设业HTML和CSS构建的世界里，稳稳当当地立着。计期

做这个作业之前，末作我以为网页设计就是堆标签。学了半学期的<div>和<span>，背了十几个CSS属性，感觉就像拿到了乐高积木的说明书，照着拼就行。真到自己动手，才发现说明书根本不管用。我选的主题是学校后门那家“老张咖啡”，铺子很小，只有四张桌子，但老板会在杯垫上手写当日推荐。我想把这种手写的温度感做进去，于是决定首页就用一张老板写杯垫的照片做主视觉。

拍照容易，排版难。照片放上去之后，底下的文字怎么排都别扭。左边是介绍，右边是菜单，中间还夹着营业时间，像一盘散沙。我盯着代码看了半小时，突然想起老师课上提过一嘴flex布局，但当时光顾着记笔记没实操。我翻出课件，照着例子把容器设成display:flex，给子元素加了flex:1。刷新页面，那三块内容像被施了魔法，整整齐齐地横排在照片下面。那一刻的爽感，比喝三杯冰美式都提神。

当然也有翻车的时候。为了追求视觉冲击力，我把导航栏字体调成了36像素的粗体，还加了红色下划线。打开页面自己都吓一跳，那行字像在朝我吼叫。室友路过瞥了一眼，说：“你这网站挺暴躁啊。”我默默把字号改回16，下划线换成柔和的虚线。设计这东西，不是把元素堆得越猛越好，得像老张冲咖啡，水温、粉量、注水节奏，差一点都不行。网页里的留白、字距、色彩比例，就是那杯咖啡的平衡感。

最头疼的是响应式。老师要求作业至少要在手机和电脑上都能看。我用Chrome的开发者工具模拟iPhone屏幕，菜单栏全挤成一团，图片大得离谱。翻了一下午教程，最后用媒体查询加了个汉堡菜单——就是那个三条横线的图标，点击展开。代码其实不难，难的是想通“移动端不是缩小版的桌面端”这个道理。现在很多网站手机版就是简单缩放，点起来费劲。我的做法是导航栏在窄屏下变成纵向列表，给足点击区域。这个细节，是我自己拿手机一个个试出来的，不是书上教的。

交作业那天，老师让每个同学上台演示。有人做了炫酷的动画首页，有人用了Bootstrap框架，页面切换带滑动效果。我上去只展示了三样东西：那张杯垫照片的排版，手机端的汉堡菜单，还有一个藏在页面底部的小彩蛋——鼠标滑过“关于我们”那栏，会浮现老板写的一句话：“咖啡要慢慢喝，网页要好好做。”老师看完笑了笑，没打分，问了我一句：“老张咖啡的拿铁好喝吗？”我说好喝，他点点头说：“那你的作业也合格了。”

现在回头看，这门课教我的不是怎么写标签。它逼我去观察一个真实的空间，把那个空间的气质转译成代码。老张的铺子没有Wi-Fi，顾客却都愿意坐着聊天，那种慢节奏，我用的是大号行高和奶油色背景来实现。网页设计期末作业，表面上是技术考核，其实是让你学会用另一种语言讲故事。我讲得不算好，但至少，那个手写杯垫的Logo，现在躺在我的GitHub仓库里，偶尔打开看看，还能闻到一点咖啡香。