2. IT
    3. html水平导航栏设置

    html水平导航栏设置

    xiaoxiao2021-03-26  88
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="111.css"/> </head> <body> <ul class="navigation"> <li><a>Let's Go</a></li> <li><a id="home" >主页</a></li> <li><a id="product_list">商品列表</a></li> <li> <a class="cart" >购物车</a> </li> </ul> </body> </html>

     

    建立无序列表，出来的是垂直着的。我们现在需要的是水平导航栏。

    在css里进行样式设置

    li { display:inline; } a:link,a:visited { text-decoration:none; Vertical-align:top; }

     这样出来的就是水平的了。

    下拉的导航栏

    <ul id="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a> <ul> <li><a href="/products/shoes">Shoes</a></li> <li><a href="/products/jackets">Jackets</a></li> </ul> </li> </ul>

     

    #nav li li a { padding: 2px; }

     

    products下面有shoes和jackets两个选项。 

    转载请注明原文地址: https://ju.6miu.com/read-499994.html

    技术

    最新回复(0)