【笔记】浮动属性float的应用06——浮动内联列表项

第1步 - 从简单的无序列表开始

在本练习中,我们想要一个简单的无序列表并将其转换为水平导航栏。

我们将从一个简单的无序列表开始。UL使用ID选择器(id =“navlist”)进行样式设置。在本教程中,使用了一个明显的名称来帮助说明这一点,但可以使用任何名称。但是,最好根据类别的含义来命名类,而不是它们的外观。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		
	</style>
</head>
<body>
	<ul id=navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

第2步 - 删除子弹

要删除HTML列表项目符号,请将“list-style-type”设置为“none”。为了定位特定的UL,我们使用“ul#navlist”,否则页面上的所有UL都会受到影响。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			list-style-type:none;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

第3步 - 删除填充和边距

标准HTML列表具有一定量的左缩进。每个浏览器的金额各不相同。有些浏览器使用填充(Mozilla,Netscape,Safari),其他浏览器使用边距(Internet Explorer,Opera)来设置缩进量。

要在所有浏览器中一致地删除此左缩进,请将“UL”的填充和边距都设置为“0”。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;/*new codes*/
			margin:0;/*new codes*/
			list-style-type:none;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

第4步 - 显示内联

要强制列表成一行,请应用“display:inline;” 到“李”。要定位特定列表,我们使用“ul#navlist li”。这意味着我们希望在UL中定位LI元素,使用名为“navlist”的ID进行样式设置。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

第5步 - 浮动“a”状态

当列表项转换为内联时,它们的左边缘有一定量的填充,无法删除。要使列表项彼此相邻而没有任何间隙,必须将它们设置为“float:left”。在这个阶段,我们无法看到差距已经结束。

浮动元素时也需要宽度 - 除非它是图像。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;/*new codes*/
			width:5em;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

 

第6步 - 添加背景颜色

此时,可以应用背景颜色和文本颜色。有许多颜色组合可以使用。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;/*new codes*/
			background-color:#036;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

步骤7 - 将填充添加到“a”状态

要将每个列表项放入框中,我们需要将填充添加到“a”状态。在这种情况下,我们使用简写规则。顶部和底部的填充设置为0.2em,左侧和右侧的填充设置为1em。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

第8步 - 删除文本修饰

此时,您可能希望删除文本下划线。通常的做法是导航不要有下划线,因为它们的位置和其他反馈机制使它们更明显地成为链接。但是,您应该知道修改标准超链接行为(例如下划线)可能会让某些用户感到困惑,他们可能没有意识到该项是链接。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

步骤9 - 添加边框以分隔列表项

边框设置在列表项的右侧以将它们分开。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;
			border-right:1px solid #fff;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

第10步 - 添加翻转颜色

使用“a:hover”设置第二种背景颜色,作为翻转状态。如果您现在滚动列表,您将看到翻转工作。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;
			border-right:1px solid #fff;
		}
		ul#navlist li a:hover {/*new codes*/
			background-color:#369;
			color:#fff;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

步骤11 - 浮动UL

要将整个列表放入导航栏,我们需要为UL着色并将其拉伸到浏览器窗口的整个宽度。在我们这样做之前,我们需要将“float:left”应用于UL - 否则它将不会显示。因此,将float应用于UL并将宽度设置为“100%”。

浮动元素时也需要宽度 - 除非它是图像。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
			float:left;/*new codes*/
			width:100%;/*new codes*/
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;
			border-right:1px solid #fff;
		}
		ul#navlist li a:hover {
			background-color:#369;
			color:#fff;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

步骤12 - 向UL添加背景颜色

此时,可以将背景颜色和文本颜色应用于UL。有许多颜色组合可以使用。

代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
			float:left;
			width:100%;
			color:#fff;/*new codes*/
			background-color:#036;/*new codes*/
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;
			border-right:1px solid #fff;
		}
		ul#navlist li a:hover {
			background-color:#369;
			color:#fff;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值