[翻译]标记语言和样式手册 Chapter 15 为body指定样式
作者：zhaozy 来源：3user.com 时间：2008-02-21 12:36:00
Chapter 15 为<body>指定样式
把内容与显示效果分开设定的好处之一就是灵活,通过用CSS控制网站的版面布局(在第十二章用过的方法),就能控制整个网站的设计要素,改变几条规则,就能立刻戏剧性的更新上千个页面.
用CSS控制布局的的便利性示范之一,就是为<body>指定样式,通过为<body>标签加上class或者id,就能对页面的任何标签进行自定义控制.完全没有重复定义的烦恼.
在这一章里,将探讨如何通过为<body>标签加上class而让我们用一份标记结构切换两种不同的版面配置.
两栏或者三栏的布局
就像用CSS版面布局技术为Fast Company重新设计网站时,挑战之一是:虽然所有页面都共享相同的导航,页尾区,但是也需要建立两种不同版面布局.
第一种布局是"索引页(首页)",见图15-1,这是具备导航功能的页面,让使用者能继续深入网站的目录结构.这些页面我们决定使用三栏布局.
图15-1 Fast Company的三栏"索引页"示范
第二种页面布局则是"内文页" 图15-2.任何感觉是目的地的页面都使用这种版面布局.为了提升易读性,我们决定省略左边栏,留下两栏,也就是一个大栏放置内容,另一个放广告.
图15-2 Fast Company的两栏 "内文页" 示范.
我解释这些的原因不是为了证明我们破解了某个版面布局的伟大谜团,而是为了示范为<body>标签加上class就能调整栏宽,并且根据页面形态放置或省略去第三栏.制作这样的效果的时候,完全没有重复任何规则,也没有引入任何额外的样式表.
标签：样式,标记,css,手册
0
投稿猜你喜欢
java正则表达式提取数字的方法实例
2022-07-09 12:49:31
JavaScript实现省市县三级级联特效
2024-04-18 10:55:56
让你的主页声色并茂—巧为网页添加背景音乐
2010-09-02 12:35:00
技巧/诀窍：在ASP.NET中重写URL
2007-09-23 12:21:00
php session应用实例 登录验证
2023-11-14 13:49:43
Bootstrap中定制LESS-颜色及导航条(推荐)
2024-05-02 16:21:26
python计算机视觉opencv图像金字塔轮廓及模板匹配
2021-10-10 09:15:33
vue实现图片懒加载的方法分析
2024-04-27 16:10:29
PyCharm搭建Spark开发环境的实现步骤
2022-05-21 04:21:17
PHP实现图片批量打包下载功能
2024-05-11 09:47:21
Javascript vue.js表格分页，ajax异步加载数据
2024-05-21 10:13:05
Python方法的延迟加载的示例代码
2022-09-05 03:25:00
php基础知识:类与对象(5) static
2023-07-24 03:01:30
Sphinx生成python文档示例图文解析
2022-06-07 23:35:50
laravel中的一些简单实用功能
2024-05-13 09:51:57
详解Python实现图像分割增强的两种方法
2022-08-16 20:23:50
python常用数据结构元组详解
2022-08-14 08:14:44
CTF中的PHP特性函数解析之下篇
2023-06-14 09:54:52
mysql用户创建与授权的简单实例
2024-01-18 00:20:18
TensorFlow实现RNN循环神经网络
2023-03-18 18:12:49
