html CSS

如何解决html CSS

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Site de Yani Mira</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id = "banniere">
            <img src="/images/banniere_site.png" alt="">
        </div>
        <div class="dropdown">
            <button class="dropbtn">Menu^</button>
            <div class="dropdown-content">
               <a href="#">Accueil</a>
               <a href="#">Telecharger CV</a>
               <a href="#">Chaîne Youtube</a>
               <a href="#">Contact</a>
               <a href="#">Mes projets</a> 
            </div>            
        </div>
         <div id='bienvenue'>Bienvenue sur mon Site</div>
         <div id="banniere">
         <img src="images/banniere_site.png" alt="">
        </div>
        <section>
            <div id="presentation">
                Je me présente je m'appelle Yani Mira
            </div>
    <div id="texte_section">Je suis un jeune développeur en 3ème année à l'école d"informatique
        ESTIAM (Paris 20) et suis en contrat d'alternance avec la société
        de consulting informatique Xenoo.
        Depuis petit je suis passioné par les nouvelles technologies et
        souhaite en faire mon métier.</div>
        <img class="photodemoi" src="images/yani_photo_resized.jpg" alt="">
        </section>
        <script src="" async defer></script>
    </body>
</html>

@font-face {
    font-family: 'freshmannormal';
    src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),url('polices/freshman/freshman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gowaitalic';
    src: url('gowa-italic-webfont.woff2') format('woff2'),url('gowa-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gowaregular';
    src: url('polices/gowa/gowa-regular-webfont.woff2') format('woff2'),url('polices/gowa/gowa-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



#bienvenue{
    font-family: 'freshmannormal';
    text-align: center;
    border-width: 100%;
    border-style: solid;
    border-radius: 40px;
    border-left: 40px;
    border-right: 40px;
     height: 100px; 
     height: auto;
    width: 100%;
    font-size: 3em;
    background-color: antiquewhite;
    margin-right: 20em;    
}


#banniere img
{
    width: 100%;
    border-radius: 30px;
    display: flex;
    /* margin-left: 25%; */
}

#presentation{
    font-family: 'gowaregular';
    font-weight: bold;
    font-size: 2em;

}
#text_section{
}
section{
    font-family:sans-serif;
    padding-right: 10em;
    margin-right: 40px;
    margin-left: 40px;
    padding-bottom: 100px;
    font-size: 2em ;
    border: 10px;
    border-radius: 40px;
    border-style: solid ;
    border-color:antiquewhite;
    text-align: center;
}

.photodemoi{
    border-style: solid;
    border-color: antiquewhite;
    height: 7em;
    width: 6em;
    position: relative;
    bottom: 160px;
    left:8.5em; 
    float: right;
    border-radius: 20px;
}

/* Le bouton du dropdown*/
.dropbtn {
    font-family: 'freshmannormal';
    background-color: antiquewhite;
    color: black;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    float: right;
    margin-right: 40px;
    margin-top: 1px;
  }
  
/* Configuration du container dropdown */

  /* Contenu du dropdown (qu'on a caché avec display:none) */
  .dropdown-content{
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0.2);
      padding: 12px 16px;
      /* margin-left: 110em; */
      z-index: 1;     
      
  }

  /* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color:antiquewhite;
}

@font-face {
    font-family: 'freshmannormal';
    src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),0.2);
      padding: 12px 16px;
      /* margin-left: 110em; */
      z-index: 1;     
      
  }

  /* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color:antiquewhite;
}

@font-face {
    font-family: 'freshmannormal';
    src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),0.2);
      padding: 12px 16px;
      /* margin-left: 110em; */
      z-index: 1;     
      
  }

  /* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color:antiquewhite;
}

大家好，我遇到了一个问题，我将下拉按钮放在页面的最右边（最初位于最左边），但是当我将鼠标悬停在下拉按钮上时，下拉内容显示在最左边尝试将其边距向左px移动，但是它起作用了，但问题是它没有响应，如果我缩小页面，则当我将鼠标悬停在下拉按钮上时，我不再看到下拉内容了。

这是我的CSS代码：

[在此处输入图片描述] [1]

我使用代码进行了编辑

编辑前： [在此处输入图片描述] [2]

在编辑https://i.stack.imgur.com/zv2od.png之前编辑后：https://i.stack.imgur.com/tup88.png

解决方法

看到截图后，我可以判断出您的问题不是将dropbtn定义为内容的相对位置，而只是将内容定义为绝对位置，默认情况下会将其放在您身体的左上方。为了解决它，尝试添加位置：relative;在您的dropbtn上另一件事是，当您使用float时，必须在完成后清除它，我个人不喜欢使用float，而是可以将按钮定义为display：block;然后给它margin-left：auto;它将其放置在屏幕的右侧。

好的，我刚刚解决了这个问题，我只需要适当地放置.dropdown类，并放置一个相对于它的位置。对那些不好的人表示抱歉，这是我第一次问堆栈溢出问题，并感谢您的帮助。

嘿，凯夫米再次找到以下代码供您考虑，并告诉我是否还需要其他

HTML

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Site de Yani Mira</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id = "banniere">
        <img src="/images/banniere_site.png" alt="">
    </div>
    <div class="dropdown">
        <button class="dropbtn">Menu^</button>
        <div class="dropdown-content">
           <a href="#">Accueil</a>
           <a href="#">Telecharger CV</a>
           <a href="#">Chaîne Youtube</a>
           <a href="#">Contact</a>
           <a href="#">Mes projets</a> 
        </div>  

    </div>
     <div id='bienvenue'>Bienvenue sur mon Site</div>
     <div id="banniere">
     <img src="images/banniere_site.png" alt="">
    </div>
    <section>
        <div id="presentation">
            Je me présente je m'appelle Yani Mira
        </div>
<div id="texte_section">Je suis un jeune développeur en 3ème année à l'école d"informatique
    ESTIAM (Paris 20) et suis en contrat d'alternance avec la société
    de consulting informatique Xenoo.
    Depuis petit je suis passioné par les nouvelles technologies et
    souhaite en faire mon métier.</div>
    <img class="photodemoi" src="images/yani_photo_resized.jpg" alt="">
    </section>
    <script src="" async defer></script>
</body>
</html>

CSS

@font-face {
    font-family: 'freshmannormal';
    src: url('polices/freshman/freshman-webfont.woff2') format('woff2'),url('polices/freshman/freshman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gowaitalic';
    src: url('gowa-italic-webfont.woff2') format('woff2'),url('gowa-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gowaregular';
    src: url('polices/gowa/gowa-regular-webfont.woff2') format('woff2'),url('polices/gowa/gowa-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



#bienvenue{
    font-family: 'freshmannormal';
    text-align: center;
    border-width: 100%;
    border-style: solid;
    border-radius: 40px;
    border-left: 40px;
    border-right: 40px;
     height: 100px; 
     height: auto;
    width: 100%;
    font-size: 3em;
    background-color: antiquewhite;
    margin-right: 20em;
  position:absolute;
  top:1%;
  left:0;
  z-index:-1;
}


#banniere img
{
    width: 100%;
    border-radius: 30px;
    display: flex;
    /* margin-left: 25%; */
}

#presentation{
    font-family: 'gowaregular';
    font-weight: bold;
    font-size: 2em;

}
#text_section{
}
section{
    font-family:sans-serif;
    padding-right: 10em;
    margin-right: 40px;
    margin-left: 40px;
    padding-bottom: 100px;
    font-size: 2em ;
    border: 10px;
    border-radius: 40px;
    border-style: solid ;
    border-color:antiquewhite;
    text-align: center;
    margin-top:2rem;
}

.photodemoi{
    border-style: solid;
    border-color: antiquewhite;
    height: 7em;
    width: 6em;
    position: relative;
    bottom: 160px;
    left:8.5em; 
    float: right;
    border-radius: 20px;
}

.dropdown {
  position: relative;
}

/* Le bouton du dropdown*/
.dropbtn {
    display:block;
    font-family: 'freshmannormal';
    background-color: antiquewhite;
    color: black;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    margin-left:auto;
    margin-right:1rem;
    margin-top:.1rem;
  }
  
/* Configuration du container dropdown */

  /* Contenu du dropdown (qu'on a caché avec display:none) */
  .dropdown-content{
      opacity:0;
      position: absolute;
    top: 120%;
    width: 100%;
    height: 0;
      background-color: #f9f9f9;
/*       min-width: 160px; */
      box-shadow: 0px 8px 16px 0px rgba(0,0.2);
/*       padding: 12px 16px; */
      /* margin-left: 110em; */
      z-index: 1;     
      border-radius:30px;
    text-align:center;
    padding:1rem 0;
    transform: translateY(-100vh);
    transition: all .8s;
  }

  /* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover > .dropdown-content {
    opacity: 1;
    height: 400%; 
    transform: translateY(0);
}

/* Change the background color of the dropdown button when the dropdown 
 content is shown */
.dropdown:hover .dropbtn {
    background-color:antiquewhite;
}

在我的代码笔https://codepen.io/ahamdan/pen/bGeEZeg上检查一下，然后告诉我这是否是你想要的

如何解决html CSS

解决方法

相关推荐