溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
現在我們用一個ul li標簽來做一個菜單
首先來看看ul li 的基本樣式
代碼如下
<html> <head> <title>ul li</title> </head> <body> <ul> <li>首頁</li> <li>個人主頁</li> <li>消息中心</li> <li>充值中心</li> <li>會員中心</li> </ul> </body> </html>
效果如下
我們看到，代碼中的文字按循序排列了。前面還有個點，這就是ul li的默認樣式
現在我們主要有兩個動作。
1、去除前面的點
2、讓它橫向排列
好，我們先來做第一步，去除點
<html>
<head>
<title>ul li</title>
</head>
<style>
ul li{
list-style:none;
}
</style>
<body>
<ul>
<li>首頁</li>
<li>個人主頁</li>
<li>消息中心</li>
<li>充值中心</li>
<li>會員中心</li>
</ul>
</body>
</html>代碼中，我加入了樣式，寫法和之前的不一樣，這是另外一種寫法，直接寫標簽名，上面ul li的意思是：代碼中的ul里面的所有li，空格代表里面的所有，包含子級標簽和更深層次的標簽，例如孫級標簽。如果只要子級，而不需要更加深入，就用ul>li。>符號代表子級。
里面的樣式
list-style:none;
意思就是讓這個集合沒有任何修飾，那么它前面的點就會消失
效果如下
第一步已經完成了，現在進行第二步，讓它橫向
在樣式代碼中加入
float:left;
意思就是讓標簽向左邊浮動
全部代碼如下
<html>
<head>
<title>ul li</title>
</head>
<style>
ul li{
list-style:none;
float:left;
}
</style>
<body>
<ul>
<li>首頁</li>
<li>個人主頁</li>
<li>消息中心</li>
<li>充值中心</li>
<li>會員中心</li>
</ul>
</body>
</html>效果如下
這個時候，我們已經完成大部分工作了。
下面讓它美化點，加點邊距，在樣式代碼中加入
margin-right:20px;
意思就是，讓li標簽的右邊邊距為20px
效果如下
效果還不錯
現在我們讓它居中,我們用一個div包住原來的ul，再給div加上兩句樣式，樣式代碼如下
#menu{
width:1200px;
margin:0 auto;
}意思是，設置寬度未1200px，邊距上下為0，左右自動。
<html>
<head>
<title>ul li</title>
</head>
<style>
ul li{
list-style:none;
float:left;
margin-right:20px;
}
#menu{
width:1200px;
margin:0 auto;
}
</style>
<body>
<div id="menu">
<ul>
<li>首頁</li>
<li>個人主頁</li>
<li>消息中心</li>
<li>充值中心</li>
<li>會員中心</li>
</ul>
</div>
</body>
</html>效果如下
看起來好像不明顯，我們加條分隔線hr
代碼如下
<html>
<head>
<title>ul li</title>
</head>
<style>
ul li{
list-style:none;
float:left;
margin-right:20px;
}
#menu{
width:1200px;
margin:0 auto;
}
</style>
<body>
<div id="menu">
<ul>
<li>首頁</li>
<li>個人主頁</li>
<li>消息中心</li>
<li>充值中心</li>
<li>會員中心</li>
</ul>
<br/>
<hr/>
</div>
</body>
</html>效果如下
<br/>代表換行，相當于回車鍵
<hr/>代表分割線。
一個簡單的菜單效果就這樣出來了
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
