`

有关YMAL布局工具介绍

阅读更多

1.1 YAML是什么?

YAML是“另一个多栏布局(Yet Another Multicolumn Layout)”的缩写。
YAML是XHTML/CSS框架
YAML可以作为开发弹性布局(流动布局)的基础,它能强有力地应对弹性容器和不同变化单元带来的挑战。

最重要的特点:

  • 两种布局方法:普通多列布局+网格(columns + grids),灵活性与易用性兼具
  • 广泛的跨浏览器兼容(IE 5.5+),在各种布局下YAML都有良好的表现
  • 尽可能小的限制使用者(布局可以使用固定宽度或者弹性宽度等)
  • 栏目在显示上和在源码中的顺序可以不同,利于SEO
  • 按功能划分样式文件,工作会更有效
  • 整合网格系统,使用子模板(subtemplate)几乎能组合成任何布局

使用YAML可以开发出常规一到三栏的流动或者固定宽度布局。每个栏目也可以通过使用子模板(subtemplate)无限的嵌套和扩大。

有两种创建布局的基本方法:

自底向上原则

最开始是一个空白页面,所有的容器必须被创建,定位并使用CSS书写样式。但基本布局还不存在。当构建布局时,设计者必须发觉所有相关的浏览器BUG,并且避免这些BUG或者使用HACK。

自顶向下原则

设计者从一个有着跨浏览器兼容性、有基本功能的模块骨架的布局开始,此布局包含所有常用的页面元素。然后按照自己的想法修改这个基础布局,最后通过移除布局中不必要的元素优化XHTML和CSS代码。

YAML基于自顶向下原则。“搭积木”和“框架”这两个词能够最好的描述YAML。

1.2 YAML不是什么?

YAML并不是一个预先完成的布局,这听起来与”自顶向下“原则原则相违背。没有对特殊设计要求的优化,无用的元素(HTML/CSS)只是多余的(就像轮船中的压仓物,应该丢弃)。

作者注释:
YAML框架提供跨浏览器兼容的基础布局以及许多有用的CSS组件,让设计者有更多时间和精力放在设计创新。如果把YAML作为一个完成了的布局重复使用,那么这些网页就像是那些连成一片的房子——千篇一律。

当然不强迫使用YAML和所有组件作为布局的初稿。实际使用YAML时保持代码简洁干净,维护和调整代码将变得更简单。布局完成后应该清除不必要的(X)HTML代码和CSS文件。

1.3 框架的优点

YAML不仅仅是简单的多栏布局,它是一个完整的布局框架,高度灵活并在真实环境条件经过测试。YAML提供不同的模块并确保他们能完美地一起工作。YAML框架的一些优点:

浏览器兼容性

YAML的组件都经过充分的测试,确保在所有现代浏览器下有相同的表现。必要的HACK也被构建进框架之中,最大程度减少各种常规布局的测试时间。

积木原理

模块化设计允许使用提供的代码特别高效的布局设计。

基本的组件结合起来形成一个基础但功能完全的布局,附加的组件用于完善或修改基础的布局。

例子包含了使用basemod.css布局以及打印样式可能的简单变化。

布局灵活

YAM不只提供一个简单的三栏布局。栏目的顺序可以任意调换,因为浮动的动态特性,很容易改为单栏或两栏的布局。栏目和布局的宽度可以使用任何量度单位定义,你甚至可以在同一页面使用各种单位。

健壮的代码

把XHTML和CSS构建成独立组件,保证了布局框架与实际内容分离。

1.4 关于版本更新

YAML框架不断地更新。每个新版本的变化和新增内容都会在更新日志中记录,如果有必要会附加文件。由于分开放置YAML与用户CSS,更新YAML会很容易。

 

 

 

对于我这种对前端CSS不熟的人来说用YMAL BUILDING来建立网页布局特别方便

 

http://builder.yaml.de/

 

这是YAML的在线生成工具的网站,用FF打开,不支持IE6

 

分享到:
评论

相关推荐

    ymal文件详解.md

    ymal文件详解

    Linux运维-运维课程d1-自动化工具ansible概述与常用模块-18-playbook介绍-YMAL格式介绍.mp4

    Linux运维-运维课程d1-自动化工具ansible概述与常用模块-18-playbook介绍-YMAL格式介

    k8s yaml 批量生成工具

    频繁更新微服务及相关配置的早期阶段,不想维护 *.yaml 文件(例如 gate 的端口和 service 对外配置频繁改变,本工具可以通过参数配置一键生成 gate-kube.yaml) 3. 特点: a. 需安装 go 1.16 及以上版本(理论上 ...

    yamltoxmljson:YAML 到 XML 或 JSON 转换器

    YAML 到 XML 或 JSON 转换器 ================================================== ====== 安装 npm install -g yamltoxmljson 用法 usage: yamltoxmljson ./config.json config.json 示例 { ...

    yaml-parser:Java的简单Yaml解析器

    1. **添加依赖**: 在Java项目中,首先需要将`yaml-parser`库的依赖添加到构建工具配置中,如Maven或Gradle。 2. **解析YAML**: 使用提供的API读取YAML文件并解析成Java对象,例如: ```java Yaml yaml = new Yaml...

    tenant-management.yaml

    tenant-management.yaml

    yaml-merge:超级简单的用于合并YAML文件的工具

    合并YAML文件的超级简单工具。 安装 对于命令行 npm install -g @alexlafroscia/yaml-merge 通过节点使用 npm install --save @alexlafroscia/yaml-merge 用法 yaml-merge接收一系列yaml文件,并从左到右合并它们。...

    yamlpal:简单的工具,用于修改和搜索Yaml文件,同时保持原始文件格式

    简单的工具,用于修改和搜索yaml文件,同时保持原始文件格式。 Yamlpal使用自己的版本的“ yamlpath”(类似于xpath的语法)来标识yaml文件中的元素。 基本用法: # Installation pip install yamlpal # ...

    python中yaml模块的使用

    在Python中,`yaml`模块(通常通过`PyYAML`库实现)是处理YAML文件的核心工具。YAML(YAML Ain't Markup Language)是一种轻量级的数据序列化语言,设计目标是让人类能够方便地阅读和编写,同时也能被计算机程序轻松...

    OpencvYAMLdocumentestablishment

    OpenCV(开源计算机视觉库)是一个强大的工具,用于图像处理和计算机视觉任务。在某些应用场景中,我们需要存储或加载配置信息,比如模型参数、图像坐标等,这时YAML(Yet Another Markup Language)格式就非常实用...

    自动化运维工具ansible学习笔记

    Ansible基于Pythonparamiko开发,分布式,无需客户端,轻量级,配置语法使用YMAL及Jinja2模板语言,更强的远程命令执行操作。 Ansible的工作机制是将Ansible模块通过SSH协议(或者Kerberos、LDAP)推送到被管理端...

    swagger-yaml-to-json-schema:Node.js CLI工具从Swagger YAML文件生成JSON模式

    swagger-yaml-to-json-schema(ytoj) 此工具可用于从Swagger版本2或3(OpenAPI)或AsyncAPI 2 YAML文件生成JSON模式。先决条件Node.js 7.0版(理论上)或更高版本。 已测试8.12.0、10.13.0、10.14.1、13.11.0和...

    使用自动化运维工具Ansible集中化管理服务器

    Ansible是一款为类Unix系统开发的自由开源的配置和自动化工具。它用Python写成,类似于saltstack和Puppet,但是有一个不同和优点是我们不需要在节点中安装任何客户端。它使用SSH来和节点进行通信。Ansible基于 ...

    kuboard安装yaml文件

    在Kubernetes生态系统中,`Kuboard`是一个非常实用的工具,它专为集群管理和运维而设计,提供了直观的Web界面,便于用户查看和管理Kubernetes资源。在本主题中,我们将深入探讨“Kuboard安装yaml文件”的相关知识点...

    yml_comparer:YML的Java实现提供了比较

    yml_comparer YML比较器 这是Java实现YML提供块的比较 用法: yml_comparer <old> 结果由<OfferId><r><n><m><p> ,其中 OfferId是要约的ID r表示要约已在删除的信号 在添加了n要约的信号 在修改了要约的m信号 ...

    Kyligence Zen 物流行业北极星指标、指标 yaml 文件及数据 csv 文件

    Kyligence Zen 物流行业北极星指标及数据文件 对应操作博客可查看:https://blog.csdn.net/weixin_39074599/article/details/126826885?spm=1001.2014.3001.5502

    docker-compose(1).yaml

    owncloud+mysql docker-compose 有问题可私信

    yaml-usd:交换yaml和usd的脚本

    在`yaml-usd-master`压缩包中,你将找到`yaml-usd`项目的源代码和其他相关文件。主要关注的文件是`usda_writer.py`,这是一个Python脚本,你可以通过命令行来运行它。例如,假设你有一个名为`scene.yaml`的YAML文件...

    可以训练yolov5(v6.0)、yolox、小型网络,添加注意力机制

    注意力机制在深度学习中是一种强大的工具,它允许模型聚焦于输入中的关键部分,而忽略不重要的信息。在目标检测中,注意力机制可以增强模型对对象特征的提取,从而提高定位和分类的准确性。例如,SEBlock(Squeeze-...

Global site tag (gtag.js) - Google Analytics