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

相关文章

来自专栏walterlv - 吕毅的博客

UWP 将图片裁剪成圆形(椭圆)

2018-06-15 13:21

351
来自专栏walterlv - 吕毅的博客

Visual->UIElement->FrameworkElement,带来更多功能的同时也带来了更多的限制

发布于 2017-11-13 15:55 更新于 2018-02...

413
来自专栏jessetalks

是时候开始用C#快速开发移动应用了

  从2015年接触Xamarin到至今已经2个年头,我对Xamarin的技能没有长进多少,但它却已经足够成熟到在跨平台移动开发工具中占有一席之地。在扫了一些资...

3486
来自专栏技术小黑屋

两分钟理解Android中SP与DP的区别

因此通常情况下,我们还是建议使用sp作为字体的单位,除非一些特殊的情况,不想跟随系统字体变化的,可以使用dp.

642
来自专栏腾讯NEXT学位

简单三步做出微信h5表情包

1314
来自专栏小巫技术博客

Android触摸事件机制

833
来自专栏Material Design组件

Human Interface Guidelines — Interface Essentials

1367
来自专栏Golang语言社区

【转载】XHTML 结构化之二:案例分析:W3school 的结构化标记

无论如何,不要跳过本节。阅读本章将增进你的技能,为你的网页减肥,并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的,但是却能极大的提高网站的...

33516
来自专栏GuZhenYin

C#开发移动应用系列(3.使用照相机扫描二维码+各种基础知识)

前言 上篇文章地址: C#开发移动应用系列(1.环境搭建) C#开发移动应用系列(2.使用WebView搭建WebApp应用) 今天我们来讲一下如何使用Came...

1815
来自专栏jianhuicode

带着问题写React Native原生控件--Android视频直播控件

最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法...

1K7

扫码关注云+社区