display的展示和隐藏

最新推荐文章于 2024-08-09 10:34:44 发布

一只向上的小蜗牛

最新推荐文章于 2024-08-09 10:34:44 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/hongfuqiang/article/details/78269002

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      /*  //标签适配器{去掉li标签前的点；内边距10px}*/
        div,li{list-style: none;padding: 10px}
     /*   id适配器*/
        #main1{border: 2px red solid}
      /*  id 适配器下的div标签*/
        #main1 div{width: 100px;height: 30px}
      /*  鼠标滑动过的效果*/
        #main1 div:hover{width: 100px;height: 100px;border: 1px solid red}

        #main2{border: 1px solid blue}
      /*  ul li 进行标签隐藏*/
        #main2 li ul{
            display: none;
        }
        #main2 li:hover ul{
            display: block;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
  <div id="main1">
      <div>项目一</div>
      <div>项目二</div>
      <div>项目三</div>
      <div>项目四</div>
  </div>
<ul id="main2">
    <li>
        <a>项目一</a>
        <ul>
            <li>项目一 1</li>
            <li>项目一 2</li>
            <li>项目一 3</li>
            <li>项目一 4</li>
        </ul>
    </li>
    <li>
        <a>项目二</a>
        <ul>
            <li>项目二 1</li>
            <li>项目二 2</li>
            <li>项目二 3</li>
            <li>项目二 4</li>
        </ul>
    </li>
    <li>
        <a>项目三</a>
        <ul>
            <li>项目三 1</li>
            <li>项目三 2</li>
            <li>项目三 3</li>
            <li>项目三 4</li>
        </ul>
    </li>
    <li>
        <a>项目四</a>
        <ul>
            <li>项目四 1</li>
            <li>项目四 2</li>
            <li>项目四 3</li>
            <li>项目四 4</li>
        </ul>
    </li>

</ul>
</body>
</html>*强调内容*

这里写图片描述

一只向上的小蜗牛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
display的展示和隐藏

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> /* //标签适配器{去掉li标签前的点；内边距10px}*/ div,li{list-style: none;padding: 10px} /* id适配器*
复制链接

扫一扫