Scaffold / v0.1 / www.cdncode.com
内容还没想好,
但骨架已经站直。
一个只有底色、字重和边框的起点。深蓝铺底,荧光绿只留给最需要被看见的那一件事;层级全部靠 1px 细描边与柔光拉开,不堆渐变,不放装饰图标。
01 概览
三个数字,说明这个框架有多轻。
-
0
外部依赖
纯 HTML、CSS 与原生 JavaScript。没有框架,没有构建步骤,没有外部字体请求。
-
1px
唯一的层级手段
全站靠 1px 描边与低幅柔光区分区块,阴影只做氛围,不做立体。
-
4
可替换模块
首屏、指标、模块列表、结构说明,每个区块都能整块删掉或复制成新页。
02 模块
四个位置,等内容填进来。
-
01
待替换
首屏主张
大字号标题加一句话说明,配一个主行动。现在这段是占位文案,换掉即可。
-
02
待替换
数据与承诺
三组数字,用来放指标、参数、交付周期或任何需要被一眼读到的结论。
-
03
可扩展
列表内容
编号行式排版,适合服务清单、功能说明、作品索引,加一行就是多一项。
-
04
未启用
表单与后端
预留位。需要留言、预约或查询时再接 PHP 与数据库,目前页面上没有任何请求。
03 结构
三个文件,就是这个站的全部。
/www/wwwroot/www.cdncode.com
├── index.html 首页与全部文案
├── assets
│ ├── css/style.css 样式与配色
│ └── js/main.js 滚动与导航
└── .user.ini 宝塔生成,勿删
Nginx 的 index 顺序里 index.php 优先于 index.html,所以这个目录下暂时不要放 index.php,否则首页会被它顶掉。
04 约定
继续加内容时,守住这几条。
底色
页面只用
--bg与--bg-2两档深蓝,区块靠边框区分,不靠填色。强调
荧光绿
--acc一处只用在一个元素上:标题强调、按钮或当前导航。边框
统一 1px、圆角 3px,悬停时提高透明度并加深柔光,不改变位置以外的尺寸。
文字
正文用
--txt,辅助信息用--dim;标题用clamp()从 2.4rem 放大到 7.2rem。
不要做的事:多色渐变堆叠、大面积发光、装饰性图标与 emoji、依赖外网 CDN 的字体。