css技巧：如何使用CSS讓菜單橫向
來(lái)源：程序員人生 發(fā)布時(shí)間：2014-05-30 07:10:30 閱讀次數(shù)：3652次
在上面一節(jié)我們講到的是垂直的導(dǎo)航.但是大多網(wǎng)站用的還是橫向的導(dǎo)航,那么就來(lái)跟我學(xué)下橫向?qū)Ш绞侨绾螌?shí)現(xiàn)的.要怎么實(shí)現(xiàn)下面的效果.只要在列表項(xiàng)之間避免換行就行了,所以要把<li>轉(zhuǎn)換為內(nèi)聯(lián).
HTML和CSS代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation - liehuo.net</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_horiz.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
body {
padding: 1em;
}
#navigation {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
分析：
創(chuàng)建一個(gè)div容器,然后在里面添加一個(gè)列表：
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
在#navigation 容器里添加一些基本的信息,如字體的大小.在CSS布局中這個(gè)容器還可能會(huì)添加一些額外的信息,如:確定這個(gè)導(dǎo)航在頁(yè)面上的位置.
#navigation {
font-size: 90%;
}
接下來(lái)在<ul>對(duì)象,我們把默認(rèn)的圓點(diǎn)清除和清除默認(rèn)的縮進(jìn)。
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
現(xiàn)在是橫向?qū)Ш阶钪匾囊徊糠?因?yàn)闆](méi)有了這一步那就不叫橫向了,^_^.設(shè)置<li>為內(nèi)聯(lián)元素,這樣就避免了換行.
#navigation li {
display: inline;
}
最后再給導(dǎo)航增加些效果:
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
PS:如果你想讓文本與邊框的距離大一點(diǎn),那么你就要設(shè)置left padding和right padding.如果你想讓項(xiàng)與項(xiàng)之間的距離變大,那么你也要設(shè)置left margin 和right margin.
轉(zhuǎn)自：www.ximumu.cn
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
