利用CSS控制<body>布局：实现灵活的多栏网页设计

131 浏览量更新于2024-08-31 收藏 353KB PDF 举报

本篇文章主要讨论的是HTML和CSS在网页设计中的应用，特别是针对<body>标签的样式设置。标记语言如HTML被用来组织网页内容，而CSS则负责控制这些内容的呈现方式，实现内容与显示效果的分离，提供极大的灵活性。在第十五章中，作者强调了使用CSS来管理版面布局的重要性，这使得设计师能够通过简单的规则变化，迅速地更新整个网站的外观，无需逐个修改每个页面。章节内容详细讲解了如何利用CSS的class或id属性，对<body>标签进行定制化控制，避免了重复定义的繁琐。举例来说，通过为<body>添加class，可以实现页面布局的切换，比如从三栏布局到两栏布局，如FastCompany网站的索引页（首页）和内文页。这两种页面布局的区别在于导航和栏目的展示方式，索引页采用三栏布局，而内文页则去掉左侧栏以提高阅读体验，仅保留主要内容和广告区域。作者提到，实现这种布局变化的关键在于使用绝对定位技术，并且所有的版面布局变化都是基于一个共享的标记结构进行的，没有引入额外的样式表。这种设计方法使得页面结构清晰，易于维护和扩展。在内文页的简化标记结构中，可以看到基本的组成部分，如<header>和<main>元素，它们分别用于存放头部信息和主要内容。这些元素的定位和样式是由CSS规则来决定的，展示了如何通过标记语言和CSS的结合，实现网页布局的灵活性和高效管理。本文是关于如何利用HTML标记语言和CSS样式表来实现网页布局的灵活性，以及如何通过合理运用类(class)和ID(id)属性，实现页面内容和视觉表现的分离，从而轻松创建和管理多样的网页布局设计。

标记语言标记语言——为为

点击这里返回网页教学网　HTML教程　栏目．想浏览CSS教程请点这里。上文：标记语言——图片替换。

Chapter 15 为指定样式把内容与显示效果分开设定的好处之一就是灵活,通过用CSS控制网站的版面布局(在第十

二章用过的方法),就能控制整个网站

点击这里返回我们　HTML教程　栏目．想浏览CSS教程请点这里。

上文：标记语言标记语言——图片替换图片替换。 Chapter 15 为<body>指定样式

把内容与显示效果分开设定的好处之一就是灵活,通过用CSS控制网站的版面布局(在第十二章用过的方法),就能控制整个网站

的设计要素,改变几条规则,就能立刻戏剧性的更新上千个页面.

用CSS控制布局的的便利性示范之一,就是为<body>指定样式,通过为<body>标签加上class或者id,就能对页面的任何标签进行

自定义控制.完全没有重复定义的烦恼.

在这一章里,将探讨如何通过为<body>标签加上class而让我们用一份标记结构切换两种不同的版面配置. 两栏或者三栏的布局

就像用CSS版面布局技术为Fast Company重新设计网站时,挑战之一是:虽然所有页面都共享相同的导航,页尾区,但是也需要建

立两种不同版面布局.

第一种布局是"索引页(首页)",见图15-1,这是具备导航功能的页面,让使用者能继续深入网站的目录结构.这些页面我们决定使用

三栏布局.

图15-1 Fast Company的三栏"索引页"示范

第二种页面布局则是"内文页" 图15-2.任何感觉是目的地的页面都使用这种版面布局.为了提升易读性,我们决定省略左边栏,留下

两栏,也就是一个大栏放置内容,另一个放广告.

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38735899

粉丝: 2
资源: 973

利用CSS控制<body>布局：实现灵活的多栏网页设计

HTML标记语言——引用

标记语言——为文字指定CSS样式

标记语言——清单

标记语言——标题

HTML标记语言——表格标记

标记语言——打印样式

HTML标记语言——表单

标记语言——短语元素

标记语言——CSS布局

标记语言——图片替换

最新资源