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>

  • 相关阅读:
    Web上传大文件的解决方案
    JS上传大文件的解决方案
    网页上传大文件的解决方案
    B/S上传大文件的解决方案
    Unity UGUI——提供可视功能的UI组件(Text)
    Java设计模式透析之 —— 策略(Strategy)
    【边做项目边学Android】小白会遇到的问题--Appcompat_V7问题
    高度平衡树 -- AVL 树
    成长这事儿,不可不说-------Day36
    Cocos2D-X2.2.3学习笔记5(UI系统)
  • 原文地址:https://www.cnblogs.com/l8l8/p/8538639.html
Copyright © 2011-2022 走看看