18910140161

Html

首页 >> 前端开发 >> Html

HTML-带有<li>的CSS-Stack溢出属性

顺晟科技

2022-10-19 12:21:16

102

我试图用HTML和CSS复制一个网站。在我的代码中，我有不同的列表，每个列表都有不同的css属性。在我的浏览器中，属性混杂，我看不懂…… 我的html代码:

    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="file:///my css !/css/odpf.css" >

        <title>Olympiades</title>
    </head>
    <body>
            <div id="barre_haut">
            </div>
            <div id="wrapper">
                <div class="container bg-white">
                    <nav>
                        <ul id="menu_haut" class="nav flex-column flex-md-row justify-content-end">
                            <li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Recherche</a></li>
                            <li id="menu_haut" class="nav-item menurouge"><a class="nav-link" href="#">Connexion</a></li>
                            <li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Mon compte</a></li>
                            <li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Presse</a></li>
                        </ul>
                    </nav>
                    <div class="row ">
                        <div class="col-md-4 bg-white"><div class="position-absolute" style="bottom:0px; left:35px"><img src="https://odpf.org/templates/odpftemplate/img/site-logo-398x106.png" alt="Logo Olympiades" style="width:100%; height:auto"></div></div>
                         <div class="col-md-3 bg-white"></div>
                        <div class="col-md-5 bg-white pr-0"><img src="https://odpf.org/templates/odpftemplate/img/home-rightcol-top2.png" alt="image_en_tete" style="width:100%; height:auto"></div>
                    </div>
                    <div class="row">
                            <div class="col-md-4 col-gche-accueil ">
                                <div class="row px-3 pb-0">
                                    <img src="https://odpf.org/images/odpf_slider_home_08.jpg" style="width:100%; height:auto">
                                    <div class="menugche">
                                        <h3 class="mt-1">les olympiades de physique france</h3>
                                        <ul>
                                            <li class="menugche"><a href="#">C'est quoi ?</a></li>
                                            <li class="menugche">Comment ça se passe ?</li>
                                        </ul>
                                        <h3 class="mt-1">Revivez les éditions passées</h3>
                                        <ul>
                                            <li class="menugche">Archives</li>
                                            <li class="menugche">Les mémoires</li>
                                            <li class="menugche">Colloque de la 20ème édition</li>
                                               </ul>
                                      </div>
                                </div>
                                    </div>
            </div>
            </div>
            <div id="barre_bas">
            </div>
    </body>
    </html>

和我的css:

    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="file:///my css !/css/odpf.css" >

        <title>Olympiades</title>
    </head>
    <body>
            <div id="barre_haut">
            </div>
            <div id="wrapper">
                <div class="container bg-white">
                    <nav>
                        <ul id="menu_haut" class="nav flex-column flex-md-row justify-content-end">
                            <li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Recherche</a></li>
                            <li id="menu_haut" class="nav-item menurouge"><a class="nav-link" href="#">Connexion</a></li>
                            <li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Mon compte</a></li>
                            <li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Presse</a></li>
                        </ul>
                    </nav>
                    <div class="row ">
                        <div class="col-md-4 bg-white"><div class="position-absolute" style="bottom:0px; left:35px"><img src="https://odpf.org/templates/odpftemplate/img/site-logo-398x106.png" alt="Logo Olympiades" style="width:100%; height:auto"></div></div>
                         <div class="col-md-3 bg-white"></div>
                        <div class="col-md-5 bg-white pr-0"><img src="https://odpf.org/templates/odpftemplate/img/home-rightcol-top2.png" alt="image_en_tete" style="width:100%; height:auto"></div>
                    </div>
                    <div class="row">
                            <div class="col-md-4 col-gche-accueil ">
                                <div class="row px-3 pb-0">
                                    <img src="https://odpf.org/images/odpf_slider_home_08.jpg" style="width:100%; height:auto">
                                    <div class="menugche">
                                        <h3 class="mt-1">les olympiades de physique france</h3>
                                        <ul>
                                            <li class="menugche"><a href="#">C'est quoi ?</a></li>
                                            <li class="menugche">Comment ça se passe ?</li>
                                        </ul>
                                        <h3 class="mt-1">Revivez les éditions passées</h3>
                                        <ul>
                                            <li class="menugche">Archives</li>
                                            <li class="menugche">Les mémoires</li>
                                            <li class="menugche">Colloque de la 20ème édition</li>
                                               </ul>
                                      </div>
                                </div>
                                    </div>
            </div>
            </div>
            <div id="barre_bas">
            </div>
    </body>
    </html>

而且，我的菜单行在开始时应该是黑色的，在12中，它出现在红色的，在20中，属性由“menugche”定义....

我脑子里怎么了？ 提前谢谢！

顺晟科技：

这定义了三个独立的规则:

  • 任何元素，它是具有类的元素的后代；
  • 任何元素；
  • 任何元素；

我怀疑您希望规则是:

  • 任何元素，它是具有类的元素的后代；
  • 任何元素的子代，其类为；
  • 任何元素的子代，其类为；

如果是这种情况，则需要重复类名:

  • TAG：
上一篇：JavaScript-滚动时的图像背 下一篇：HTML-为什么在PHP中使用路由器
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！