无废话网页重构系列——(8)主干结构
前面章节方法论,从本章节开始实践。
布局中的层级关系,主要体现在主干结构、栅格结构、组件模块结构三部分,本篇讲主干结构。
主干结构按级别分成“站点”和“页面”,即site
和page
。如电商或门户站点,站点有统一的头尾、悬浮挂件,站点有很多不一样的子站和栏目。
站点主干结构
1
|
<div class="site__topbar">
|
页面主干结构
1
|
<div class="page">
|
class="site__*" 、class="page__*"
作为主干结构部分,不声明 border, margin, padding, float
等样式属性,主干结构主要用来表意,做各页面进出切换效果,节假日、做促销活动时可以挂个情景背景。
(本篇结束)
许可协议:自由转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)
By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-8-tree-trunk.html
如您发现有误,请联系xianghongai@gmail.com指正。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步