[翻译]标记语言和样式手册 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
投稿猜你喜欢
精细分析 SQL server服务器的内存配置
2009-01-19 13:56:00
记Qzone项目组视觉设计标注的前前后后
2010-03-24 18:03:00
读写xml文件的2个小函数
2007-08-23 12:59:00
像聪明女孩穿衣服那样设计网页文字
2007-11-06 16:45:00
不要使用@import[译]
2009-05-01 12:01:00
Web内容写作：得到更好稿件的头15条规则[译]
2011-06-09 14:38:00
JDBC连接MySQL数据库关键的四个步骤
2009-12-17 12:06:00
asp datediff 时间相减
2011-03-25 10:34:00
如何把URL和邮件地址自动转换为超级链接？
2009-11-02 20:22:00
电子商务搜索LIST页面用户体验设计
2010-08-03 12:57:00
JavaScript正则表达式的简单应用：高亮显示
2008-07-20 12:46:00
超酷的js图片轮播渐变效果
2007-10-10 20:45:00
做设计还是做产品
2009-06-11 13:01:00
FSO无效的过程调用或参数问题
2010-03-25 21:49:00
ASP程序与SQL存储过程结合使用详解
2011-03-25 10:50:00
Oracle 低权限数据库账户得到 OS 访问权限 提权利用
2009-06-19 17:27:00
提高MYSQL查询效率的三个有效的尝试
2009-02-27 16:08:00
轻松在线制作各种Logo标志
2008-05-26 12:54:00
详解MySQL数据库安全配置
2010-01-26 15:19:00
Oracle11.2 命令行手工最简创建数据库的过程
2009-09-14 12:07:00