求教html li 二级菜单如何写?

求教html li 二级菜单如何写?,第1张

假如想给home建一个二级菜单

  <ul><!-- main navigation -->

    <li class="active"><a href="index.html"><span>Home</span></a>

    <ul>

    <li>aaaaaaa</li>

    <li>bbbbbbbb</li><!--在上一个/li前面再加一个ul标签就行-->

    </ul>

    

    

    </li>

    <li><a href="page-template.html"><span>About Us</span></a></li>

    <li><a href="portfolio-listing.html"><span>Portfolio</span></a> </li>

                        这个下面添加二级菜单。

    <li><a href="blog-listing.html"><span>Blog</span></a></li>

    <li><a href="contact.html"><span>Contact Us</span></a></li>

   </ul>

我们一般用的li是与ul或者是ol一直连用的。<ul>是无序列表,<ol>是有序列表。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

显示如图,每个列表项前面是个小圆圈。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

显示如下图,每个列表项前面是数字。

我们用的无序列表比较多,也就是ul li。我们拿ul li做比例,我们会给ul设置一个class,把他们的默认的margin和padding,还有前面的小圆点去掉。

<ul class="aa">

<li>Coffee</li>

<li>Milk</li>

</ul>

.aa {

margin: 0//去掉默认margin

padding: 0 //去掉默认padding

list-style: none  //去掉前面的小圆圈

}

.aa li {

padding-left: 20px//给小图标留出前面的位置

background: url(...) no-repeat left center//如果想给每个列表项前面换个小图标,可以这样把小图标以图片的形式引入

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7198605.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存