CSS学习(十)——列表与导航

本文介绍如何使用HTML和CSS创建垂直和水平导航栏。通过调整CSS属性如height、line-height和float,可以轻松实现导航栏布局。文章还介绍了如何通过设置border、background等样式美化导航栏。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<ul></ul>和<li></li>标记是区块。


垂直导航栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	body{margin:50px;}
	ul{list-style-type:none;padding:0;width:160px;font-size:20px;}
	li{height:40px;line-height:40px;text-align:center;background:#ddd;margin:0;padding:2px 10px;border-left:1px solid #fff;border-top:1px solid #fff;boder-right:1px solid #666;border-bottom:1px solid #aaa;}
</style>
<title>列表与导航</title>
</head>
<body>
	<ul>
		<li>么么哒</li>
		<li>嗯嗯啊</li>
		<li>哇咔咔</li>
		<li>啦啦啦</li>
	</ul>
</body>
</html>
注意,height属性是指区块的行高,line-height属性是指文字的行高,当两者一致,并将text-align属性设置为center时,就达到了将文字居于每个区块行中间的目的。同样的设置对<ul></ul>标记也有效。

水平导航栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	body{margin:50px;}
	#setting1{list-style-type:none;padding:0;width:160px;font-size:20px;}
	#setting2{height:40px;line-height:40px;text-align:center;background:#ddd;margin:0;padding:2px 10px;border-left:1px solid #fff;border-top:1px solid #fff;boder-right:1px solid #666;border-bottom:1px solid #aaa;}
	#setting3{list-style-type:none;padding:0;width:800px;font-size:20px;line-height:30px;background:#ddd}
        #setting4{float:left;background:#ddd;border-left:1px solid #fff;border-top:1px solid #fff;boder-right:1px solid #666;border-bottom:1px solid #aaa;padding:5px 20px;}
</style>
<title>列表与导航</title>
</head>
<body>
	<ul ID="setting1">
		<li ID="setting2">么么哒</li>
		<li ID="setting2">嗯嗯啊</li>
		<li ID="setting2">哇咔咔</li>
		<li ID="setting2">啦啦啦</li>
	</ul>
	<br/><br/><br/><br/><br/><br/><br/>
	<ul ID="setting3">
		<li ID="setting4">么么哒</li>
		<li ID="setting4">嗯嗯啊</li>
		<li ID="setting4">哇咔咔</li>
		<li ID="setting4">啦啦啦</li>
	</ul>
</body>
</html>

如果要让列表条目在同一行,可以在<li></li>标记中用属性float:left来定位条目。另外padding属性用于控制条目中文字的间隔,第一个设置值0代表与区块顶端的距离,第二个设置值30px代表与区块左端的距离。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值