您的位置：首页 > Web前端 > CSS

CSS 创建水平菜单

2017-05-25 17:07 225 查看
使用具有一栏超链接的浮动来创建水平菜单。

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:5em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li>
<li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li>
<li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li>
<li><a href="http://www.sina.com.cn/" target="_blank">新浪</a></li>
</ul>

<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 5em（当前字体尺寸的 5 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航