 |
|
|||||||
|
|||||||||
 |
您现在的位置： 电脑软硬件应用网 >> 设计学院 >> 网页设计 >> 正文 |
|
|||||
| 网页设计中为网页指定样式的方法 | |||||
| 作者:未知 文章出处:中国IT实验室 更新时间:2008-5-12 10:07:29 | |||||
|
把内容与显示效果分开设定的好处之一就是灵活,通过用CSS控制网站的版面布局(在第十二章用过的方法),就能控制整个网站的设计要素,改变几条规则,就能立刻戏剧性的更新上千个页面. 用CSS控制布局的的便利性示范之一,就是为<body>指定样式,通过为<body>标签加上class或者id,就能对页面的任何标签进行自定义控制.完全没有重复定义的烦恼. 在这一章里,将探讨如何通过为<body>标签加上class而让我们用一份标记结构切换两种不同的版面配置. 两栏或者三栏的布局 就像用CSS版面布局技术为Fast Company重新设计网站时,挑战之一是:虽然所有页面都共享相同的导航,页尾区,但是也需要建立两种不同版面布局. 第一种布局是"索引页(首页)",见图15-1,这是具备导航功能的页面,让使用者能继续深入网站的目录结构.这些页面我们决定使用三栏布局.
第二种页面布局则是"内文页" 图15-2.任何感觉是目的地的页面都使用这种版面布局.为了提升易读性,我们决定省略左边栏,留下两栏,也就是一个大栏放置内容,另一个放广告.
我解释这些的原因不是为了证明我们破解了某个版面布局的伟大谜团,而是为了示范为<body>标签加上class就能调整栏宽,并且根据页面形态放置或省略去第三栏.制作这样的效果的时候,完全没有重复任何规则,也没有引入任何额外的样式表. 标记和样式结构 在开始叙述两种页面共用的标记结构之后,这些叙述就会开始变得很有道理,为了达成分栏布局,会使用在第十二章里提过的绝对定位法. 内文页
以CSS规则为#content与#footer加上足以使用绝对定位法放进#right的右外补丁,在这个例子中,190像素刚好可以满足.
索引页
对这份三栏结构来说,不仅要为#content与#footer设定右外补丁以容纳右栏,还要设定左外补丁,容纳新加进来的左栏. 但是先前已经把左外补丁设为10像素了,以配合只拥有双栏的预设内文页布局. 哇,我们卡住了,该怎么继续呢?请继续往下阅读. 这个<body>有分类 这就是<body>标签加入游戏的地方:通过为<body>指定class,指定这个是索引页,就能为这个分类编写特殊的规则了. 本文引用自www.45it.com电脑软硬件应用网 |
|||||
| 最新热点 | 最新推荐 | 相关 | ||
| 开发技巧:网页设计中的黄金比… 让网站流量爆涨的十条秘决 网页设计教程之设计的步骤及… 网页制作小技巧 揪出网页无效… 制作主页前的准备 网页制作：用零框架技术加密… 一个月时间从PR0到PR6 网页游戏推广之道浅谈 HTML网页制作的八条强大技巧 个人网站发展道路战略 |
