可缺省的CSS布局——张鑫旭

一、技术不难、意识很难

有些东西的东西的实现,难的不是原料、技术;而是想不到,或者说意识不到。

例如下面这个简单而又神奇的魔术:
魔术三部曲之第一步
魔术三部曲之第二步
魔术三部曲之第三步

是吧。搞通了,才发现,哦~原来这么回事,很简单的嘛,我也可以实现的!其实,简单吗?不简单,很难,难在你想不到这个魔术idea, 虽然看上去实现很简单。

同样的,在CSS布局的世界里,也有类似的情况。有些东西并不是实现有多难,而是想不到、意识不到。

记住,重要的是意识

二、简单的开胃菜-装饰元素可缺省

花里胡哨的东西在靠谱的网站已不常见,因此,要找个很纯粹的装饰性元素我还是好好折腾了一把。
所谓“装饰性元素”,指页面主体内容并没有多大的必然联系,更多作用是美化,引导的元素。在布局这些元素的时候,我们要把它看成“外来者”,排挤,可缺省,要让其存在与否仿佛与页面没关系一样。

什么意思,就是,让这些元素直接从页面上delete掉,页面毫无反应,好比地球上死了一只蚂蚁,上帝压根感觉不到。

例如,下面的对比,以及下面的下面的对比:
装饰、引导元素可缺省
装饰、引导元素可缺省
装饰、引导元素可缺省

通过上面的“找你妹”,可以发现这些站点的这类元素都是可缺省的。但其实(可缺省的实现)可能并不是有这个意识,而是,技术实现使然——不使用绝对定位,我搞不定哈!

OK,全然正面的例子显然不具有说服力,拿伟大的网站12306举例(//zxx: 鉴于12306.cn无可匹敌的考古价值,平时我根本舍不得拿出来给大家观摩的):
12306首页某装饰性元素

上图箭头标示的“书环”效果是相当正宗的装饰性元素,OK,我们现在把这个装饰性元素删掉,看看结果如何?
去掉装饰性的书圈圈效果

我擦!好大一块牛皮癣啊!!装饰性的东西承担了房屋结构的责任,显然是糟糕的。删不了,加不了,动个皮毛也要很多折腾——旁边的主体背景什么的也要一起改。

按照本文的观点,这些环环效果应该是可缺省的,如何处理之,很简单,就跟上面对比图中的元素一样,提出之,定位之。

您可以狠狠地点击这里:火车票网站某装饰元素可缺省demo

点击页面上的按钮,就可以看到装饰性元素或无或锦上添花的效果,这就是可缺省。
装饰性元素可缺省布局演示

于是,无论我们是后期修改内容背景、或修改装饰效果(如扁平或删除),潜在的工作开销就会小很多。实际上,装饰元素可缺省的布局设计在实现成本上并不大,关键要有这个意识,知道这么回事。

三、重点难点-关联模块可缺省

装饰性元素一般都是绝对定位实现的,运气也好、必然也好,不管怎样,其就是可缺省的(与周围环境UI无耦合、存在与否不影响布局)。但是,对于功能性的元素或模块,你是否有可缺省的意识呢?

OK,举个例子,参见下面截图:
要实现的效果图
要实现的效果图2
如果是你,你会怎么实现(指布局!UI效果什么的先扔在一边)?

是浮动、浮动、浮动,或是绝对定位、定位、绝对定位或是其他组合?我相信,不管怎样,诸位的实力要实现这个效果是松松的。

走遍千山万水,终于在拍拍首页找到类似交互的搜索:
拍拍的类似交互的搜索框

拍拍这里是如何实现的,一查看,是“下拉块浮动、输入框块浮动、搜索按钮块浮动”。

我们将下拉小模块对应的HTML删除,结果长这个样子了:
下拉小模块删除,内容留白了

留白了,不好看了哈!

看到此处,可能有人会拍案而起了:“你这不明摆着没事找茬嘛!我捅你一,你身上难道没有个窟窿吗?再说了,哪个混蛋会没事把页面上某个元素删掉哈!”

这位兄台,息怒,无风不起浪,无事不成文,我还就遇到了捅刀子的情况。

话说,没过几天,又来个张图,下面这个样子的,据说是企业用户使用的时候呈现的:
新的设计图,没有了下拉模块

同一个头部,不同性质的用户进来呈现的不一样——→下拉小模块有或没有。

此时,如果下拉模块是可缺省的,你会不会很开心,前端这边可以不用改,直接嘴皮子动两下:“你们直接不输出那段就好了!”然后喝茶、微博、把妹……后台轻松,测试轻松,大家都轻松,团队都轻松,氛围大好,世界多美好。

但是,如果是拍拍那个样子,兄弟,不是动嘴皮子就可以的了。为了兼容,以前的布局肯定要改,HTML、CSS轮番修改,哦,我想想就觉得辛苦;后台那边也累,跟着一起改动;测试也累,不同用户测来测去,大家都忙,大家都加班,大家都烦躁,放假多美好。

平时我们写这些模块的时候,想得多的是性能、兼容性以及效果实现;如果这些你都可以轻松应对,试着加一条——可缺省性

口水多没用,可能传播的是口气,我们进入老少皆宜的demo页面,开看看关联布局中的可缺省效果,您可以狠狠地点击这里:关联布局中的可缺省效果demo

默认进来这样子,有下拉模块:
默认进来有餐厅下拉 张鑫旭-鑫空间-鑫生活

点击下面的应对产品经理需求按钮让下拉模块隐藏,结果,文本框自动补位,这就是关联元素间的可缺省布局:
点击按钮下拉模块隐藏,模块自动补全

至于后面的“搜索按钮有无切换”按钮属于独立无关联可缺省,类似上面装饰元素;“宽度可变切换”按钮属于自适应布局。以上3个按钮代表三种降低后期潜在维护成本的方法。即使你是固定布局、或是响应布局控,其中的思想也是可以有所借鉴的。

四、本想说优点,写着写着成结语了

你永远不知道产品经理需要什么东西,因此,在页面布局的时候,一定要有强烈的意识:要是产品经理看这里不爽,把这里这部分干掉怎么办?如果干掉了,我是不是只要张个嘴让后台那边把这部分HTML注释或删掉就可以呢!

如果真能做到这样,哪有那么多加班?哪有改动恐惧症?哪有各种不满的吐槽?你应该有更多的时间去学习其他新的或者深的东西,而不是被本可以什么都不要做的改动折腾掉N多的时间和精力。前者久而久之良性循环,疾驰与他人之前;后者原地循环,跑步机上死命奔跑。

一句话,后期维护很轻松。装饰性元素自然必须可缺省,而且一点都不能影响布局;而功能性元素,也应该有强烈的可缺省意识,这样,或组装,或添加,或删除的时候,我们只要响应的HTML拖移、粘贴或删除就可以了。而且,布局可缺省,本身的容错能力也是相当强的。以柔克刚,万变归宗。

然而,就像诸葛亮的空城技能,三国杀有俗语:为了空城而空城的诸葛亮不是好诸葛亮。同样,不能为了缺省而缺省,要权衡:一是实现成本,二是实现必要,三是可访问性(可缺省布局可能会改变HTML元素应该的顺序,会导致tabindex混乱)等。

但是,无论如何,在布局的时候,时候保持这个意识肯定是没有问题的。记住:意识比技术重要。篮球场上抢篮板最多的肯定是篮板意识最好的,而不是跳得最高的。

抛砖引玉,欢迎挑刺、飞鞋。资质有限,如有表述不准确的地方,欢迎指正。非常希望可以有针锋相对的讨论。

恩,就这些,感谢阅读!

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=3097

(本篇完)


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362792.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

杭电1061题

//求N^N的个位数//思路&#xff1a;只计算个位数的乘积&#xff0c;个位数最后形成一个循环#include <iostream>#include <string>#include <vector>using namespace std;int main(){ int num; cin>>num; for(int i0;i<num;i) { vector<int>…

使用Spring AOP,自定义注释和反射为您的应用审核基础架构

下一篇文章将演示如何使用Spring AOP和注释编写简单的审计。 审核机制将是干净&#xff0c;高效且易于维护的&#xff08;和Kewwl&#xff01;&#xff09;。 我将在用户管理系统上演示我的示例&#xff08;假设您对反射和AOP具有一般知识&#xff09;。 我们从简单的数据库表…

Git命令总结(附详解)

1.进入某文件目录后&#xff1a;git init 是该目录成为git仓库 2.将改动存入暂存区&#xff1a;git add filename 3.将文件提交到仓库&#xff1a;git commit -m ‘该修改的注释’ 4.查看修改内容以及是否提交&#xff1a;git status 5.查看文件修改内容&#xff1a;git diff f…

JSON 使用 教程

JSONP 教程 本章节我们将向大家介绍 JSONP 的知识。 Jsonp(JSON with Padding) 是 json 的一种"使用模式"&#xff0c;可以让网页从别的域名&#xff08;网站&#xff09;那获取资料&#xff0c;即跨域读取数据。 为什么我们从不同的域&#xff08;网站&#xff09;访…

SQL Cookbook:二、查询结果排序(1)以指定的次序返回查询结果

问题 显示部门10中员工的名字、职位和工资&#xff0c;并按照工资的升序排列。结果集如下所示&#xff1a; ENAME JOBSAL---------- -------------------MILLER CLERK 1300CLARK MANAGER 2450KING PRESIDENT 5000解决方案 使用ORDER BY子句&#xff1a; select ename,job,sal…

经过几天的Scala回归Java的10个最烦人的事情

因此&#xff0c;我正在尝试使用Scala&#xff0c;因为我想编写一个解析器&#xff0c;而Scala Parsers API似乎非常合适。 毕竟&#xff0c;我可以在Scala中实现解析器并将其包装在Java接口后面&#xff0c;因此除了附加的运行时依赖关系之外&#xff0c;不应该存在任何互操作…

LeetCode 198. 打家劫舍(House Robber) 5

198. 打家劫舍198. House Robber 题目描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自…

SpringBoot 参数符号转义,用这个包下面的类

SpringBoot 参数符号转义&#xff0c;用这个包下面的类 org.apache.commons.text.StringEscapeUtils String team StringEscapeUtils.unescapeHtml4(biUserOrganization.getTeam()); 2017/12/01 | Java | admin| 暂无评论 | 8717 views如题所示&#xff0c;之前一直使用c…

irrlicht v1.6 例程18 Splitscreen

/** Example 018 Splitscreen, U( a# q, ( S f1 ]( p作者&#xff1a;Max Winkel." 9 ?( W; K V1 x8 \译&#xff1a;小时候可靓了&#xff08;履霜坚冰&#xff09;2 m! C! N# J2 i6 a2 Z! Q0 U2 D4 U: U% J1 E5 N! a0 L4 q& x这个例程中我们将学习怎么使用irrlicht…

检查Red Hat JBoss BRMS部署架构的规则和事件(第二部分)

&#xff08;文章来宾与北美红帽公司高级中间件顾问约翰赫洛克 &#xff08; John Hurlocker&#xff09;合着&#xff09; 在本周的技巧中&#xff0c;我们将放慢速度&#xff0c;并仔细研究可能的Red Hat JBoss BRMS部署体系结构。 当我们谈论部署架构时&#xff0c;我们指…

博客园皮肤-我的博客园皮肤设置教程

一、前言 好的博客皮肤能吸引更多的访问量&#xff0c;也可以使博主更有动力更新博客。今天看到一个博主的博客非常漂亮&#xff0c;突发奇想也打扮了一下自己的博客&#xff0c;虽然差距还有不小&#xff0c;也记录一下操作方法供大家参考。 二、操作 1.左上角“fork me on gi…

设计撑百万并发的数据库架构

设计撑百万并发的数据库架构 https://www.toutiao.com/a6742034135486824973/ 前言 作为一个全球人数最多的国家&#xff0c;一个再怎么凄惨的行业&#xff0c;都能找出很多的人为之付出。而在这个互联网的时代&#xff0c;IT公司绝对比牛毛还多很多。但是大多数都是创业公司&a…

Spring MVC集成测试:断言给定的模型属性有全局错误

为了使用Bean验证报告Spring MVC中的全局错误&#xff0c;我们可以创建一个自定义的类级别约束注释。 全局错误与已验证Bean中的任何特定字段都不相关。 在本文中&#xff0c;我将展示如何使用Spring Test编写测试&#xff0c;以验证给定的model属性是否存在全局验证错误。 自…

Intent 的用法

1、用Context指定 Intent inew Intent(context,Receivered.class); context.startActivity(i);2、通过配置指定 <activity android:name"com.neusoft.android.Demo.photo.TestActivity"> <intent-filter> <action android:n…

Tips_一级菜单栏实现

1.纵向 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>menu01</title>6 <style type"text/css">7 *{8 margin: 0;9 pad…

数学基础 - 向量

1. 向量(Vector) 向量指具有大小和方向的量。 2 基(Basic,基底) 2.1 线性无关 在一个向量空间\(V_n\)中&#xff0c;假设&#xff1a; \(a_1e_1 ⋯ a_ne_n 0\)  (式1) 只在 \(a_1 ⋯ a_n 0\) 时成立&#xff0c;那么向量 \(\{e_1, e_2, ..., e_n\}\) 是线性无关的。 如…

2-使用git管理一个单片机程序

https://www.cnblogs.com/yangfengwu/p/10842205.html 我用电脑压缩一个文件,然后通过git上传,然后在新买的linux系统通过wget 网络下载这个压缩文件,然后死活解压不可以...无论是哪种格式的文件 一开始我怀疑是压缩软件压缩的问题,就换了一个压缩软件进行压缩,但是没有解决问题…

Java线程面试的前50个问题,面向初学者和经验丰富的程序员

您可以参加任何Java面试&#xff0c;无论是大四还是中级&#xff0c;经验或新来的人&#xff0c;一定会看到线​​程&#xff0c;并发和多线程中的几个问题。 实际上&#xff0c;这种内置的并发支持是Java编程语言的最强优势之一&#xff0c;并帮助它在企业界和程序员中同样流行…

《写给大家看的Web设计书(第3版)》即将上市

《写给大家看的设计书》姊妹篇——《写给大家看的Web设计书&#xff08;第3版&#xff09;》 即将上市。它是Robin Williams的又一本设计书。 也许大家对Robin Williams的畅销书《写给大家看的设计书》还念念不忘&#xff0c;还在回味那些简单凝练的设计经验。那好&#xff0c;…

Node_初步了解(4)小爬虫

1 var httprequire(http);2 var cheeriorequire(cheerio);3 var urlhttp://www.cnblogs.com/Lwd-linux/archive/2017/01.html;4 5 //获取6 function filterChapters(html){7 var $cheerio.load(html);8 9 var chapters$(.entrylistItem); 10 11 var courseData[];…