zoukankan      html  css  js  c++  java
  • 多级导航 如何去写 下篇

    在解释过我们如何去写的原理以后,接下来就是如何去书写我们的代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <style>
    *{margin: 0 auto;padding: 0px;}
    a{text-decoration: none;background: gray;display: block;}
    ul li{float: left; list-style-type: none; 100px;height: 30px;line-height: 30px;text-align: center;}
    ul li ul{position: relative;}
    ul li ul {display: none;}
    ul li:hover ul{display: block;}  二级导航
    ul li ul li ul li{display: none;}  
    ul li ul li:hover ul li{display: block;}
    ul li ul li ul {position: absolute;left: 100px;margin-top:-30px;display: none;}三级导航内容

    导航制作内容
    ul li a {background: black;}
    ul li ul li a{background: red;}
    ul li ul li ul li a{background: white;}

    上色内容
    ul li a:hover{background: orange;}
    ul li ul li a:hover{background: skyblue;}
    ul li ul li ul li a:hover{background: pink;}

    伪类内容
    </style>
    <body>
    <ul style="margin: 50px;">
    <li>
    <a href="#">首页1</a>
    <ul>
    <li><a href="#">首页2</a>
    <ul>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    </ul>
    </li>
    <li><a href="#">首页2</a>
    <ul>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    </ul>
    <li><a href="#">首页2</a>
    <ul>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    </ul>
    <li><a href="#">首页2</a>
    <ul>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    <li><a href="#">首页3</a></li>
    </ul>
    </li>
    </ul>
    </body>
    </html>

  • 相关阅读:
    POJ测试数据合集
    POJ1724ROADS
    关闭进程的数据库
    config上传设置
    tfs 撤销挂起的更改
    cn_visual_studio_team_foundation_server_2010_x86_x64_dvd_531909
    js 中文转义
    文件下载乱码
    杀死数据库进程
    Python基础综合练习
  • 原文地址:https://www.cnblogs.com/l8l8/p/8538639.html
Copyright © 2011-2022 走看看