周报1：二级菜单HTML

最新推荐文章于 2022-10-22 15:57:55 发布

~嘘~禁止想象~

最新推荐文章于 2022-10-22 15:57:55 发布

阅读量378

点赞数

分类专栏：周报文章标签： HTML

本文链接：https://blog.csdn.net/weixin_45773503/article/details/103317159

版权

周报专栏收录该内容

22 篇文章 0 订阅

订阅专栏

问题一

在这里插入图片描述在做二级菜单时，将body的margin设置为0，即

body{
    min-width: 1000px;
    padding: 0;
    margin: 0;
}

fixed定位header的上一小部分空白无法用 margin:0 解决

哎好难

原因：是在默认条件下相对定位的top属性不为0；因此设置属性值top设为0即可。

.header {
    background: #e3e4e5;
    color: #999;
    height: 40px;
    line-height: 40px;
    position: fixed;
    width: 100%;
    top: 0; }

问题二

在这里插入图片描述这样之后上面的一小段空白就不见了 yes

终于搞定

下一个问题

在鼠标移上时后面的盒子会动 啊啊啊啊啊
在这里插入图片描述
刚开始

.header .topnav>li{
    float: left;
    margin: 0 20px;
    padding: 0 8px;
    height: 40px;
    background: lemonchiffon;
    text-align: center;
    **box-sizing: border-box;**/我本以为这就会有用
}

但是呢ennnnnnnnn真的没用

后来

.header .topnav>li{
    float: left;
    margin: 0 20px;
    padding: 0 8px;
    width: 150px; ///加了这一句！important
    height: 40px;
    background: lemonchiffon;
    text-align: center;
    box-sizing: border-box;
}

加了这一句之后发现后面就不动了

border-box是一个新的盒模型是 content+padding+border=width或height
会发现这才是我们想要的盒模型

而我的错误在于没有给盒子定宽，导致无法实现目标效果
.
.
.

而原来的盒模型对其设置的宽高仅是内容盒的宽高而不加padding+border导致我们在需要一个固定的盒子的时候需要计算，非常麻烦。

终于 …
.
.

问题三

问题又来了‘’‘’‘’‘’‘’‘’‘’‘’‘’‘’

在这里插入图片描述

.header .topnav>li .submenu{
    text-align: left;
    border: 2px;
    background: brown;
    width: 150px;
    height: 40px；/气  这句导致我高度坍塌的代码没起作用
    right: 0px;
    position: absolute;
    text-align: left;
    line-height: 40px;
}

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

在解决高度坍塌时千万千万要让height为auto

不然真的会疯掉！！！

.header .topnav>li .submenu{
    text-align: left;
    border: 2px;
    background: brown;
    width: 150px;
    right: 0px;
    position: absolute;
    text-align: left;
    line-height: 40px;
}

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

改后

在这里插入图片描述

问题四

居然还有问题

.header .topnav>li .submenu{
    text-align: left;
    border: 1px solid green;
    background: brown;
    width: 300px;
    right: 0px;
    position: absolute;
    text-align: left;
    line-height: 40px;
    display: none;
}

.header .topnav>li:hover .submenu{
    display: block;
}

.header .topnav>li:hover .submenu
选择器的规则important

不然在鼠标移动上时被隐藏的菜单栏不会出现。
.
.
.
.
.

技巧

    border-top: 1px red solid;
    border-left: 1px red solid;
    border-right: 1px red solid;
    border-bottom: none;

可简写为

    border: 1px solid red;
    border-bottom: none;
...小技巧

问题五

.header .topnav>li .submenu{
    text-align: left;
    border: 1px solid green;
    background:#fff;
    border: 3px solid #ccc;
    width: 300px;
    right: -3px;///解决隐藏栏的代码与导航栏的对齐问题
    position: absolute;
    text-align: left;
    line-height: 40px;
    display: none;
}

在这里插入图片描述
改后

right: -3px；解决隐藏栏的代码与导航栏的对齐问题

问题六

解决鼠标移上时…li…的内容下移问题

由于在鼠标移上时加上了边框，而行高还是40px，导致文字下移因此设置在鼠标移上时行高减少一些。

问题七

遮掩…li…的下边框优雅的写法

.header .topnav>li:hover::after{
    content:"";
    position: absolute;
    width: 100%;
    height: 5px;
    bottom:-2px;
    left: 0;
    background: white;
}

**width: 144px;**

宽度设置为100%时跟导航栏中...**li**...的宽度相同

**最好设置为%**，这样在页面放大缩小的过程中就不会出现位移现象

完结！！！

分享完整代码

body{
    min-width: 1000px;
    padding: 0;
    margin: 0;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

.header {
    background: #e3e4e5;
    color: #008c8c;
    height: 40px;
    line-height: 40px;
    position: fixed;
    width: 100%;
    top: 0;
}
.header .topnav>li{
    float: left;
    margin: 0 20px;
    padding: 0 8px;
    width: 150px;
    height: 40px;
    background: lemonchiffon;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    top: 0;
}

.header .topnav>li>a{
    text-decoration: none;
}

.header .topnav>li .submenu{
    text-align: left;
    border: 1px solid green;
    background:#fff;
    border: 3px solid #ccc;
    width: 300px;
    right: -3px;
    position: absolute;
    text-align: left;
    line-height: 2;
    display: none;
}

.header .topnav>li:hover .submenu{
    display: block;
}

.header .topnav>li:hover{
    background:#fff;
    border: 3px solid #ccc;
    border-bottom: none;
    line-height:35px;
    /* 在鼠标移上时菜单栏的文字高度不变 */
}

.header .topnav>li:hover::after{
    background:#fff;
    width: 178px;
    height: 12px;
}

.header .topnav>li:hover::after{
    content:"";
    position: absolute;
    width: 100%;
    height: 5px;
    bottom:-2px;
    left: 0;
    background: white;
}

.header .topnav>li .submenu a{
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <title>Document</title> -->
    <link rel="stylesheet" href="./css的/reset.css">
    <link rel="stylesheet" href="./css的/定位二级菜单.css">
</head>
<body>
    <header class="header">
            <ul class="topnav clearfix">
                <li><a href="">Lorem.</a></li>
                <li><a href="">Sint!</a></li>
                <li><a href="">Eos?</a></li>
                <li class="clearfix">
                    <a href="">客户服务</a>
                    <div class="submenu">
                           <ul>
                               <li><a href="">Lorem.</a></li>
                               <li><a href="">Sunt!</a></li>
                               <li><a href="">Veritatis!</a></li>
                               <li><a href="">Eius.</a></li>
                               <li><a href="">Pariatur.</a></li>
                           </ul>
                    </div>
                </li>
                <li><a href="">Ducimus?</a></li>
            </ul>
    </header>
    <div style="color: green;">
            <p>Lorem lorem1000 ipsum dolor sit amet consectetur, adipisicing elit. Vero quasi inventore, voluptatum suscipit esse voluptatem ullam est ipsam! Dolores maxime rerum culpa nobis et optio! Quod quia quibusdam corporis! Beatae saepe, fugit, aliquid, rerum dicta adipisci dignissimos molestias molestiae nemo quis voluptatum. In asperiores libero deserunt commodi molestiae sit, necessitatibus hic ipsum veritatis, repellat ullam doloribus ea excepturi ipsam natus rerum nobis inventore blanditiis dicta? Odit dicta perspiciatis impedit deleniti possimus voluptas ex officia provident iusto veniam voluptatibus sunt dignissimos mollitia repellat eveniet cum magnam dolor quaerat sint blanditiis aliquam, commodi fugit sit odio. Quasi sed, iure commodi praesentium animi saepe velit. Modi vitae cumque, voluptates blanditiis quos corrupti cum laboriosam qui quidem nulla veniam? Reprehenderit, ipsa nulla. Earum nam iusto aliquid recusandae voluptates aperiam quaerat nostrum nobis explicabo, ab quae provident anidoloribus laudantium. Sed officia reiciendis ratione, iusto, minima eligendi, odio suscipit animi earum eos est quo volum ut, hic ratione nesciunt, voluptate necessitatibus soluta in repudiandae atque? Esse odit iusto providemagnam cupiditate doloribusipsum assumenda facilis magni voluptate consequatur provident blanditiis nulla eaque architecto omnis voluptates voluptatum inventore et iure, culpa tempora illum? Numquam voluptatum voluptatibus consequatur, error et ut repudiandae inventore cupiditate neque fugiat recusandae deserunt ullam beatae eum esse autem a reiciendis blanditiis, tenetur maiores obcaecati! Possimus dolorem voluptatum, dolor cum, et ea temporibus maiores ipsum optio soluta ipsa fugiat sapiente fugit vitae molestias, quae molestiae nostrum voluptate beatae quas! Sint necessitatibus labore debitis at aut nostrum accusantium eveniet eligendi ipsum quae ab, corrupti blanditiis vitae dolorem dolores recusandae! Dolorum quasi eveniet magni officia quam accusantium unde, ratione suscipitcorporis maiores in incidunt, sed, necessitatibus quasi quod quam consectetur! Consequatur quisquam odio ipsam ratione dicta harum cum, nobis pariatur consectetur, quas rerum! Numquam alias praesentium sit debitis velit. Illum, dolores cupiditate.</p>
    </div>
</body>
</html>