第 27 章 CSS 传统布局[上]

学习要点:

1.布局模型

2.表格布局

3.浮动布局

主讲教师:李炎恢

本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的。

一.布局模型

  在早期没有平板和智能手机等移动设备大行其道的时期,Web 页面的设计主要是面向 PC 端电脑分辨率展开的。这种分辨率比例比较单一,基本上只要满足最低分辨率设计即可。一般来说有 4:3、16:10、16:9 这样的主要分辨率。那么,从这种比例上来看,长度总是大于宽度的。从最低分辨率 1024 * 768 设计即可。为了使浏览器底部不出现滚动条,需要减去适当的宽度,比如减去 28,最终固定长度设置为 996 即可。当然,也有一些网站在近两年讲最低分辨率设置为 1280 减去滚动条宽度,因为大显示器逐步主流。

  除了刚才所说的固定长度的布局,还有一种是流体布局,就是布局的长度为百分比,比如 100%。不管你是什么分辨率,它都能全屏显示,当然,局限性也特别大,只适合一些单一页面,复杂的页面,会随着不同浏览器产生各种阅读障碍。

  我们创建一个三行两列模型。并采用表格布局和浮动布局,构建固定和流体布局的方式,模型图如下:

二.表格布局

表格布局,就是通过设定固定的单元格,去除表格边框和填充实现的布局。当然这个布局非常不建议使用,只是教学了解。表格应该用它最为语义的地方,就是二维表的数据显示。

1.固定布局

//HTML 部分

<table border="0">
    <tr>
        <td colspan="2" class="header">header</td>
    </tr>
    <tr>
        <td class="aside">aside</td>
        <td class="section">section</td>
    </tr>
    <tr>
        <td colspan="2" class="footer">footer</td>
    </tr>
</table>

//CSS 部分

body {
    margin: 0;
}

table {
    margin: 0 auto;
    width: 960px;
    border-spacing: 0;
}

.header {
    height: 120px;
}

.aside {
    width: 200px;
    height: 500px;
}

.section {
    width: 760px;
    height: 500px;
}

.footer {
    height: 120px;
}

2.流体布局

表格的固定布局改成流体布局非常简单,只需要设置 table 为 100%即可。

//修改 table

table {
    width: 100%;
}

三.浮动布局

浮动布局主要采用 float 和 clear 两个属性来构建。

1.固定布局

//HTML 部分

<header>
    header
</header>

<aside>
    aside
</aside>

<section>
    section
</section>

<footer>
    footer
</footer>

//CSS 部分

body {
    width: 960px;
    margin: 0 auto;
    color: white;
}

header {
    height: 120px;
}

aside {
    width: 200px;
    height: 500px;
    float: left;
}

section {
    width: 760px;
    height: 500px;
    float: right;
}

footer {
    height: 120px;
    clear: both;
}

2.流体布局

流体布局只要更改 body 元素的限定长度为 auto 或 100%。然后左右两列分别设置 20% 和 80%即可。

//CSS 部分

body {
    width: auto;
}

aside {
    width: 20%;
}

section {
    width: 80%;
} 
时间: 2024-10-06 03:19:36

第 27 章 CSS 传统布局[上]的相关文章

第27章 CSS传统布局(上)

第 27章 CSS传统布局[上]学习要点:1.布局模型2.表格布局3.浮动布局 本章主要探讨 HTML5中 CSS早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的.一.布局模型在早期没有平板和智能手机等移动设备大行其道的时期,Web页面的设计主要是面向PC端电脑分辨率展开的.这种分辨率比例比较单一,基本上只要满足最低分辨率设计即可.一般来说有 4:3.16:10.16:9这样的主要分辨率.那么,从这种比例上来看,长度总是大于宽度的.从最低分辨率 1024 * 768设计即可.为了使浏

第27章 CSS传统布局(下)

第 27章 CSS传统布局[下]学习要点:1.定位布局2.box-sizing3.resize 本章主要探讨 HTML5中 CSS早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的.一.定位布局在使用定位布局前,我们先了解一下定位属性的用法.CSS2提供了position属性来实现元素的绝对定位和相对定位. 属性 说明static 默认值,无定位.absolute 绝对定位,使用 top.right.bottom.left进行位移.relative 相对定位,使用 top.right.

第 27 章 CSS 传统布局[下]

学习要点: 1.定位布局 2.box-sizing 3.resize 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的. 一.定位布局 在使用定位布局前,我们先了解一下定位属性的用法.CSS2 提供了 position 属性来实现元素的绝对定位和相对定位. 属性 说明 static 默认值,无定位. absolute 绝对定位,使用 top.right.bottom.left进行位移. relative 相对定位,使用 top.

34.CSS传统布局【上】

第二十七章    传统布局[上] 一.布局模型 二.表格布局 (非常不建议使用) 就是通过设定固定的单元格,去除表格边框和填充实现的布局,他应该在二维表格的数据显示 1.固定布局 //html部分 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>传统布局[上]</title> <link re

第 16 章 CSS 盒模型[上]

学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性 值 说明 CSS 版本 width auto.长度值或百分比 设置元素的宽度 1 height auto.长度值或百分比 设置元素的高度 1 min-width auto.长度值或百分比 设置元

第五章 CSS页面布局基础

1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的元素影响其相邻元素的位置. 2.块级元素 前后换行显示,默认状态下独占一行: 块级元素可以作为容器,包含其他行级元素.块级元素: 块级元素有一定高度和宽度,可以通过width和height来设置. div,table,p,h1-h6,ul,form等等 3.行级元素(内嵌元素.内联标签) 类似于文本

第 15 章 CSS 文本样式[上]

学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节课,我们重点了解一下 CSS 文本样式中字体的一些设置方法,样式表如下: 属性名 说明 CSS 版本 font-size 设置字体的大小 1 font-variant 设置英文字体是否转换为小型大写 1 font-style 设置字体是否倾斜 1 font-weight 设置字体是否加粗 1 fon

《CSS网站布局实录》学习笔记(三)

第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3.1.1 div是什么 div是XHTML中制定的.专门用于布局设计的容器对象.在传统表格式布局中,之所以能够进行页面的排版布局设计,完全依赖于表格对象table.如今,接触另一种布局方式--CSS布局.div正是这种布局方式的核心对象.仅从div的使用上说,做一个简单的布局只需要依赖两样东西:di

第16章 盒模型(上)

第 16章 CSS盒模型[上] 学习要点:1.元素尺寸2.元素内边距3.元素外边距4.处理溢出 本章主要探讨 HTML5中 CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸CSS盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性 值 说明 CSS版本width auto.长度值或百分比 设置元素的宽度 1height auto.长度值或百分比 设置元素的高度 1min-width auto.长度值或百分比 设置元素最小宽度