代码之家 › 专栏 › 技术社区 › Slartibartfast

响应式网站汉堡系列未出现

css

Slartibartfast · 技术社区 · 3 年前

我正在尝试获得“汉堡系列”,当你缩小一个响应性网站时,你会得到这些产品。但我得到的线并没有像它应该的那样堆叠,而是并排排列:

这是线条的图片:

代码:

    *
    {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body
    {
        background-image: url(background.jpg);
        background-size: cover;
        background-position : center;
        
        font-family: sans-serif;
    }
    
    .menu-bar
    {
        background: #273044;
        text-align: center;
         
    }
    .menu-bar ul
    {
        display: inline-flex;
        list-style: none;
        color: #fff;
        
    }
    
    .menu-bar ul li
    {
    width: 120px;
    place-items:center;
    display: grid;
    padding: 0px;  
    }
    
    .menu-bar ul li a
    {
    text-decoration: none;
    color: white;   
    }
    .active, .menu-bar ul li:hover
    {
    background-color: #0b56ab;
    height:auto;
    
    height:30px;
    } 
    
    .toggle-button{
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        display: flex;
        flex-direction: none;
        justify-content: space-between;
        width: 31px;
        height: 21px;
    }
    
    .toggle-button .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
    
    }
    
    @media(max-width: 400px){
        .toggle-button{
            display:flex;
        }
        
    }
    
    
    /* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */

    <html>
        <head> 
            <title> Title of page    </title>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
        </head>
    
    <!----header----> 
        <body> 
            <div class="menu-bar">
                <a href = "#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
    
                </a>
              
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Investors</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Training </a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
    
    
    
            <div class= "grid"> 
                
            </div>
    
        </body>
    </html>

你能看一下我的代码并告诉我我忽略了什么吗?

3 回复 | 直到 3 年前

ATP 3 年前

您没有指定 flex-direction 像 column

+(我对你的css代码做了一些修改)

*
    {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body
    {
        background-image: url(background.jpg);
        background-size: cover;
        background-position : center;
        
        font-family: sans-serif;
    }
    
    .menu-bar
    {
        background: #273044;
                display: inline-flex;

        text-align: center;
        align-items:center;

         
    }
    .menu-bar ul
    {
        display: inline-flex;
        align-items:center;
        list-style: none;
        color: #fff;
        
    }
    
    .menu-bar ul li
    {
    min-width: 120px;
    align-self:center;
    display: grid;
    padding: 0px;  
    }
    
    .menu-bar ul li a
    {
    text-decoration: none;
    color: white;   
    }
    .active, .menu-bar ul li:hover
    {
    background-color: #0b56ab;
    height:auto;
    
    height:30px;
    } 
    
    .toggle-button{
        position: absolute;
        right: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 31px;
        height: 21px;
    }
    
    .toggle-button .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
    
    }
    
    @media(max-width: 400px){
        .toggle-button{
            display:flex;
        }
        
    }
    
    
    /* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */

<html>
        <head> 
            <title> Title of page    </title>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css">
        </head>
    
    <!----header----> 
        <body> 
            <div class="menu-bar">
                <a href = "#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
    
                </a>
              
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Investors</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Training </a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
    
    
    
            <div class= "grid"> 
                
            </div>
    
        </body>
    </html>

Sam Craven 3 年前

您需要更改为在a标记和跨距上显示块

    .toggle-button{
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        display: block;
        width: 31px;
        height: 21px;
    }
    
    .toggle-button .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
        display: block;
        margin-bottom: 3px;
    }

Laisender 3 年前

这不是三行的解决方案,但您可以使用SVG:

.hamburger {
  width: 12rem;
  height: 12rem;
}

<svg xmlns="http://www.w3.org/2000/svg" class="hamburger" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>