day4——定位及下拉菜单

最新推荐文章于 2024-06-29 12:45:30 发布

ice_bear-

最新推荐文章于 2024-06-29 12:45:30 发布

阅读量236

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/96501852

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

一、定位：

position:relative 相对定位
以它默认位置为参考点定位
position:absolute 绝对定位;
以父元素(定位)为参考点定位，如果父元素没有定位，则一级往上参考直到html
position:fixed; 固定定位
以浏览器窗口为参考点
z-index:图层上下位置
z-index 仅能在定位元素上奏效（例如 position:absolute;）
z-index的值越大，就越靠上,并且z-index没有单位，例如z-index：99；
定位居中功能　：
left:0;
right:0;
margin:auto;
显示隐藏
visibility:visible;　/hidden
display:block/none;
菜单，二级菜单，三级菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>级联菜单</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        .nav{
            height: 40px;
            background: #000;
        }
        .nav a{
            color:#fff;
            text-decoration: none;
        }
        .nav>ul{
           width:1200px;
            margin:auto;
            height:40px;
            text-align: center;
        }
        .nav>ul>li{
            width:100px;
            float:left;
            height:40px;
            line-height: 40px;;
        }
        .nav>ul>li>ul{
            background: #000;
            display: none;
            
        }
        .nav>ul>li:hover>ul{
            display: block;
        }
        .nav>ul>li>ul>li{
            position: relative;
        }
        .nav>ul>li>ul>li>ul{
            position: absolute;
            left:100px;
            top:0;
            background: #f00;
            width:100px;
        }
        /*.nav ul li:hover{
            background: #fff;
        }*/
       /* .nav>ul>li>a, .nav>ul>ul a{
            color:#fff;
        }
        .nav>ul>li:hover>a, .nav>ul ul li:hover a{
            color:#000;
        }*/

    </style>

</head>
<body>
<div class="nav">
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">公司动态</a>
            <ul>
                <li><a href="">内容一</a></li>
                <li><a href="">内容二</a>
                    <ul>
                        <li><a href="">aaaa</a></li>
                        <li><a href="">aaaa</a></li>
                        <li><a href="">aaaa</a></li>
                    </ul>
                </li>
                <li><a href="">内容三</a></li>
            </ul>
        </li>
        <li><a href="">公司动态</a></li>
        <li><a href="">公司动态</a></li>
        <li><a href="">公司动态</a>
            <ul>
                <li><a href="">内容一</a></li>
                <li><a href="">内容二</a>
                    <ul>
                        <li><a href="">aaaa</a></li>
                        <li><a href="">aaaa</a></li>
                        <li><a href="">aaaa</a></li>
                    </ul>
                </li>
                <li><a href="">内容三</a></li>
            </ul>
        </li>
        <li><a href="">公司简介</a></li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述
nav>ul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

小三角效果　：

border-left:solid 8px transparent;
border-bottom:solid 8px red;
border-right:solid 8px transparent;
三边效果，transparent表示透明背景
在这里插入图片描述
9. 圆角
border-radius:50%; 圆
１个值表示四个角都是相同的弧度
２值表示对角弧度
３值表示，左上，右上，右下　　　　右上和左下相同　　
４值表示：左上，右上，右下，左下　　　（顺时针）