Question

您好我是HTML，CSS和javascript的新手。我试图在标题内显示徽标和导航栏弹出按钮。有人能告诉我如何在标题中包含徽标以及为什么当屏幕重新调整大小时弹出窗口不会显示？如果有人能为我提供一些值得赞赏的方向。

提前致谢

＆＃13;

function myFunction() {
    var x = document.getElementById("navbar");
    if (x.className === "topnav") {
        x.className += " responsive";
} else {
        x.className = "topnav";
}
}
function outputUpdate(vol) {
    document.querySelector('#volume').value = vol;

}

＆＃13;

body {
    display: grid;
    grid-template-areas: "header header header" "nav article ads" "footer footer footer";
    grid-template-rows: 60px 1fr 60px;
    grid-template-columns: 20% 1fr 15%;
    grid-gap: 10px;
    height: 100vh;
    margin: 0;
}

#pageHeader {
    grid-area: header;
    position: relative;
    align-content: space-between;
    display: inline-block;
    object-fit: contain;
}

img{height: 100%;
    width:100%;
}

h1 {
    position: absolute;
    float: left;
    display: block;
    text-align: left;
    vertical-align: bottom;
    top: 0;
}


.topnav {
    top: 0;
    position: absolute;
    float: right;
    background-color: #333;
    overflow: hidden;
    display: block;
    right: 0px;
}

    .topnav a {
        float: left;
        display: block;
        color: #ff6a00;
        text-align: center;
        padding: 14px 14px;
        text-decoration: none;
        font-size: 20px;
        height: 30px;
    }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 999px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
            position: absolute;
        }
}

#pageFooter {
    grid-area: footer;
}

#mainArticle {
    grid-area: article;
}

#mainNav {
    grid-area: nav;
}

#siteAds {
    grid-area: ads;
}

header, footer, article, nav, div {
    padding: 20px;
    background: gold;
    display:inline-block;

}

.form {
    font: 95% Arial, Helvetica, sans-serif;
    float: inherit;
    width: 800px;
    margin: 10px auto;
    padding: 16px;
    background: #F7F7F7;
}

    .form h1 {
        width: auto;
        background: #43D1AF;
        padding: 20px 0;
        font-size: 140%;
        font-weight: 300;
        text-align: center;
        color: #fff;
        margin: -16px -16px 16px -16px;
    }

    .form input[type="text"],
    .form input[type="email"],
    .form input[type="number"],
    .form textarea,
    .form select {
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
        background: #fff;
        margin-bottom: 4%;
        border: 1px solid #ccc;
        padding: 3%;
        color: #555;
        font: 95% Arial, Helvetica, sans-serif;
    }

        .form input[type="text"]:focus,
        .form input[type="email"]:focus,
        .form input[type="number"]:focus,
        .form textarea:focus,
        .form select:focus {
            box-shadow: 0 0 5px #43D1AF;
            padding: 3%;
            border: 1px solid #43D1AF;
        }

    .form input[type="submit"],
    .form input[type="button"] {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
        padding: 3%;
        background: #43D1AF;
        border-bottom: 2px solid #30C29E;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
        color: #fff;
    }

        .form input[type="submit"]:hover,
        .form input[type="button"]:hover {
            background: #2EBC99;
        }

.rangeslider__ruler:after {
    content: "";
    display: inline-block;
    width: 100%;
}

＆＃13;

<!DOCTYPE html>
<link href="StyleSheet.css" rel="stylesheet" />
<script src="JavaScript.js"></script>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
 
         
    <header id="pageHeader">
    <h1>
        <img src="Images/logo.png" height="30" width="30" float="left"/> Melbourne Public Library </h1>
       
         <span class="topnav" id="navbar">
 
            <a href="Index.html">Home</a>
            <a href="AboutUs.html">About Us</a>
            <a href="Survey.html">Survey</a>
            <a href="ContactUs.html">Contact Us</a>
            <a href="SiteMap.html">Site Map</a>
            <a href="SurveyResponse.html">SurveyResponse.html</a> 
            <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
        </span>
    </header>
    <article id="mainArticle">
        <img src="Images/image1.jpg"/></article>
    <nav id="mainNav">Nav</nav>
    <div id="siteAds">Ads</div>
    <footer id="pageFooter">Footer</footer>


    
</body>
</html>

＆＃13;

Flyout似乎隐藏或包含在标题中？

Answer 1

我认为您必须将pageHeader宽度设为100％，并为img

提供固定的显示

#pageHeader {
   width:100%;
}

img {
   position: fixed;
}

显示标题中包含的Navbar和徽标

1 个答案: