html结构的拆与合

写下这篇标题的时候,脑海中突然闪过《三国演义》的纲领——天下大势分久必合合久必分。也许html结构也如是,总是在拆拆合合中演绎着一段段神奇的故事。

玩过七巧板的都知道,虽然看起来只有七块,但随便拼装下就是一份不一样的惊喜。而对于重构也一样,常用的标签也就那么几个,但是经过一番拼凑就会呈现出不一样的美。

闲话暂且不表,先来个本文思路来源的实例。

断续进度条

下面是一个进度条,估计大家大概一眼就可以看出这个进度条与普通的不一样,这个进度条是有缺失区域的,有点像被老鼠偷吃了,断断续续的。

这个原本是一个朋友发给我的,问我有什么好的建议,当时想了想也确实想不到什么好的办法,就只好说一个个切吧,那就是本文所说的拆了,结构如下:

底部灰色由progress的背景实现,其余每个done表示一个蓝色段,每个undo表示一个灰色段,各自设置对应的宽度

.progress
    .progress-done
    .progress-undo
    .progress-done
    .progress-undo
    .progress-done
    ...

第二版本

去掉了undo,直接对done使用绝对定位(因为progress容器的灰色跟undo灰色是一样的)

.progress
    .progress-done*n

第三版本

在常规的进度条上使用绝对定位添加undo,相对来说这个版本更好,可以在常规与特殊化之间进行方便的切换

.progress
    .progress-done
    .progress-undone*n

从上面三个版本总结来说:第一个版本是不管三七二十一,都拆了;而第二个版本是加入了一些思考,把蓝色的拆了出来,把灰色的合在一起了;而第三个版本则是在第二个基础上再根据实际场景转化,进一步优化拆与合的思想,先把断断续续的蓝色合成一个,然后通过灰色一个个去拆,以达到视觉上的拆开蓝色。这就是本文拆与合的思想来源。

下面我们继续领略下拆合之美。

扩展应用

标题右侧内容

先来个简单常见的,标题右侧有操作的,如下图:

对于第一个html结构如下:

.block-hd
    h3.block-tt
    a.link-xxx

对于第二种结构,我们就得用到合了,不能再是简单的罗列了,代码如下:

.block-hd
    h3.block-tt
    .hd-right
        a.link-xxx
        a.link-xxx

对比这两种情况,第一种只有一个操作,我们可以直接对操作定位在右边;而第二种有两个操作(甚至更多操作),这时候我们就不能再简单的一个个去定位了,而是增加一个包裹(hd-right)把所有的操作合在一起,然后对包裹进行定位在右侧。

这里我们把零散的组合在一起定位,体现了合的基本原则。

经典的图文混排

如下图:第一种是最简单的,左边图片右边文字;第二种左边图片下面还有内容,可能是标题,也可能是一些操作;第三种在第二种基础上右边又出现了一部分内容

下面我们对结构进行一次次演变:

// 极简主义
.imgtext-mix
    img.mix-img
    h3.mix-tt
    .mix-intro

// 添加链接
.imgtext-mix
    a.mix-img-link>img.mix-img
    h3.mix-tt>a.mix-tt-link
    .mix-intro

// 第一次合,将图片右边内容包裹
.imgtext-mix
    a.mix-img-link>img.mix-img
    .mix-text
        h3.mix-tt>a.mix-tt-link
        .mix-intro

// 第二次合,将左侧图片等内容进行包裹
.imgtext-mix
    .mix-left
        a.mix-img-link>img.mix-img
        .left-oper
    .mix-text
        h3.mix-tt>a.mix-tt-link
        .mix-intro

// 第三次合,将最右侧信息进行包裹
.imgtext-mix
    .mix-left
        a.mix-img-link>img.mix-img
        .left-oper
    .mix-text
        h3.mix-tt>a.mix-tt-link
        .mix-intro
     .mix-right
         ...

先从极简主义出发,然后根据空间原则,一步步组合,从结构上进行空间上区域的划分,实现需要的效果,这是由简单的一锅煮到分类煮,由拆的本质到合的美学体现。

其他拆合

从最终要实现的效果来说,我们对结构要做的无非是上下,左右,脱离与覆盖的拆合。第一个进度条的例子很好的说明了覆盖的拆合(星级评论也可用到),扩展应用的说的更多的是左右的拆合,下面我们继续说说上下与脱离的拆合。

上下拆合

这个最典型的莫过于网站整体布局了,可详见HTML整站结构设计

header.header>.inner-center
section.section-mainr>.inner-center
footer.footerr>.inner-center

脱离拆合

如果从使用css实现的结果来说,所有要应用fixed,absolute的结构都属于脱离的拆合。这里最典型的莫过于fixed导航,及fixed的右下角的回到顶部,效果请看w3cplus,当你滚动滚动条的时候会发现顶部导航一直fixed在顶部,而右下角会出现一个返回顶部的小按钮

说了这么多,总结起来就是:html结构中到处都映射着拆与合的思想。

拆合之道

所谓拆,就是尽可能让每个元素独立或者是每个效果独立。元素独立这个比较简单,比较好理解,就是给每个元素都有各自对应的标签;而效果独立这个就得去根据实战分析,灵活使用了。

而所谓合,就是尽可能少用元素或把一些元素使用标签包裹组合起来以达到统一控制。少用标签这块,one div这种已经做出很好的解释了,css3的进步为这提供了强有力的技术保障;而对于包裹组合这个也得根据实战去取舍。

总之,html结构肯定不是越简单越好,当然也肯定不是越复杂越好,而是建立在拆合之上的一种取舍之道。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据挖掘DT机器学习

Tensorflow深度学习LSTM实现的小说撰写预测damo

最近,在研究深度学习方面的知识,结合Tensorflow,完成了基于lstm的小说预测程序demo。 lstm是改进的RNN,具有长期记忆功能,相对于RNN,增...

3715
来自专栏AI研习社

实例+代码,你还怕不会构建深度学习的代码搜索库吗?

本文展示了一个端到端的实例,说明如何构建一个可以语义化搜索对象的系统。项目作者是 Hamel Husain (https://www.linkedin.com/...

573
来自专栏CDA数据分析师

教你掌握Excel中最为重要的逻辑 ——「链接」(一)

如果把Excel比作武侠小说中的“剑”,那么按照武侠小说中御“剑”能力的高低程度可以大致将剑客分为以下几个等级: Level 1(剑客):小说中常见的劫匪甲乙...

1937
来自专栏北京马哥教育

Python数据挖掘:Kmeans聚类数据分析及Anaconda介绍

糖豆贴心提醒,本文阅读时间8分钟 今天我们来讲一个关于Kmeans聚类的数据分析案例,通过这个案例让大家简单了解大数据分析的基本流程,以及使用Python实现...

36813
来自专栏数据小魔方

R语言可视化——数据地图应用(东三省)

今天是一个案例应用,采用东北三省地图进行离散颜色映射,让大家感受下R语言在地理信息空间可视化方面的强大功能,同时也会对之前强调过的地图配色技巧进行应用。 加载工...

5005
来自专栏北京马哥教育

Python破解验证码,只要15分钟就够了!

让我们一起攻破世界上最流行的WordPress的验证码插件 每个人都讨厌验证码——在你被允许访问一个网站之前,你总被要求输入那些烦人的图像中所包含的文本。 验...

3766
来自专栏大数据挖掘DT机器学习

用深度学习keras的cnn做图像识别分类,准确率达97%

Keras是一个简约,高度模块化的神经网络库。 可以很容易和快速实现原型(通过总模块化,极简主义,和可扩展性) 同时支持卷积网络(vision)和复发性的网络...

3426
来自专栏数据小魔方

上帝视角——给世界一个特写~

最近在研究使用R包制作动画图表,也就是类似GIF动图,感觉很有趣,也是动态图表呈现的一个非常独特的领域,刚刚研究出了些成果,今天这篇分享使用GIF动画+球型投影...

3246
来自专栏前端达人

前沿动态 | 带你提前体验CSS未来的新特性

本篇文章,Rachel Andrew将会带着大家了解下浏览器在CSS方面的未来动向, 例如Flexbox行和列布局支持gap间隙属性的标准。

803
来自专栏PPV课数据科学社区

《用地图说话》之:十字绣中国热力数据地图

作图思路: 准备一块300*300小单元格组成的区域,对照地图图形,在每个省图形范围内的单元格填入该省的数据,然后对这些单元格应用条件格式->色阶,就形成了一幅...

2843

扫码关注云+社区