Question

上周，我的一切安排都很好。本周，我添加了一些CSS代码，并且所有内容相互融合。知道为什么吗？另外，我最上面的导航栏没有像应该那样应用内联块。关于为什么的任何提示将不胜感激。请放心，因为我还比较陌生。我认为这将是我忽略或遗失的小东西。

    <!DOCTYPE html>
<html lang="en">
<head>

        <meta charset="utf-8">
      <title> - ePortfolio</title>
        <link rel="stylesheet" href="css/navigation.css">

   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

</head>

   <body>

     <header>
<nav class="navbar">
    <span class="navbar-toggle" id="js-navbar-toggle">
    <span class="fas fa-bars"></span>
    </span>
    <a href="index.html" class="home">Home</a>
    <ul class="main-nav" id="js-menu">
    <li><a href="javascript.html" class="nav-links">JavaScript</a></li>
    <li><a href="contact.html" class="nav-links">Contact</a></li>
    <li> <a href="navigation.html" class="nav-links">Navigation</a></li>
    </ul>

</nav>
     
<h1>Navigation Menu Gallery</h1>

    </header>
    <main>

<h2>Vertical Navigation Bar</h2>
<!--Code vertical navigation bar here-->
<nav ID="vertical_nav">

   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Shop</a></li>
        <li><a href="#">Contact</a></li>
   </ul>
</nav>
<br>
<p>The vertical navigation bar was created using an unordered list while removing the ornaments along side of the content.  I chose my colors by visiting W3Schools and viewing 
the color picker and finding 5 hues of one specific color to keep an even flow.  Vertical navigation would be used on websites with single page navigation.  Vertical navigation is also 
a good choice while creating a page with a lot of content where it can be coded to the side of the page to keep in view while scrolling. </p>

<h2>CSS Drop Down Menu</h2>
<!--Code dropdown navigation bar here-->

<nav ID="drop_nav">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Guitars
        <span class="arrow">&#x25bc;</span></a>
        <ul class="submenu">
            <li><a href="#">Gibson</a></li>
            <li><a href="#">Fender</a></li>
            <li><a href="#">Ibanez</a></li>
        </ul>
    </li>
    <li><a href="#">Drums
        <span class="arrow">&#x25bc;</span></a>
        <ul class="submenu">
            <li><a href="#">Tama</a></li>
            <li><a href="#">Pearl</a></li>
            <li><a href="#">DW</a></li>
        </ul>
    </li>
    <li><a href="#">Amplifiers
        <span class="arrow">&#x25bc;</span></a>
        <ul class="submenu">
            <li><a href="#">Marshall</a></li>
            <li><a href="#">Peavy</a></li>
            <li><a href="#">Crate</a></li>
        </ul>
    </li>
    
        <li><a href="#">Contact</a></li>
        <li><a href="#">FAQ</a></li>
   </ul>
</nav>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa 
<strong>strong</strong>. Cum sociis natoque penatibus 
et magnis dis parturient montes, nascetur ridiculus 
mus. Donec quam felis, ultricies nec, pellentesque 
eu, pretium quis, sem. Nulla consequat massa quis 
enim. Donec pede justo, fringilla vel, aliquet nec, 
vulputate eget, arcu. In enim justo, rhoncus ut, 
imperdiet a, venenatis vitae, justo. Nullam dictum 
felis eu pede <a class="external ext" href="#">link</a> 
mollis pretium. Integer tincidunt. Cras dapibus. 
Vivamus elementum semper nisi. Aenean vulputate 
eleifend tellus. Aenean leo ligula, porttitor eu, 
consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
dapibus in, viverra quis, feugiat a, tellus. Phasellus 
viverra nulla ut metus varius laoreet. Quisque rutrum. 
Aenean imperdiet. Etiam ultricies nisi vel augue. 
Curabitur ullamcorper ultricies nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus 
et magnis dis parturient montes, nascetur ridiculus 
mus. Donec quam felis, ultricies nec, pellentesque 
eu, pretium quis, sem. Nulla consequat massa quis 
enim. Donec pede justo, fringilla vel, aliquet nec, 
vulputate eget, arcu. In enim justo, rhoncus ut, 
imperdiet a, venenatis vitae, justo. Nullam dictum 
felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
Vivamus elementum semper nisi. Aenean vulputate 
eleifend tellus. Aenean leo ligula, porttitor eu, 
consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
dapibus in, viverra quis, feugiat a, tellus. Phasellus 
viverra nulla ut metus varius laoreet. Quisque rutrum. 
Aenean imperdiet. Etiam ultricies nisi vel augue. 
Curabitur ullamcorper ultricies nisi.</p>
<br>
<br>
<br>

<h2>Navigation Bar Tabs</h2>


<nav id="tabs_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus 
et magnis dis parturient montes, nascetur ridiculus 
mus. Donec quam felis, ultricies nec, pellentesque 
eu, pretium quis, sem. Nulla consequat massa quis 
enim. Donec pede justo, fringilla vel, aliquet nec, 
vulputate eget, arcu. In enim justo, rhoncus ut, 
imperdiet a, venenatis vitae, justo. Cras dapibus. 
Vivamus elementum semper nisi. Aenean vulputate 
eleifend tellus. Aenean leo ligula, porttitor eu, 
consequat vitae, eleifend ac, enim.</p>



    </main>

    <footer>
     <p>© 2020 </p>
    </footer>
<!--<script>
var mainNav = document.getElementById("js-menu");
var navBarToggle = document.getElementById("js-navbar-toggle");

onClick( function() {
navBarToggle.toggleClass("setActive");
}
</script> -->
    
</body></html>

   
"```"


@charset "utf-8";


main {
margin-top: 5%;
}


footer {
display: block;
display: flex;
justify-content: flex-end;
font-weight: 700;
background: #777;
padding: 0 5px 0 0;
}

/*Start vertical navigation bar*/



#vertical_nav {
margin: 0;
padding: 0;

}


#vertical_nav ul {
list-style-type: none;
width: 20%;
}


#vertical_nav ul li {
position: relative;
}


#vertical_nav ul li a {
width: 100%;
color: #7fdbff;
background-image: linear-gradient(to bottom right, #009, #0000b3, #0000cc, #0000e6, #00f);
display: block;
height: 64px;
font-family: bold Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;

}


#vertical_nav ul li a:hover {
background-image: linear-gradient(to bottom, #009 20%, #0000cc 25%, #0000ff 33%);
}



/*Start Drop Menu*/



#drop_nav {
margin: 0;
padding: 0;

}



#drop_nav ul {
list-style-type: none;
width: 100%;
display: flex;
margin: 0;
padding: 0;
}



#drop_nav li {
position: relative;
width: 100%;
text-align: center;
}


#drop_nav a {
color: #ffffff;
background-color: #666699;
display: block;
height: 64px;
font-family: Arial, sans-serif;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: background 0.4s;

}



#drop_nav a:hover {
background-color: #b3b3cc;
}




#drop_nav li:hover .submenu > li {

}


.submenu li {
visibility: hidden;
position: relative;
margin-top: 0;
}


.submenu {
display: flex;
position: relative;
flex-direction: column;
width: 100%;
display: none;
}



.submenu li {

}


.submenu li:hover {
display: block;
}

#drop_nav li:hover .submenu > li {
display: block;
top: 1px;
visibility: visible;
}

.submenu li {
display: block;
position: absolute;
top: 0px;
}

.submenu {
display: flex;
flex-direction: column;
position: absolute;
width: 20%;
}

.submenu li {
position: relative;
}

.submenu li:hover {
display: flex;
}


.arrow {
margin-left: 8px;
color: #33334d;
font-size: 12px;
}




/*Start Navigation Tabs*/


#tabs_nav {
margin: 0;
padding: 0;
}

#tabs_nav ul {
width: 90%;
list-style-type: none;
display: flex;
}

#tabs_nav ul li {
width: 100%;
text-align: center;
position: relative;
}

#tabs_nav ul li a {
color: #ffffff;
height: 64px;
border-radius: 20px 20px 0 0 ;
margin: 0 -10px 0 5px;
z-index: 5;
text-decoration: none;
box-shadow: 0 0 4px rgba(0, 0, 0, .8);
blur-radius: 5px;
display: flex;
justify-content: space-around;
align-items: center;
display: block;
background-image: linear-gradient(#2ecc40, #001f3f);
position: relative;
transition: background 0.4s;
font-family: bold Arial, sans-serif;
font-weight: bold;
}

#tabs_nav a:hover {
margin-top: 10px;
padding-bottom: 10px;
margin-right: -5px;
z-index: 5;
position: relative;

}
















/*Start responsive menu here*/


* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

.navbar {
font-size: 18px;
border: 1px rgba(0, 0, 0, .2);
padding-bottom: 10px;
background-image: linear-gradient(260deg, #ff4136, #0074d9);
}

.main-nav {
list-style-type: none;
display: none;
}

.active {
display: block;
}

.nav-links .home {
text-decoration: none;
color: rgba(35, 120, 27, .7);
}

.main-nav li {
text-align: center;
margin: 15px auto;
}

.home {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}

.navbar-toggle {
color: rgba(0, 255, 255, .8);
font-size: 24px;
margin-top: 10px;
margin-right: 20px;
cursor: pointer;
position: absolute;
}

@media screen and (min-width: 768px) {
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        padding-bottom: 0;
    }
    
    .main-nav {
        display: flex;
        margin-right: 30px;
        flex-direction: column;
        align-items: flex-end;
    }
    
    .main-nav li {
        margin: 0;
    }
    
    .nav-links {
        margin-left: 40px;
    }
    
    .home {
        margin-top: 0;
    }

    .navbar-toggle {
        display: none;
    }

    .home:hover .navlinks:hover {
        background: rgba(0, 97, 254, 1.);   
    }

}

Answer 1

您的媒体查询代表“移动优先”设计-您是否正在桌面上查看页面，而这恰恰是“彼此沉入”？您需要调整媒体查询-如其他人所述，如果您将其注释掉，则页面在桌面上的显示效果很好。

垂直菜单，涵盖h1内容和主要内容

1 个答案: