Niquelao » 博客档案 » 布局一个三柱和马卡多......“el justo”

» Archivo del weblog » 布局一个三栏和马卡多…“el justo” Niquelao - CSS 布局一个三栏和马卡多…“el justo” 2006 年 6 月 4 日，由 Rumoroso 在构建网页文档内容时，应尽一切手段避免考虑视觉设计，尤其是布局。这对于从信息流的角度正确构建内容，以及实现语义化标记和优化代码至关重要。为了实现这一目标，必须将使用 W3C 标准作为不可动摇的前提，避免使用仅为了服务于样式表呈现的额外标记。 案例开发：文档内容分为三个功能区域：特定内容、主导航菜单以及一个网站通用区域（该区域可与当前文档相关，如板块新闻；也可与整个网站或门户相关，如与门户主题相关的兴趣链接或一组横幅广告）。代码中的内容组织应根据其相对于当前页面的具体程度和相关性来确定。 因此，文档的特定信息组应首先出现在代码中，随后是通用区域（如果该区域与前述信息具体相关且随内容变化）。接着是主导航菜单。如果通用信息在整个网站中是通用的且在每个板块中没有特定特征，则将其置于最后，由菜单引导。在所有情况下，都应创建链接，以便在三个组之间跳转，前往下一个或上一个组。 为了尽可能获得简洁且优化的代码，其方案如下：

Se han añadido una cabecera y un pie al ser esta una de las situaciones más comunes que se puede dar.由于这是最常见的情况之一，因此添加了页眉和页脚。示例中使用了通用块容器 (div)。 En el caso de que estos incluyesen un único bloque (por ejemplo, una lísta), no serían necesarios, pues el identificador se podría aplicar directamente sobre él.出于追求简洁和优化代码的愿望，不使用将其中一个或多个元素分组的容器。标记及其组织在示例之间保持不变。通用样式已包含在公共 CSS 中。每个部分的特定样式集已包含在文档页眉中，以便于审查。在所有情况下，主内容块均保持流式行为。使用了通用选择器为名为“contenido1”的块的首层后代应用边距。由于并非所有浏览器都能正确识别伪元素“:first-child”，因此采取的方法是将属性应用于块的所有后代，然后取消所有父级为该块后代的后代属性。也可以使用其他方法，例如结合 Internet Explorer (IE) 条件注释使用上述伪元素。另一种方法是在“contenido1”内部创建块并应用必要样式。为了获得更简洁的标记，且不出现仅用于布局的元素，我们避免了这种方法。

实际上，该属性/属性是对侧边后代的修改，易于控制，是考虑到最优化的解决方案。这是重要的，因为它是属性和属性的声明，它是在应用程序中可能产生的效果的一部分。例如，在 IE 中，您可以包括浮动元素和相关位置的列表，也可以使用相关颜色应用程序（esto se puede subsanar posicionándolas en relativo）。想法是根据场地需求的功能来设计一个三柱的，并确定顺序。不同的布局是不同组织的组织和功能的顺序和流体特征。 La Fluidez de los bloques se consigue definiendo su ancho en porcentaje (siendo para todos los ejemplos un 20% del Total de su contenedor) y la riguidez en unidadesabsolutas (siendo en todos los ejemplos 150px)。正如我所说，使用绝对的统一，使用相对的统一 (em)。 Todo dependenterá de las necesidades certaines de cada caso: Orden en ellayout 1 2 3 流体设计工具：Fluido Fluido Fluido 混合工具工具：Fluido Rígido Fluido 混合工具工具：Fluido Fluido Rígido 混合工具工具：Fluido Rígido Rígido Orden en el 布局 1 3 2 流体布局效果: Fluido Fluido 流体布局效果: Fluido Fluido 流体布局效果: Fluido Rígido 流体效果效果: Fluido Rígido 流体布局效果: Fluido Rígido Rídigo Orden 布局 2 1 3 效果流体设计: 流体流体 流体流体设计 混合流体设计: 流体流体设计 流体流体设计 流体流体设计: 流体流体 流体流体设计 混合流体设计: 流体流体 流体流体设计 布局 2 3 1 流体流体设计 流体设计: 流体流体 流体流体设计 流体布局 2 3 1 流体流体设计 diseño híbrido: Rígido Fluido Fluido Ejemplo de diseño híbrido: Fluido Rígido Fluido Ejemplo de diseño híbrido: Rígido Rígido Fluido Orden en el layout 3 1 2 Ejemplo de diseño fluido: Fluido Fluido Fluido Ejemplo de diseño híbrido: Fluido Fluido Rígido混合图形显示： 流体图形 图形混合图形： 流体图形 布局顺序 3 2 1 流体图形图形： 流体图形 混合图形图形： 流体图形 混合图形图形： 流体图形 图形布局： 图形图形混合动力的流体效果：Rígido Rígido Fluido En alguno de los casos y para algún navegador (como puede ser Internet Explorer) pudiera darse uncomportamiento anómalo al redimensionar la ventana。 Básicamente, el comportamiento falsese debe a que aunque se le indique al contenedor cuál debe ser su ancho, al rediemensionar, el texto influye empujando ligéramente los bordes del Mismo.如果您与 100% 的工作人员相结合，则可能会发生与尺寸相关的问题，因为之前的影响，您将成为更多的人，并与其他人、其他人一起工作，或者没有任何事情卡贝尔，萨尔坦哈西亚下霍。 Para darle solución se puede declarar una dimensión en uno de ellos ligéramente under a la Ideal (例如，19.9% en lugar de 20%)。类别： CSS —> 1 条评论 Norwin Galeano 28 de August de 2006 Muy bueno。页面中的许多实用程序的详细说明