提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css怎样设置横向导航【css教程】,css

导航栏

闇练运用导航栏,关于任何网站都异常重要。

运用CSS你能够转换成悦目的导航栏而不是死板的HTML菜单。

导航栏=链接列表

作为规范的HTML基本一个导航栏是必需的。

导航条基本上是一个链接列表,所以运用 <ul> 和 <li>元素异常有意义:

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">消息</a></li>
  <li><a href="#contact">联络</a></li>
  <li><a href="#about">关于</a></li>
</ul>

有两种要领竖立横向导航栏。运用内联(inline)或浮动(float)的列表项。

这两种要领都很好,但假如你想链接到具有雷同的大小,你必需运用浮动的要领。

内联列表项

竖立一个横向导航栏的要领之一是指定元素,

实例

li{
    display:inline;
}

display:inline; -默许情况下,<li>元素是块元素。在这里,我们删除换行符之前和以后每一个列表项,以显现一行。

浮动列表项

在上面的例子中链接有差别的宽度。

关于一切的链接宽度相称,浮动 <li>元素,并指定为 <a>元素的宽度:

实例

li{
    float:left;
}
a{
    display:block;
    width:60px;
}

float:left - 运用浮动块元素的幻灯片相互相邻

display:block - 显现块元素的链接,让团体变成可点击链接地区(不只是文本),它许可我们指定宽度

width:60px - 块元素默许情况下是最大宽度。我们要指定一个60像素的宽度

以上就是css怎样设置横向导航的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css怎样设置横向导航【css教程】,css"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线