CSS设计-第三部分:不使用表格的设计(II) (转)
定义li元素
下面定义ul元素(列表元素)中的li元素(列表项目元素)规则.使用CSS创建水平导航条十分方便.默认认的列表项目是从上至下排列的.但我们可以通过设定display属性为inline来变为水平.
好了,用前面的方法编写下面的代码吧:
#nav ul li{
display: inline;
padding: 0;
margin: 0;
}
请回想一下继承元素的用法,这有助于页面风格的一致性.如果#nav div中含有ul元素,而ul元素中含有li元素,那么该规则将应用到此li元素中.
除了display:inline;规则,其它两项是将边界与填充值设为0,这种做法您应该很熟悉了吧.
定义链接样式
我们将再次使用继承选择器定义li元素中的链接样式.
点击观看定义链接样式视频
1.将光标定位于”#nav ul li”选择器规则之下.
2.使用”#nav ul li a”作为选择器名.
3.输入:#nav ul li a{
4.输入:font-size:80%;
5.输入:color:#FFFFFF;
6.输入:background-color:#3333CC;
7.输入:text-decoration:none;
8:输入:padding:0 25px 0 25px;
9.输入:border-right:1px solid #000000;
10.输入:text-align:center;
11:输入:width:9em;
12.输入:}
第4步的字体大小以body中字体大小为基准.我发现80%作为字体大小十分合适,所以稍后我们会加到p元素规则中.第7步去掉超链接的下划线,第8步加上左右填充,使链接更像一个按钮并增大点击区域.第9步为右边加上边框,以此分隔各个项目.
IE5.x浏览器在将填充应用于超链接时有问题.为了解决,我将文本居中,并加上了宽度,使其在IE5.x中显示更像按钮.如果IE5.x应用了填充,那么宽度将不起作用了.
完成后代码如下:
#nav ul li a{
font-size: 80%;
color: #FFFFFF;
background-color: #3333CC;
text-decoration: none;
padding: 0 25px 0 25px;
border-right: 1px solid #000000;
text-align: center;
width: 9em;
}
快完成了.最后我们定义超链接当鼠标移上去时改变背景色:
#nav ul li a:hover, #nav ul li a:focus{
background-color: #990000;
}
记得早先我提到过使用逗号来分隔组选择器.这里我们设定当鼠标移上或是用Tab键定焦到该元素上背景变色.
提示:IE并不支持focus选择器.您得在Firefox或其它提供标准CSS支持的浏览器中预览才能见此效果.
将导航div加入到XHTML代码中.这里我添加了三个列表选项:Home,About Us,Search:
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li
><li><a href="#">About Us</a></li
><li><a href="#">Search</a></li
></ul>
</div>
</div>
</body>
列表在不同浏览器中显示可能不尽相同.所以有必要将它们写得古怪以避免出现难看的空白.记得之前我们添加了防止wrapper div被压扁的一行空白,现在也可以去掉了:
<div id="nav">
<ul>
<li><a href="#">Home</a></li
><li><a href="#">About Us</a></li
><li><a href="#">Search</a></li
></ul>
</div>
注意我是将li元素的”>”符号写在了下一行!这能避免出现错误的空白!添加了上述代码后,预一下效果:(见图13).
图13:导航条完成图
在图13中您可以看到ul元素的绿色背景占满了其容器——wrapper——没有定义背景色的宽度.该应用是默认应用,在设计时您应考虑到.
下一节我们将定义content(内容)div.
定义Content(内容) Div
通常我们将装载页面内容的容器命名为content.我们对content本身不加规则限定:
1.打开basiclayout.css.
2.输入:#content p{
3.输入:font-size:80%;
4.输入:margin:20px;
5:输入:}
代码完成如下:
#content p{
font-size: 80%;
margin: 20px;
}
现在切换到basiclayout.html的代码视图,在nav div结束标签后加入下面的代码:
<div id=”content”></div>
Dreamweaver的代码提示可以帮助您完成输入.在代码视图下手工输入是必要的,因为我们对div的位置要求十分严格.
接下来在文档中加入两个p元素.p元素中文本内容随意.完成后代码应如下所示.请尽量输入多行文本:
<div id="content">
<p>Some filler text in here</p>
<p>Some filler text in here</p>
</div>
现在预览效果应如图14所示:
图14:p元素加上了margin(边界)属性.
我们再为每一段文本加上标题(h).创建两个标题规则:h1,应用于第一段,h2应用于第二段.
您可以回顾一下第一部分的相关内容来创建h选择器.我建议h1的字体大小设为130%,h2的设为110%.填充都设为0,边界四边都设为20像素.
完成后代码应如下所示:
#content h1{
font-size: 130%;
color: #003366;
padding: 0;
margin: 20px;
}
#content h2{
font-size: 110%;
color: #003366;
padding: 0;
margin: 20px;
}
将h1插到第一段上面,h2插到第二段上面.完成后预览应如图15所示:
图15:加入标题后预览效果
插入浮动图片
我们将插入两张图片来完成content(内容)区域的整体效果.在第二部分中我们讨论过如何在元素容器中创建浮动图片.这回换作p元素作容器了.请合适地选择两段中的文本,总长度适中,我们不想让图片被文本团团围住,所以文本也别太长了.
请使用下载的示例文件中的image1.png,image2.png两张图片,然后创建两个float class(浮动类).一个用于浮动到右边,一个用于浮动到左边.有什么不明白的地方请查阅第二部分相关内容.
完成后的代码应如下所示:
.leftimage{
float: left;
margin-right: 10px;
border: 1px solid #000000;
}
.rightimage{
float: right;
margin-left: 15px;
border: 1px solid #000000;
width: 150px;
}
在Firefox(见图16)中预览.IE里预览有些问题,所以请记住在Firefox中预览.
图16:浮动图片问题
当使用浮动元素时,如我在第二部分讨论过说的,原来的文本流便被清除了.因为两张图片都是浮动的,所以它们周围的文本就不知该如何放置了.所以h2元素移到Image1图片边上,而Image2图片底部则超过了content div边界.
可能您认为这样也没什么不好,但在这里,假设我们想让文本独立成段,两部分上下区分开来.我们不想让第二部分跑到第一部分图片的左边,而且我们也不想让第二张图片超出下边界.现在来看看该如何修正此问题.
下一节我们主要讨论通过clear(清除)元素来解决上述问题.
(Clearing)清除元素
下面的属性/值作用是在页面中将元素置于在代码流中所有它上面的元素的下面:
clear: both;
请先按下面步骤在每一个<p>结束标签后插入一水平规则:
1.打开basiclayout.html,切换到代码视图.
2.找到</p>标签.
3.在</p>标签之后插入<div></div>
4.再次预览.
现在新添的将应用水平规则div还无法满足我们的要求,我们得为它写一个水平规则.
在编写规则之前,我们先来看看clear属性的可选值:
* None 默认值
* Left 清除左边的元素
* Right 清除右边的元素.
* Both 清除两边的元素.
在这里我们首先得清除Image1,也就是说我们需要将h2移到Image1下面.因为Image1在添加的水平规则div的左边,所以使用”clear:left;”将使该div移至Image1之下.
那么第二段呢?显然我们应该使用clear:right;.为了简便起见,我们使用both.
请按以下步骤添加水平规则:
1.打开basiclayout.css.
2.按SHIFT+F11,打开CSS样式面板.
3.点击面板右下角的”新建CSS样式”按钮.
4.在”类型”选项中选择”类”.
5.给类命名为”clearit”.
6.点击确定,打开CSS样式定义对话框.
7.在”类别”单元中选择”方框”类别.
8.在”清除”选择中选择”两者”.
9.再选择”区块”类别,
10.在”显示”选项中选择”块”.
11.点击确定.
新的规则代码应如下所示:
.clearit{
clear: both;
display: block;
}
现在您可以将”clearit”规则应用于增加的两个div中了.方法我想您已经会了,就是在div标签后面空格,然后再键入:class=”clearit”
IE6有一些关于浮动元素的BUG,这超出了本文讨论范围.还好不至于影响到页面效果,只要不要求精确到像素点.
提示:John Gallant与Holly Bergevin为Community MX写的系列文章专注于讨论浮动元素的BUG与解决. Float: The Theory[/url[, [url=http://www.communitymx.com/abstract.cfm?cid=47F29]Float: The Bugs (Part 1). 以及 Float: The Bugs (Part 2).如果您想进一步了解,可以获取10日免费阅读资格.
回到本节话题.再次预览,效果如图17:
图17:完成后的内容样式.
下一节我们将结束整个设计,在content div下面加上页脚.
编写页脚选择器
页脚选择器我们设为ID选择器,记得以”#”号开头.
记得之前我们曾为nav div加过底边边框.而这一次我们添加的是顶部边框.我们选择黑色,并且再增添两个属性:背景色为#003366,字体颜色为白色.
footer选择器代码应如下所示:
#footer{
border-top: 1px solid #000000;
background-color: #003366;
color: #FFFFFF;
}
接下来是在basiclayout.html页面中加上footer div.将它加在wrapper div结束标签</div>之上,如下所示:
</div>
<div id="footer"></div>
</div>
</body>
</html>
为Footer Div添加文本
最后一步了,我们显然得为页脚加点儿文字.我们得定义文字大小,更重要的是去掉默认的边界与填充,这之前我们就讨论过了.
因为footer中的文字是写在p元素之中,我们可以使用继承选择器.我们将边界设为0,填充设为10像素,文字大小设为70%.
打开basiclayout.css,设定以下样式:
* #footer p{ 继承选择器,用于footer中的p元素.
* font-size:70% 字体大小为70%.
* margin:0; 边界为0.
* padding:10px; 加上10像素的填充.
现在在footer中加上文字:
<div id="footer"><p>My company info</p></div>
最后的预览效果如图18:
图18:完成整个设计,没有table
结论
您已经完成了您第一个没有table的设计.尽管这个布局有些简单,但是我们也学到了一种新的设计方法.使用CSS布局不会比使用table复杂.只是有些时间其设计过程完全不同于table罢了.
一旦您熟悉了使用CSS进行布局,您就会发现它比table要好使得多,因为我们能对布局进行更灵活地控制.
在第四部分我们将继续学习如何设计划分单元.希望您能从中获益.
(第三部分完)
下面定义ul元素(列表元素)中的li元素(列表项目元素)规则.使用CSS创建水平导航条十分方便.默认认的列表项目是从上至下排列的.但我们可以通过设定display属性为inline来变为水平.
好了,用前面的方法编写下面的代码吧:
#nav ul li{
display: inline;
padding: 0;
margin: 0;
}
请回想一下继承元素的用法,这有助于页面风格的一致性.如果#nav div中含有ul元素,而ul元素中含有li元素,那么该规则将应用到此li元素中.
除了display:inline;规则,其它两项是将边界与填充值设为0,这种做法您应该很熟悉了吧.
定义链接样式
我们将再次使用继承选择器定义li元素中的链接样式.
点击观看定义链接样式视频
1.将光标定位于”#nav ul li”选择器规则之下.
2.使用”#nav ul li a”作为选择器名.
3.输入:#nav ul li a{
4.输入:font-size:80%;
5.输入:color:#FFFFFF;
6.输入:background-color:#3333CC;
7.输入:text-decoration:none;
8:输入:padding:0 25px 0 25px;
9.输入:border-right:1px solid #000000;
10.输入:text-align:center;
11:输入:width:9em;
12.输入:}
第4步的字体大小以body中字体大小为基准.我发现80%作为字体大小十分合适,所以稍后我们会加到p元素规则中.第7步去掉超链接的下划线,第8步加上左右填充,使链接更像一个按钮并增大点击区域.第9步为右边加上边框,以此分隔各个项目.
IE5.x浏览器在将填充应用于超链接时有问题.为了解决,我将文本居中,并加上了宽度,使其在IE5.x中显示更像按钮.如果IE5.x应用了填充,那么宽度将不起作用了.
完成后代码如下:
#nav ul li a{
font-size: 80%;
color: #FFFFFF;
background-color: #3333CC;
text-decoration: none;
padding: 0 25px 0 25px;
border-right: 1px solid #000000;
text-align: center;
width: 9em;
}
快完成了.最后我们定义超链接当鼠标移上去时改变背景色:
#nav ul li a:hover, #nav ul li a:focus{
background-color: #990000;
}
记得早先我提到过使用逗号来分隔组选择器.这里我们设定当鼠标移上或是用Tab键定焦到该元素上背景变色.
提示:IE并不支持focus选择器.您得在Firefox或其它提供标准CSS支持的浏览器中预览才能见此效果.
将导航div加入到XHTML代码中.这里我添加了三个列表选项:Home,About Us,Search:
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li
><li><a href="#">About Us</a></li
><li><a href="#">Search</a></li
></ul>
</div>
</div>
</body>
列表在不同浏览器中显示可能不尽相同.所以有必要将它们写得古怪以避免出现难看的空白.记得之前我们添加了防止wrapper div被压扁的一行空白,现在也可以去掉了:
<div id="nav">
<ul>
<li><a href="#">Home</a></li
><li><a href="#">About Us</a></li
><li><a href="#">Search</a></li
></ul>
</div>
注意我是将li元素的”>”符号写在了下一行!这能避免出现错误的空白!添加了上述代码后,预一下效果:(见图13).
图13:导航条完成图
在图13中您可以看到ul元素的绿色背景占满了其容器——wrapper——没有定义背景色的宽度.该应用是默认应用,在设计时您应考虑到.
下一节我们将定义content(内容)div.
定义Content(内容) Div
通常我们将装载页面内容的容器命名为content.我们对content本身不加规则限定:
1.打开basiclayout.css.
2.输入:#content p{
3.输入:font-size:80%;
4.输入:margin:20px;
5:输入:}
代码完成如下:
#content p{
font-size: 80%;
margin: 20px;
}
现在切换到basiclayout.html的代码视图,在nav div结束标签后加入下面的代码:
<div id=”content”></div>
Dreamweaver的代码提示可以帮助您完成输入.在代码视图下手工输入是必要的,因为我们对div的位置要求十分严格.
接下来在文档中加入两个p元素.p元素中文本内容随意.完成后代码应如下所示.请尽量输入多行文本:
<div id="content">
<p>Some filler text in here</p>
<p>Some filler text in here</p>
</div>
现在预览效果应如图14所示:
图14:p元素加上了margin(边界)属性.
我们再为每一段文本加上标题(h).创建两个标题规则:h1,应用于第一段,h2应用于第二段.
您可以回顾一下第一部分的相关内容来创建h选择器.我建议h1的字体大小设为130%,h2的设为110%.填充都设为0,边界四边都设为20像素.
完成后代码应如下所示:
#content h1{
font-size: 130%;
color: #003366;
padding: 0;
margin: 20px;
}
#content h2{
font-size: 110%;
color: #003366;
padding: 0;
margin: 20px;
}
将h1插到第一段上面,h2插到第二段上面.完成后预览应如图15所示:
图15:加入标题后预览效果
插入浮动图片
我们将插入两张图片来完成content(内容)区域的整体效果.在第二部分中我们讨论过如何在元素容器中创建浮动图片.这回换作p元素作容器了.请合适地选择两段中的文本,总长度适中,我们不想让图片被文本团团围住,所以文本也别太长了.
请使用下载的示例文件中的image1.png,image2.png两张图片,然后创建两个float class(浮动类).一个用于浮动到右边,一个用于浮动到左边.有什么不明白的地方请查阅第二部分相关内容.
完成后的代码应如下所示:
.leftimage{
float: left;
margin-right: 10px;
border: 1px solid #000000;
}
.rightimage{
float: right;
margin-left: 15px;
border: 1px solid #000000;
width: 150px;
}
在Firefox(见图16)中预览.IE里预览有些问题,所以请记住在Firefox中预览.
图16:浮动图片问题
当使用浮动元素时,如我在第二部分讨论过说的,原来的文本流便被清除了.因为两张图片都是浮动的,所以它们周围的文本就不知该如何放置了.所以h2元素移到Image1图片边上,而Image2图片底部则超过了content div边界.
可能您认为这样也没什么不好,但在这里,假设我们想让文本独立成段,两部分上下区分开来.我们不想让第二部分跑到第一部分图片的左边,而且我们也不想让第二张图片超出下边界.现在来看看该如何修正此问题.
下一节我们主要讨论通过clear(清除)元素来解决上述问题.
(Clearing)清除元素
下面的属性/值作用是在页面中将元素置于在代码流中所有它上面的元素的下面:
clear: both;
请先按下面步骤在每一个<p>结束标签后插入一水平规则:
1.打开basiclayout.html,切换到代码视图.
2.找到</p>标签.
3.在</p>标签之后插入<div></div>
4.再次预览.
现在新添的将应用水平规则div还无法满足我们的要求,我们得为它写一个水平规则.
在编写规则之前,我们先来看看clear属性的可选值:
* None 默认值
* Left 清除左边的元素
* Right 清除右边的元素.
* Both 清除两边的元素.
在这里我们首先得清除Image1,也就是说我们需要将h2移到Image1下面.因为Image1在添加的水平规则div的左边,所以使用”clear:left;”将使该div移至Image1之下.
那么第二段呢?显然我们应该使用clear:right;.为了简便起见,我们使用both.
请按以下步骤添加水平规则:
1.打开basiclayout.css.
2.按SHIFT+F11,打开CSS样式面板.
3.点击面板右下角的”新建CSS样式”按钮.
4.在”类型”选项中选择”类”.
5.给类命名为”clearit”.
6.点击确定,打开CSS样式定义对话框.
7.在”类别”单元中选择”方框”类别.
8.在”清除”选择中选择”两者”.
9.再选择”区块”类别,
10.在”显示”选项中选择”块”.
11.点击确定.
新的规则代码应如下所示:
.clearit{
clear: both;
display: block;
}
现在您可以将”clearit”规则应用于增加的两个div中了.方法我想您已经会了,就是在div标签后面空格,然后再键入:class=”clearit”
IE6有一些关于浮动元素的BUG,这超出了本文讨论范围.还好不至于影响到页面效果,只要不要求精确到像素点.
提示:John Gallant与Holly Bergevin为Community MX写的系列文章专注于讨论浮动元素的BUG与解决. Float: The Theory[/url[, [url=http://www.communitymx.com/abstract.cfm?cid=47F29]Float: The Bugs (Part 1). 以及 Float: The Bugs (Part 2).如果您想进一步了解,可以获取10日免费阅读资格.
回到本节话题.再次预览,效果如图17:
图17:完成后的内容样式.
下一节我们将结束整个设计,在content div下面加上页脚.
编写页脚选择器
页脚选择器我们设为ID选择器,记得以”#”号开头.
记得之前我们曾为nav div加过底边边框.而这一次我们添加的是顶部边框.我们选择黑色,并且再增添两个属性:背景色为#003366,字体颜色为白色.
footer选择器代码应如下所示:
#footer{
border-top: 1px solid #000000;
background-color: #003366;
color: #FFFFFF;
}
接下来是在basiclayout.html页面中加上footer div.将它加在wrapper div结束标签</div>之上,如下所示:
</div>
<div id="footer"></div>
</div>
</body>
</html>
为Footer Div添加文本
最后一步了,我们显然得为页脚加点儿文字.我们得定义文字大小,更重要的是去掉默认的边界与填充,这之前我们就讨论过了.
因为footer中的文字是写在p元素之中,我们可以使用继承选择器.我们将边界设为0,填充设为10像素,文字大小设为70%.
打开basiclayout.css,设定以下样式:
* #footer p{ 继承选择器,用于footer中的p元素.
* font-size:70% 字体大小为70%.
* margin:0; 边界为0.
* padding:10px; 加上10像素的填充.
现在在footer中加上文字:
<div id="footer"><p>My company info</p></div>
最后的预览效果如图18:
图18:完成整个设计,没有table
结论
您已经完成了您第一个没有table的设计.尽管这个布局有些简单,但是我们也学到了一种新的设计方法.使用CSS布局不会比使用table复杂.只是有些时间其设计过程完全不同于table罢了.
一旦您熟悉了使用CSS进行布局,您就会发现它比table要好使得多,因为我们能对布局进行更灵活地控制.
在第四部分我们将继续学习如何设计划分单元.希望您能从中获益.
(第三部分完)
浙公网安备 33010602011771号