第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

HTML 不響應(yīng)媒體查詢

HTML 不響應(yīng)媒體查詢

UYOU 2022-12-29 16:33:23
這是我第一次使用媒體查詢。我正在為網(wǎng)站構(gòu)建一個導(dǎo)航欄，我希望它在達(dá)到某個設(shè)備寬度后從導(dǎo)航欄更改為下拉列表（如https://www.w3schools.com/howto/howto_js_topnav_responsive.asp ). 我已經(jīng)將 W3 的設(shè)計融入到我自己的設(shè)計中，但是，我似乎無法更改導(dǎo)航欄。這是我的相關(guān) CSS：... Additional CSS Settings....navigation-bar{    width:100%;    list-style-type: none;    margin:0;    padding:0;    background-color: #DDDDDD;    overflow:hidden;}.navigation-bar li{    display:inline;}.navigation-bar a{    text-decoration: none;    font-size: 120%;    color: #000000;    padding-left:1%;    padding-right:1%;    padding-top:0.5%;    padding-bottom:0.5%;    display:inline-block;}.navigation-bar a:hover{    background-color:#999999;}.navigation-bar a.active{    background-color: #999999;}.navigation-bar .icon{    display:none;}... Additional CSS Settings..@media screen and (max-width: 900px){    .navigation-bar a:not(:first-child) {display: none;}    .navigation-bar a.icon{        float:right;        display: block;    }}@media screen and (max-width: 900px) {    .navigation-bar.responsive {position: relative;}    .navigation-bar.responsive a.icon {      position: absolute;      right: 0;      top: 0;    }    .navigation-bar.responsive a {      float: none;      display: block;      text-align: left;    }}有了這個，我的導(dǎo)航欄根本沒有響應(yīng)。我想知道我是否遺漏了我需要包含在我的代碼中的任何東西，或者我是否遺漏了什么。我認(rèn)為這可能與我在列表中的導(dǎo)航有關(guān)，但我不確定這將如何影響代碼，也不確定如何創(chuàng)建解決方法。W3 的示例代碼：https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
查看完整描述

2 回答

?
Helenr

TA貢獻(xiàn)1780條經(jīng)驗 獲得超4個贊

與 W3Schools 示例相比，您的代碼不起作用的原因是因為 CSS 與您的相比針對不同的元素。


基本上你只需要調(diào)整它所說a的位置li（在你的 CSS 中）。


我還必須class="icon"從<a>元素中刪除并將其添加到相關(guān)的<li>（在 HTML 中）。


請參閱下面的示例；


function myFunction() {

    var x = document.getElementById("navigation");

    if (x.className === "navigation-bar") {

      x.className += " responsive";

    } else {

      x.className = "navigation-bar";

    }

  }

.navigation-bar{

    width:100%;

    list-style-type: none;

    margin:0;

    padding:0;

    background-color: #DDDDDD;

    overflow:hidden;

}

.navigation-bar li{

    display:inline;

}

.navigation-bar li{

    text-decoration: none;

    font-size: 120%;

    color: #000000;

    padding-left:1%;

    padding-right:1%;

    padding-top:0.5%;

    padding-bottom:0.5%;

    display:inline-block;

}

.navigation-bar li:hover{

    background-color:#999999;

}

.navigation-bar li.active{

    background-color: #999999;

}

.navigation-bar .icon{

    display:none;

}


@media screen and (max-width: 900px){

    .navigation-bar li:not(:first-child) {display: none;}

    .navigation-bar li.icon{

        float:right;

        display: block;

    }

}

@media screen and (max-width: 900px) {

    .navigation-bar.responsive {position: relative;}

    .navigation-bar.responsive li.icon {

      position: absolute;

      right: 0;

      top: 0;

    }

    .navigation-bar.responsive li {

      float: none;

      display: block;

      text-align: left;

    }

}

<html>

  <head>

    <meta charset = "utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <title>Title</title>

    <link rel=stylesheet type="text/css" href="CS File">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  </head>

  <body>

    <h1><a href="index.html">Website Title</a></h1>

    <ul id="navigation" class="navigation-bar">

      <li><a href="#">Item 1</a></li>

      <li><a href="#">Item 2</a></li>

      <li><a href="#">Item 3</a></li>

      <li><a href="#">Item 4</a></li>

      <li><a href="#">Item 5</a></li>

      <li><a href="#">Item 6</a></li>

      <li><a href="#">Item 7</a></li>

      <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>

    </ul>

    <script type="text/javascript" src="JS File"></script>

    <script type="text/javascript" src="css3-mediaqueries.js"></script>

  </body>

</html>


查看完整回答
反對 回復(fù) 2022-12-29
?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗 獲得超4個贊

你已經(jīng)做了一切，只是有些事情你做錯了他們是：-

  1. 你<ul>, <li>無緣無故地使用了你本可以只使用<div>and <a>。

  2. 那個漢堡包圖標(biāo)沒有顯示，因為你沒有粘貼他們的 CSS 鏈接 [ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">]。他們使用他們的自定義鏈接來顯示漢堡包圖標(biāo)。

  3. 我不知道你是如何以及為什么沒有正確地寫你寫的 CSS 文件名CS File不是CS File.css因為你寫的 CSS 內(nèi)容不起作用

那么，這些是我在您的 HTML 文件中所做的更改：-

    <html>

  <head>

    <meta charset = "utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <title>Title</title>

    <link rel=stylesheet type="text/css" href="CS File.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  </head>

  <body>

    <h1><a href="index.html">Website Title</a></h1>

    <div id="navigation" class="navigation-bar">

      <a href="#">Item 1</a>

      <a href="#">Item 2</a>

      <a href="#">Item 3</a>

      <a href="#">Item 4</a>

      <a href="#">Item 5</a>

      <a href="#">Item 6</a>

      <a href="#">Item 7</a>

      <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>

    </div>

  </body>

</html>

這是你的 CSS 代碼，我稍微編輯了一下


/* ... Additional CSS Settings... */

.navigation-bar{

    width:100%;

    list-style-type: none;

    margin:0;

    padding:0;

    background-color: #DDDDDD;

    overflow:hidden;

}


.navigation-bar a{

    display:inline;

    text-decoration: none;

    font-size: 120%;

    color: #000000;

    padding-left:1%;

    padding-right:1%;

    padding-top:0.5%;

    padding-bottom:0.5%;

    display:inline-block;

}

.navigation-bar a:hover{

    background-color:#999999;

}

.navigation-bar a.active{

    background-color: #999999;

}

.navigation-bar .icon{

    display:none;

}

/* ... Additional CSS Settings.. */


@media screen and (max-width: 900px){

    .navigation-bar a:not(:first-child) {display: none;}

    .navigation-bar a.icon{

        float:right;

        display: block;

    }

}

@media screen and (max-width: 900px) {

    .navigation-bar.responsive {position: relative;}

    .navigation-bar.responsive a.icon {

      position: absolute;

      right: 0;

      top: 0;

    }

    .navigation-bar.responsive a {

      float: none;

      display: block;

      text-align: left;

    }

}

現(xiàn)在在 Java Script 中使用 Java Script 一切都是正確的，因此無需編輯它與以前相同：-


function myFunction() {

    var x = document.getElementById("navigation");

    if (x.className === "navigation-bar") {

      x.className += " responsive";

    } else {

      x.className = "navigation-bar";

    }

  }

是的！您可以做的一件事是添加過渡效果，過渡效果看起來真的很棒。


希望有幫助。?。。?/p>


查看完整回答
反對 回復(fù) 2022-12-29
  • 2 回答
  • 0 關(guān)注
  • 122 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號