CSS 导航条
导航栏
拥有易用的导航条对于任何网站都很重要。
通过 CSS,您能够把乏味的 HTML 菜单转换为漂亮的导航栏。
导航栏:
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
去掉<li>标签的圆点:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
垂直导航栏:
如需构建垂直导航栏,我们只需要定义 <a> 元素的样式,除了上面的代码之外:
a
{
display:block;
width:60px;
}
水平导航栏
有两种创建水平导航栏的方法。使用行内或浮动列表项。
两种方法都不错,但是如果您希望链接拥有相同的尺寸,就必须使用浮动方法。
行内列表项
除了上面的“标准”代码,构建水平导航栏的方法之一是将 <li> 元素规定为行内元素:
实例:
li { display:inline; }
对列表项进行浮动
在上面的例子中,链接的宽度是不同的。
为了让所有链接拥有相等的宽度,浮动 <li> 元素并规定 <a> 元素的宽度:
li { float:left; } a { display:block; width:60px; }
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:52.15.125.97,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/css-navigation-bar.html
文章链接:https://www.ooize.com/css-navigation-bar.html
订阅
登录
0 评论