js网站模板

发布时间 - 2025-12-11 02:58:08    点击率:

今天想弄个网站模板,结果发现网上那些现成的模板要么太花哨要么用起来别扭。干脆自己动手写个简单的,反正就是练练手。

先从最基础的架子搭起

我打开编辑器新建了个html文件,顺手把结构标签敲上去。脑袋里琢磨着反正就是展示些文字图片,干脆分成头部、内容区和底部三块。对着空白文档发了会儿呆,决定先给头部加个导航栏,用ul糊了几个链接凑数。

  • 首页链接扔最前面
  • 中间塞两个栏目占位置
  • 补个联系方式的假链接

折腾样式的时候最头疼

接着新建css文件开始调布局。把导航栏改成横排时差点忘了加float,刷新页面看到链接竖着排成一列当场笑出声。调颜色时试了五六种蓝,选了个最顺眼的藏青色。给内容区加内边距时手抖多按个零,整个版面向右飘出去老远,赶紧撤回重改。

最麻烦的是处理图片自适应,明明设置了max-width:100%却总被父元素挤变形。蹲在电脑前啃了半小时面包才想起来检查盒模型,果然忘了设置box-sizing。改完再看图片终于老实缩在容器里,顺手给图片角落加了点阴影效果。

临时起意加交互效果

本来打算纯静态完事,但看导航栏太单调就手痒加了js。写鼠标悬停高亮时把hover错写成hober,调试半天发现控制台报错才反应过来。给按钮写点击事件时差点用alert做反馈,幸好及时改成修改文字颜色。给页面滚动的锚点链接加了段平滑移动的代码,虽然只是简单的scrollTop但看着挺丝滑。

完工时已经晚上十点多,把浏览器窗口拖来拖去检查不同尺寸下的显示效果。手机上看小图排版有点挤,但实在懒得写媒体查询了。关电脑前把文件打包扔进硬盘角落,说不定下回改改又能当成新模板用。