第1步 - 从一段文字和一个列表开始
在本练习中,我们希望向左浮动一个“后退”按钮,在右侧浮动一个“下一步”按钮。我们可以使用两个div,但为了简单起见,我们将使用两个列表项。
我们将从一段文本和一个简单列表开始。UL使用ID选择器(id =“navigation”)设置样式,并且两个LI使用类选择器(class =“left”和class =“right”)设置样式。在本教程中,使用了明显的名称来帮助说明这一点,但可以使用任何名称。但是,最好根据它们的含义来命名类和id,而不是它们的外观。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第2步 - 删除子弹
要删除HTML列表项目符号,请将“list-style-type”设置为“none”。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;/*new codes*/
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第3步 - 删除填充和边距
标准HTML列表具有一定量的左缩进。每个浏览器的金额各不相同。有些浏览器使用填充(Mozilla,Netscape,Safari),其他浏览器使用边距(Internet Explorer,Opera)来设置缩进量。
要在所有浏览器中一致地删除此左缩进,请将“UL”的填充和边距都设置为“0”。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;/*new codes*/
padding:0;/*new codes*/
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第4步 - 浮动列表项
现在添加了两个规则以使列表项移动到页面的边缘。在“后退”按钮上使用“float:left”,在“下一步”按钮上使用“float:right”。浮动元素时也需要宽度 - 除非它是图像。
对于此示例,使用宽度为5em。float:right list项目看起来好像没有浮动到包含框的右边缘。这是因为它在5em宽的盒子内对齐。我们很快就会解决这个问题。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul .left {/*new codes*/
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第5步 - 在列表上方添加一行
要在浮动列表上方添加一行,请使用简写规则“border-top:1px solid#666;”。Netscape 4不喜欢这个规则,所以它应该使用“ @import ” 隐藏在浏览器中。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:0;
border-top:1px solid #666;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第6步 - 在线下添加填充
该行非常靠近两个列表项的顶部。这可以通过调整UL填充来修复。在这种情况下,我们将使用规则“padding:.5em 0;”将.5em添加到UL的顶部和底部,而不是侧面。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;/*new codes*/
border-top:1px solid #666;
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第7步 - 显示块
要为列表项提供翻转效果,需要使用应用于“a”元素的“display:block”将其转换为块。
当超链接转换为块级别时,Mac / Opera6会将下划线放在超链接的单词上方而不是在它们下面,Win / Opera将根本不显示下划线。这些渲染问题将在以下步骤中处理。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {/*new codes*/
display: block;
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第8步 - 移动宽度
除非将宽度添加到“a”元素,否则Win / IE5和Win / IE6将不会将整个块识别为活动链接。因此,我们从两个浮动规则中删除宽度并将其应用于“a”元素。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第9步 - 添加背景颜色
要添加背景颜色,请将其设置为“a”状态。还添加了颜色以使文本可读。在这个阶段没有翻滚状态。这将很快添加。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;
color:#fff;/*new codes*/
background-color:#036;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第10步 - 添加填充
将填充添加到“a”状态中的列表项。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;
color:#fff;
background-color:#036;
padding:.2em 0;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第11步 - 文本修饰和对齐
此时,您可能希望删除文本下划线。通常的做法是导航不要有下划线,因为它们的位置和其他反馈机制使它们更明显地成为链接。但是,您应该知道修改标准超链接行为(例如下划线)可能会让某些用户感到困惑,他们可能没有意识到该项是链接。
我们还将使用“text-align:center”将文本置于框中。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;
color:#fff;
background-color:#036;
padding:.2em 0;
text-align:center;/*new codes*/
text-decoration:none;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下:
第12步 - 添加悬停状态
使用“a:hover”将第二种背景颜色设置为翻转状态。如果您现在滚动列表,您将看到翻转工作。
代码如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;
color:#fff;
background-color:#036;
padding:.2em 0;
text-align:center;
text-decoration:none;
}
ul li a:hover {/*new codes*/
color:#fff;
background-color:#69c;
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果图如下: