突然想整个个人小网站
昨儿晚上刷手机,瞅见别人做的个人主页挺有意思,心痒痒的。琢磨着咱也整一个呗,就当练练手。说干就干,大半夜的打开电脑,准备鼓捣一个静态网页。
第一步?直接打开那个记事本就开始敲了!对,你没看错,就是最土的记事本。想着不就是写点字儿嘛能有多难?上来就先敲了个 ``,然后 `
`、`- 浏览器一打开,傻眼了: 那文字就跟喝醉了似的,全堆在左上角,丑得要命!
- 立马查咋弄好看点: 现学现卖,找了个叫CSS的玩意儿。照着抄了个 `style` 标签塞进 `head` 里。
- 瞎折腾颜色和位置: `background-color: lightblue;` 先把背景整成淡蓝色,舒服多了。`text-align: center;` 让标题和字都乖乖居中站
导航栏?那必须得有!
光秃秃的可不行。又想往页面上方加一排导航栏,点哪儿就去哪儿那种。赶紧去搜“怎么加导航栏”,抄了点代码。弄了几个 `主页`、`关于`、`联系`,觉得这下专业了。
结果一刷新,这几个链接就跟超市门口免费发的传单似的,稀稀拉拉排在那儿,一点样子都没有。这哪行!
- 继续研究: 发现得给 `
- 硬着头皮调: `display: inline-block;` 让它们别排成竖排;`padding: 10px 20px;` 加点空白撑开点;再`text-decoration: none;` 把烦人的下划线去掉;3`background-color: #333; color: white;` 整成黑底白字。
撞上新麻烦:手机看一团糟
在我自己电脑上看是挺像那么回事了,美滋滋地发手机上一看,当场就想摔手机! 布局全乱了套,字小得得用放大镜看!这才知道有“响应式”这么个东西,意思就是网页在电脑、手机、平板上都得正常看。
解决方案比想象的简单点,就是多了几步:
- 加上“神奇的咒语”: `` 这玩意儿,据说能让手机浏览器正常识别尺寸。
- 开始用百分比和 `max-width`: 把原来那些固定像素的宽度都改成了百分比,比如图片设置个 `max-width: 100%;`,这样在手机上就不会撑爆屏幕了。
- 媒体查询是个好东西: 学会了一种叫 `@media` 的写法。专门写了一段代码,当屏幕窄于600像素(大概是手机屏幕大小)的时候,就把导航栏的每个链接改成占满一行,这样手机点起来就不会误触了。
收工后的小总结
鼓捣了几个小时,总算弄出个能看的样子了。纯手工一个个字在记事本上敲出来的,也没用啥高级工具。最大的感受就一个字:坑!
- 刚开始想得太简单,以为几行就搞定了。
- 浏览器兼容性真是个麻烦事儿,在Chrome上好好的,换个浏览器就可能歪了。
- 做手机适配这一步绝对不能省,不然就等着手机用户骂娘。
虽然这过程有点费劲,但自己动手一步步搞出来,能看到效果,特别是手机也能看舒服的时候,还是挺有成就感的!就是坐得太久,屁股都麻了……该点个外卖犒劳下自己了!





