CSS学习（十）——列表与导航

来源：互联网发布：wince6.0导航软件编辑：程序博客网时间：2024/06/06 01:33

<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代表与区块左端的距离。

0 0