day4——定位及下拉菜单

柔情只为你懂 2021-12-03 04:59 253阅读 0赞

#### 一、定位： ####

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

<!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>

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

1.  小三角效果　：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20211203/ad5d6e0b453b4e41a1c440b30af781eb.png
[20190719212940641.PNG]: /images/20211203/22face698f694ae98c5906a7b8454675.png