`
zuoming99
  • 浏览: 140961 次
  • 性别: 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+DIV布局模板

    在网页设计领域，CSS（Cascading ...这些模板可以帮助开发者快速搭建网页布局，同时也可以作为学习CSS布局技巧的参考资料。通过分析和模仿这些模板，开发者可以提升自己的布局设计能力，更好地应对各种网页设计挑战。

    结合CSS3的布局新特征谈谈常见布局方法

    CSS3还引入了多列布局、媒体查询等特性，使得布局能够更加适应不同设备和屏幕尺寸。媒体查询允许开发者根据不同的屏幕尺寸和分辨率调整页面布局，实现响应式设计。多列布局则可以使得内容以列的形式展示，类似于报纸...

    div+css样式与布局实例

    - CSS盒模型是理解布局的基础，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 - 盒模型分为两种：W3C标准盒模型和IE盒模型（怪异盒模型），理解两者差异对布局至关重要。 4. **布局模式**...

    38个CSS布局网站模板

    4. **Flexbox布局**：现代CSS布局的一个重要工具是Flexbox，适用于处理一维布局，如行或列。它允许元素在容器内灵活地调整大小和排列，适应不同屏幕尺寸。在模板中，可能会看到诸如`display: flex;`、`justify-...

    移动优先的12列响应式CSS网格系统

    移动优先的12列响应式CSS网格系统是现代网页设计中的一个重要概念，它基于CSS3技术，特别是媒体查询（Media Queries）和Flexbox或Grid布局，以实现灵活、自适应的网页布局。在这个系统中，网页的设计首先考虑的是...

    CSS3响应式布局

    CSS3响应式布局通过媒体查询（Media Queries）、流式布局（Fluid Grids）、弹性盒模型（Flexbox）以及百分比单位等特性，实现了网页在不同设备上的自适应显示。 1. 媒体查询（Media Queries）：CSS3引入的媒体查询...

    仿QQ空间个人站点CSS+DIV布局

    【标题】"仿QQ空间个人站点CSS+DIV布局"是一个基于Web开发的项目，旨在创建一个与QQ空间类似的个人展示...对于学习和理解Web开发流程，尤其是对ASP.NET、CSS布局和数据库管理感兴趣的初学者，这是一个很好的实践案例。

    CSS网站布局实录.pdf 高清下载

    尽管给定的部分内容似乎与标题和描述不符，主要聚焦于Java学习社区的链接，而标题和描述明确指向了“CSS网站布局”的主题...通过持续学习和实践，你可以不断提升自己的CSS布局技巧，创造出更吸引人、更高效的网页设计。

    Div_CSS.rar_DIV css布局_css大全_css布局

    3. **CSS布局模型** - 流动布局（Block Layout）：默认的块级元素布局方式，每个元素独占一行。 - 行内布局（Inline Layout）：行内元素如`&lt;span&gt;`，在同一行内显示。 - 浮动布局（Float Layout）：通过`float`...

    灰色简洁布局css3模板

    CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，提供了许多增强的功能，如动画、选择器、布局模式等，使得网页设计更加灵活且具有视觉吸引力。 首先，我们来深入了解CSS3的一些关键知识点： 1. **选择...

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

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

    css标准布局源文件

    3. **Flexbox布局**：现代CSS布局的重要工具之一是Flexbox，它简化了处理一维布局（如行或列）的过程。通过设置`display: flex`，可以轻松实现元素的对齐、排序和分配空间。 4. **Grid布局**：CSS Grid是用于二维...

    高效学习CSS布局之道pdf

    《高效学习CSS布局之道》是一本专为网页开发者设计的指南，旨在帮助读者深入理解和熟练掌握CSS（层叠样式表）在网页布局中的应用。这本书通过244个实际范例，提供了丰富的实践操作经验，使得理论知识与实战技能相...

    DIV+CSS完美布局

    #### 三、CSS布局技术 - **CSS2盒模型**：盒模型是CSS布局的核心概念，它由内容、内边距、边框和外边距四部分组成，理解和运用盒模型对于实现精确布局至关重要。 - **辅助图片处理**：在DIV+CSS布局中，推荐将辅助...

    DIV+CSS网页样式与布局实例

    在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它将内容和表现分离，提高了页面的可维护性和可扩展性。本实例教程旨在帮助读者深入理解和掌握`DIV+CSS`网页样式与布局的技巧。 一、`DIV`元素详解 `DIV`是...

    divcss布局:CSS布局方法介绍

    ### DivCSS布局：CSS布局方法介绍 #### 一、CSS布局常用思路方法 在Web开发中，CSS（层叠样式表）布局是非常重要的一个环节，它决定了网页元素如何排列和展示。本文将详细介绍几种常用的CSS布局方法及其应用场景。...

    CSS实现页面两列布局与三列布局的方法示例

    左右两列使用`float`属性定位，而主要内容则通过`overflow: hidden`创建BFC，这样它就不会被浮动元素覆盖，从而形成三列布局。这种布局适用于固定宽度的列。 接着，我们讨论双飞翼布局，这是一种由淘宝提出的布局...

    html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip_html5响应式布局怎么写

    本篇文章将深入探讨HTML5 CSS3响应式布局的概念、设计流程以及实现响应式布局的三种主要手段。 响应式布局的核心理念在于“一处设计，四处适用”，它允许网页根据访问设备的屏幕大小和方向自动调整布局、内容和样式...

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