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 条评论
登录 后参与评论

相关文章

来自专栏陈满iOS

iOS图形处理概论:OpenGL ES,Metal,Core Graphics,Core Image,GPUImage,Scene Kit (3D) ,Sprite Kit (2D),OpenCV

对于刚接触iOS图形相关框架的小白,有一些图形框架在字面上和功能上非常容易混淆。这里旨在总结一下各种框架,区分它们的概念和功能,以作日后进一步细分学习的指引。因...

1842
来自专栏BestSDK

和Emoji相关的那些开源项目

image.png Emoji 本名叫絵文字,词义来自日语えもじ,e-moji,moji在日语中的含义是字符。Emoji本是一套起源于日本的12x12像素表情...

2316
来自专栏CDA数据分析师

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

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

2087
来自专栏Material Design组件

Human Interface Guidelines — Interface Essentials

1467
来自专栏Jacklin攻城狮

iOS中,系统相册的那些事

832
来自专栏点滴积累

Cesium基础使用介绍

前言 最近折腾了一下三维地球,本文简单为大家介绍一款开源的三维地球软件——Cesium,以及如何快速上手Cesium。当然三维地球重要的肯定不是数据显示,这只是...

1.4K6
来自专栏钱塘大数据

【干货】2017年值得关注的JavaScript框架与主题

导读:JavaScript的繁荣促生了很多优秀的技术、框架与工具库,这空前的繁荣也给很多人造成了困惑,无所适从。到底何者是值得投入,代表了未来的方向,而何者又是...

3356
来自专栏量子位

用Google Colab,怎样让机器学习图表动起来?

毕竟它无需安装、功能强大、支持实时协作,还能免费蹭Google云上的GPU,比Jupyter Notebooks不知高到哪里去了。

854
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发--JavaScript学习:21点游戏

一、游戏规则 21点游戏的规则有很多种,我在写这个21点游戏的时候,选取了一种规则,描述如下: 1、游戏共有两名玩家,玩家1(庄家)和玩家2,在我编写的这个21...

3666
来自专栏帮你学MatLab

如何记笔记

Step1. 在听讲过程中,在左侧内尽量多记有意义的论据、概念等讲课内容。 Step2. 下课以后,尽可能及早将这些论据、概念简明扼要地概括(简化)在右侧。 ...

2796

扫码关注云+社区