个人中心
gpt4 book ai didi

html - div 的响应度

转载 作者：行者123 更新时间：2023-11-28 01:44:51 26 4
gpt4 key购买 nike

我有一个关于响应度的问题。我希望这个符号“=”在屏幕较小时(比如 1000 像素)容纳所有菜单。我知道我必须使用响应性，但我不知道如何使用。

这是我的索引:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
     <title>Tagesmutter Kiel</title>
</head>

<body style="background-color: #41430e">
 <!--a href="javascript:void(0);"  class="icon" onclick="allLinksInOneDiv()">&#9776;</a-->
    <div id="menu">
      <div class="icon-bar">
       <a class="active" href="index.html"><i class="fa fa-home"></i></a> 
      </div>


      <div class="dropdown_wohnen">
       <button class="dropbtnWohnen">Wohnen</button>
         <div class="wohnen_content">
            <a href="wohnen.html">Eingenwöhnung</a>
            <a href="konzeption.html">Konzeption</a> 
        </div>
      </div>    

      <div class="dropdown_betreung">
       <button  class="dropbtnBetreung">Betreungskosten</button>
         <div class="betreungskosten_content">
             <a href="betreuungskosten.html">Betreuungskosten</a>
             <a href="freiePlaetze.html">Freie Plätze</a>
             <a href="fotos.html">Bilder</a>
         </div>     
      </div>

      <div class="dropdown_tag">
       <button  class="dropbtnTag">Tagesablauf</button>
         <div class="tag_content">
             <a href="tagesablauf.html">Tagesablauf</a>
             <a href="tageskinder.html">Tageskinder</a>
             <a href="kommentar.html">Gästebuch</a>
         </div>     
      </div>

      <div class="dropdown_kontakt">
        <button  class="dropbtnKontakt">Kontakt</button>
          <div class="kontakt-content">
            <a href="kontakt.html">Kontakt</a>
            <a href="urlaub.html">Urlaub</a>
            <a href="info.html">Über mich</a>
         </div>
      </div>

</div>

<div class="banner">
  <img class="mySlides" src="../img/img1.jpg" height ="270" style="width:100%" alt="bannerSlide">
  <img class="mySlides" src="../img/img2.jpg" height ="270" style="width:100%" alt="bannerSlide">
  <img class="mySlides" src="../img/img3.jpg" height ="270" style="width:100%" alt="bannerSlide">
</div>

<div class="info">
<h1>Hallo, liebe Eltern! </h1>
 <p style="
 padding-left: 10px"> Sie suchen eine Tagesmutter für Ihr Kind? <br>

 Ich hoffe, dass ich Ihnen mit diesen Seiten einen kleinen Einblick

in meine Arbeit als Tagesmutter ermöglichen kann. &#x263A; </p>

<h5>Tagesmutter Irene</h5>
</div>
</body>

</html>

现在是样式表:

#menu
{
    background-color: #78409a;
    display: flex;
    margin-top: -2%;
    margin-left: 15%;
    margin-right: 10%;
    width: 68%; 
}


.icon-bar { margin-right: 0.2%;}

.icon-bar a 
{
    float: right;
    color: white;
    font-size: 710%;    
}


.active {background-color: #4CAF50;}


.dropdown_whohnen 
{ 
    position: relative;
    display: inline-block;
}

.dropbtnWohnen 
{
    background-color: #4CAF50 ;
    color: white;
    padding: 33.25%;
    font-size: 100%;
    border: none;
    cursor: pointer;

}


.wohnen_content 
{
    display: none;
    position: absolute;
    background-color: #d5416e;
    min-width: 13.2%;
    box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
    z-index: 1;
}

.wohnen_content a 
{
    color: black;
    padding: 6% 6%;
    text-decoration: none;
    display: block;
}

.dropdown_wohnen:hover .wohnen_content {display: block;}
.dropdown_wohnen:hover .dropbtnWohnen {background-color: #3e8e41;}
.wohnen_content a:hover {background-color: #ddd}


.dropdown_betreung 
{    
    position: relative;
    display: inline-block;
    margin-left: 0.3%;
}

.dropbtnBetreung
{
    background-color: #4CAF50 ;
    color: white;
    padding: 24.7%;
    font-size: 100%;
    border: none;
    cursor: pointer;

}

.betreungskosten_content 
{
    display: none;
    position: absolute;
    background-color: #DAF7A6 ;
    min-width: 100%;
    box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
    z-index: 1;
}

.betreungskosten_content a 
{
    color: black;
    padding: 15px 15px;
    text-decoration: none;
    display: block;
}

.dropdown_betreung:hover .betreungskosten_content {display: block;}
.dropdown_betreung:hover .dropbtnBetreung {background-color: #3e8e41;}
.betreungskosten_content a:hover {background-color: #ddd}

.dropdown_tag 
{    
    position: relative;
    display: inline-block;
    margin-left: 0.3%;
}


.dropbtnTag
{
    background-color: #4CAF50 ;
    color: white;
    padding: 29.2%;
    font-size: 100%;
    border: none;
    cursor: pointer;

}


.tag_content 
{
    display: none;
    position: absolute;
    background-color: #78409a ;
    min-width: 100%;
    box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
    z-index: 1;
}

.tag_content a 
{
    color: black;
    padding: 5% 5%;
    text-decoration: none;
    display: block;
}


.dropdown_tag:hover .tag_content {display: block;}
.dropdown_tag:hover .dropbtnTag {background-color: #3e8e41;}
.tag_content a:hover {background-color: #ddd}


.dropdown_kontakt
{
    position: relative;
    display: inline-block;
    margin-left: 0.3%;

}

.dropbtnKontakt
{
    background-color: #4CAF50 ;
    color: white;
    padding: 34.09%;
    font-size: 100%;
    border: none;
    cursor: pointer;

}

.kontakt-content 
{
    display: none;
    position: absolute;
    background-color: #12d3df;
    min-width: 100%;
    box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
    z-index: 1;
}

.kontakt-content a 
{
    color: black;
    padding: 15px 15px;
    text-decoration: none;
    display: block;
}

.dropdown_kontakt a:hover {background-color: #ddd}
.dropdown_kontakt:hover .kontakt-content {display: block;}
.dropdown_kontakt:hover .dropbtnKontakt {background-color: #3e8e41;}


.banner
{
    height: 270px;
    margin-left: 15%;
    margin-right: 10%;
    width: 68%;
    background-color: white;
}

.mySlides {display:none;}

.info h1, h5, h3
{
    font-family: 'Tangerine';
    font-size: 78px;
    text-shadow: 10px 10px 10px #aaa
}



.info
{
    background-color:  #a6debb;
    margin-top: -4%;
    margin-left: 15%;
    margin-right: 10%;
    width: 68%;
    font-family: 'Helvetica', serif;
    font-size: 40px;
    text-shadow: 22px 22px 22px #aaa;

}


.info p
{
    padding-left: 10px; 
    font-family: 'Helvetica', serif;
    font-size: 25px;
    text-shadow: 22px 22px 22px #aaa;

}



table
{
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}


td, th 
{
    border: 1px solid  #9a1838 ;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even)
{
    background-color: #dddddd;
}


#map 
{
    margin-left: 9%;
    width: 80%;
    height: 400px;
    background-color: grey;
}

拜托，你能帮我解决这个问题吗？而且我的显示也因浏览器而异(Firefox 与 chrome)。

最佳答案

根据您的问题，您似乎想要构建一个在单击符号“=”时打开的移动导航菜单。

您需要执行以下操作:

- HTML:在无序列表中添加一个列表，以保存 anchor 链接。这是展开时您将看到的导航文本。附上将在下面的 javascript 中使用的 onclick 功能。

- CSS: 设置导航菜单的样式。

- Javascript: 创建一个对 HTML onclick 使用react的函数。此功能将扩展您的导航菜单。您的函数应该能够切换菜单，这意味着同一个按钮应该能够打开/关闭菜单。

...如果您需要进一步的帮助，请创建一个代码片段。

关于html - div 的响应度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50239011/

26 4 0
文章推荐： javascript - 如何防止js动画再次发生
文章推荐： javascript - 在网站 Bootstrap 上更改容器的背景颜色
文章推荐： c++ - 新运算符前的括号 - 含义？
文章推荐： c++ - 从大范围内生成一个随机数，除了大范围中间的较小范围
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com