`
zuoming99
  • 浏览: 139583 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

内容优先的 CSS 三列布局

css布局 
阅读更多

这样的布局可以确保中间内容首先被下载，也更有利于SEO

width、margin等变量的修改注意参考注释

 

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
    <style type="text/css">
        .root { width: 960px; margin: 0 auto; }

        .center, .left, .right { float: left; display: inline; }

        .center { width:100%;                                          background-color: #e9967a; }

        /* margin-left = .left[width], margin-right = .right[width] */
        .center .content { margin: 0 250px 0 150px; padding: 10px;  background-color: #60A179; }

        /* margin-left = .root[width] */
        .left { width: 150px; margin-left: -960px;                   background-color: blue; }

        /* margin-left = -(.right[width]) */
        .right { width: 250px; margin-left: -250px;                  background-color: orange; }

    </style>
</head>
<body>

    <div class="root">
        <div class="center">
            <div class="content">

                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>

            </div>
        </div>

        <div class="left">
            <p>left</p>
            <p>left</p>
            <p>left</p>
        </div>

        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>

</body>
</html>
 

 

  • 大小: 4.6 KB
分享到：
| css hack 与浏览器支持情况对应表
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS网站布局实录 （第二版）PDF版

    ),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...

    CSS与DIV网页布局基础

    CSS与DIV网页布局基础 什么是样式表 CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页 你可以...

    《CSS全程指南》随书光盘

    9.3.2 div+CSS布局的缺点 201 9.3.3 何时使用TABLE 202 9.4 一列布局 203 9.4.1 一列固定宽度 203 9.4.2 一列宽度自适应 204 9.4.3 一列宽度居中 205 9.5 二列布局 206 9.5.1 二列固定宽度 206 9.5.2 二列宽度自适应...

    css-adv:htmlcss 布局实现技巧练习

    css-adv 前端能力提升练习html/css布局实现技巧练习css 练习布局命名由css-前缀开头图片hover，1px公用边不对称的全宽背景平铺两列的经典布局（实现其中一列自适应？再优先加载？两列等高？）简单的tab切换，要压住...

    移动优先：布局：移动优先

    移动优先布局：移动优先GITHUB页面

    在CSS网格布局中的列中填充项目的实现方法

    列数固定为三。我将使用 React和SCSS(Sassy CSS)对此进行演示。 1、如果必须按行排列，那将是非常简单的。用CSS就可以了，代码如下所示： 完整的代码，包括CSS部分，如下所示： 输出效果 如你所见，数字按行...

    一个简单的轻量级的CSS网格

    simple-grid.css是一款移动优先的12列响应式CSS网格系统。它是轻量级的，压缩后的文件只有2kb，响应式速度快，并且使用非常简单。

    Bootstrap CSS/HTML前端框架模板 v3.3.7.rar

    框架中包括了众多HTML、CSS 和 JS 工具包，可帮助前端开发者快速开发响应式布局、移动设备优先的 WEB 项目。 　在Bootstrap的文档中，包括了20个具有代表性的设计模板，可为你的前端开发设计提供参考。如演示截图所...

    css入门笔记

    3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ ...

    blueprint-css：Blueprint CSS是基于CSS Grid和Flexbox构建的现代响应式CSS布局库和网格

    一个轻量级的布局库，用于构建可在任何地方工作的出色的响应式移动优先UI。 开源，使用CSS Grid和Flexbox构建。 在下载单个CSS文件。 文献资料 在此处查看。 变更日志 查看以查看有关更新和改进的详细信息。 扩展...

    GRD:轻量级移动优先 CSS 网格

    这些列不受任何媒体查询的限制，它们将显示为默认布局。 为什么没有媒体查询这样的东西？ 这是移动优先，我们将把这个决定作为一个真正的优势。 平板电脑 对于平板电脑，有一个媒体查询。 因此，在宽度超过 640 ...

    techdegree-project-2-portfolio:我使用HTML和CSS构建了响应式，移动优先的布局

    我的技术学位项目2：个人资料-移动优先响应式布局 该项目需要使用HTML和CSS构建响应式，移动优先的布局。 通过调整以适应小，中和大屏幕尺寸，该布局展示了对响应式设计的理解。 该项目要求首先编写CSS来为小型...

    Bootstrap前端框架笔记 +css+html

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 一个框架、多种...

    one-line-layouts:简单CSS线可帮助构建现代布局

    一线布局 A突出显示了一些功能强大CSS行，这些行进行... 实用程序优先CSS（例如内联样式）提供样式的单一用途，但可通过类应​​用。 CSS-preproceccor。 用它来解决Atomizer中未定义CSS属性，例如grid ， Aspect-ratio

    plasma.css:一个基于Flexbox的健壮但极简CSS网格框架

    移动优先12列网格基于Flexbox 兼容Bootstrap 3（待定）安装Plasma.css可以作为软件包通过安装npm install plasma.css特征使用flexbox的网格布局特征支持的发行状态默认基于flexbox 是的Α :check_mark: React灵敏是...

    移动端优先的flex三栏布局的使用方法

    felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。 这篇文章主要介绍了移动端优先的flex三栏布局的使用方法，感兴趣的小伙伴们可以...

    zwxs#frontInterview#CSS面试题1

    4. 完成左中右布局 左边固定200px 中间自适应右边固定100px 中间部分优先渲染 并解释原理 5. 使用CSS画一个扇形 并说出实现原理 6. CSS选

    圣杯布局和双飞翼布局解析.docx

    圣杯布局和双飞翼布局 ...两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在DOM结构上优先，以便先行渲染。（核心目的：先解析中间栏，展示当前页面的核心内容，提升用户体验。）

    advanced-css-course

    编写好HTML和CSS的三个Struts 响应式设计 可维护和可扩展的代码 网络性能 响应式设计 流体布局 媒体查询 响应式图像 正确的单位 桌面优先与移动优先 可维护和可扩展的代码 干净的 容易明白 生长 可重复使用的 如何...

Magicbox
Global site tag (gtag.js) - Google Analytics