Question

我正在尝试建立一个网站，我想在网页的“关于”页面上创建一个侧边栏，转到页面的“我做什么”部分，但由于某种原因，它似乎喜欢它与文章标签合并，我似乎无法分开它。知道我需要做些什么来解决这个问题吗？我也无法在“联系”页面上设置列表样式。帮助将不胜感激。

http://danielcollins.mweb.spinspire.com/

编辑：这是我的代码

body{
    font-family:exo;
    font-size:15px;
    line-height:1.5;
    padding:0;
    background-color:#f4f4f4;
    
     
    }

.container{
width:80%;
margin:auto;
overflow:hidden;

}

.button_1{
    height:38px;
    background:#32cd32;
    border:0;
    padding-left:20px;
    padding-right:20px;
    color:#ffffff;
}

.dark{
    padding:15px;
    background:black;
    color:#ffffff;
    margin-top:10px;
    margin-bottom:10px;
}

header{
    background:black;
    color:#ffffff;
    padding-top:30px;
    min-height:70px;
    border-bottom:#32cd32 3px solid;
}

header a{
    color:#ffffff;
     text-decoration:none;
     text-transform: uppercase;
     font-size: 16px;
    
}

ul{
    margin:0;
        padding:0;
        
}




header li{
    float:left;
    display:inline;
    padding: 0 20px 0 20px;
}

header #branding{
    float:left;
}

header #branding h1{
    margin:0;
}

header nav{
    float:right;
    margin-top:10px;
}

header .highlight, header .current a{
    
    font-weight:bold;
}    

header a:hover{
    color:#cccccc;
    font-weight:bold;
}

#showcase{
    min-height:400px;
     background:url('../IMG/Website1.jpg') no-repeat 0 -175px;
     text-align:center;
     color:white;
}

#showcase h1{
    margin-top: 90px;
    font-size:55px;
    margin-bottom:10px;
}

#showcase p{
font-size:20px;
}

#newsletter{
    padding:15px;
    color:#ffffff;
    background:black;
    
}

#newsletter h1{
float:left;

}

#newsletter form{
    float:right;
    margin-top:15px;
}

#newsletter input[type="email"]{
    padding:4px;
    height:25px;
    width:250px;
}

#boxes{
    margin-top:20px;
}

#boxes .box{
    float:left;
    width:30%;
    text-align:center;
    padding:10px;
}

#boxes .box img{
    width:200px;
}



aside #sidebar{
    float:right;
    width:30%;
    margin-top:10px;
}
    
aside #sidebar  .quote input, aside#sidebar .quote textarea{
 width:90px;
 padding:5px;
}



    article#main-col{
    float:left;
    width:65%;
    }    

    ul #contact li{
        list-style:none;
        padding:20px;
        border:#cccccc solid 1px;
        margin-bottom:5px;
        background:#e6e6e6;
    }
        
    
    
    
    
footer{
    padding:20px;
    margin-top:20px;
    color:#ffffff;
    background-color:black;
    text-align:center;
}



@media(max-width: 768px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  article#main-col,
  aside#sidebar{
    float:none;
    text-align:center;
    width:100%;
  }

  header{
    padding-bottom:20px;
  }

  #showcase h1{
    margin-top:40px;
  }

  #newsletter button, .quote button{
    display:block;
    width:100%;
  }

  #newsletter form input[type="email"], .quote input, .quote textarea{
    width:100%;
    margin-bottom:5px;
  }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="Afforable and professional web design">
        <meta name="keywords" content="web design, affordable web design">
        <meta name="author" content="Daniel Collins">
        <title>Web Design | About</title>
       <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
        <link rel="stylesheet" href="./CSS/newCascadeStyleSheet.css">
        
 </head>
    <body>
        <header>
            <div class="container">
                <div id="branding">
                    <h1><span class="highlight">Daniel's</span> Web Design Resume</h1>
                </div>
                <nav>
                    <ul>
                        <li><a href ="index.html">Home</a></li>
                        <li class="current"><a href ="about.html">About</a></li>
                        <li><a href ="contact.html">Contact</a></li>
                        
                    </ul>
                </nav>
            </div>
        </header>
       
        
        <section id="newsletter">
            <div class="container">
                <h1>Subscribe to our Newsletter</h1>
                <form>
                    <input type="email" placeholder="Enter Email">
                    <button type="submit" class="button_1">Subscribe</button>
                     </form>
            </div>
        </section>
        
        <section id="main">
        <div class="container">
            <article id="main-col">
                <h1 class="page-title">About Me</h1>
                <p>
                   In turpis purus, suscipit sed lectus
                   lacinia, blandit tristique neque. Suspendisse 
                   tincidunt et tortor eu lobortis. Suspendisse potenti.
                   Proin lobortis porta nisl, semper pretium dui accumsan vel.
                   Aenean ultrices lectus id lacus sollicitudin, at consequat 
                   lorem lacinia. Fusce lacinia hendrerit augue, quis vehicula arcu
                   rutrum vel. Phasellus eget tempus odio.
                </p>
                <p class="dark">
                  In turpis purus, suscipit sed lectus
                   lacinia, blandit tristique neque. Suspendisse 
                   tincidunt et tortor eu lobortis. Suspendisse potenti.
                   Proin lobortis porta nisl, semper pretium dui accumsan vel.  
                </p>
            </article>
            
            
           <aside id="sidebar">
               <div>
                <h3>What I Do</h3>
                <p>In turpis purus, suscipit sed lectus
                   lacinia, blandit tristique neque. Suspendisse 
                   tincidunt et tortor eu lobortis. Suspendisse potenti.
                   Proin lobortis porta nisl, semper pretium dui accumsan vel. 
                </p>
                </div>
            </aside>
        </div>
        </section>
        <footer>
            <p>Daniel Web Design, Copyright &copy; 2017</p>
        </footer>
    </body>
     
      
  </html>

Answer 1

在这里，我从选择器旁边移除。

＆＃13;

body{
    font-family:exo;
    font-size:15px;
    line-height:1.5;
    padding:0;
    background-color:#f4f4f4;
    
     
    }

.container{
width:80%;
margin:auto;
overflow:hidden;

}

.button_1{
    height:38px;
    background:#32cd32;
    border:0;
    padding-left:20px;
    padding-right:20px;
    color:#ffffff;
}

.dark{
    padding:15px;
    background:black;
    color:#ffffff;
    margin-top:10px;
    margin-bottom:10px;
}

header{
    background:black;
    color:#ffffff;
    padding-top:30px;
    min-height:70px;
    border-bottom:#32cd32 3px solid;
}

header a{
    color:#ffffff;
     text-decoration:none;
     text-transform: uppercase;
     font-size: 16px;
    
}

ul{
    margin:0;
        padding:0;
        
}




header li{
    float:left;
    display:inline;
    padding: 0 20px 0 20px;
}

header #branding{
    float:left;
}

header #branding h1{
    margin:0;
}

header nav{
    float:right;
    margin-top:10px;
}

header .highlight, header .current a{
    
    font-weight:bold;
}    

header a:hover{
    color:#cccccc;
    font-weight:bold;
}

#showcase{
    min-height:400px;
     background:url('../IMG/Website1.jpg') no-repeat 0 -175px;
     text-align:center;
     color:white;
}

#showcase h1{
    margin-top: 90px;
    font-size:55px;
    margin-bottom:10px;
}

#showcase p{
font-size:20px;
}

#newsletter{
    padding:15px;
    color:#ffffff;
    background:black;
    
}

#newsletter h1{
float:left;

}

#newsletter form{
    float:right;
    margin-top:15px;
}

#newsletter input[type="email"]{
    padding:4px;
    height:25px;
    width:250px;
}

#boxes{
    margin-top:20px;
}

#boxes .box{
    float:left;
    width:30%;
    text-align:center;
    padding:10px;
}

#boxes .box img{
    width:200px;
}



#sidebar{
    float:right;
    width:30%;
    margin-top:10px;
}
    
aside #sidebar  .quote input, aside#sidebar .quote textarea{
 width:90px;
 padding:5px;
}



    article#main-col{
    float:left;
    width:65%;
    }    

    ul #contact li{
        list-style:none;
        padding:20px;
        border:#cccccc solid 1px;
        margin-bottom:5px;
        background:#e6e6e6;
    }
        
    
    
    
    
footer{
    padding:20px;
    margin-top:20px;
    color:#ffffff;
    background-color:black;
    text-align:center;
}



@media(max-width: 768px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  article#main-col,
  aside#sidebar{
    float:none;
    text-align:center;
    width:100%;
  }

  header{
    padding-bottom:20px;
  }

  #showcase h1{
    margin-top:40px;
  }

  #newsletter button, .quote button{
    display:block;
    width:100%;
  }

  #newsletter form input[type="email"], .quote input, .quote textarea{
    width:100%;
    margin-bottom:5px;
  }
}

＆＃13;

<header>
            <div class="container">
                <div id="branding">
                    <h1><span class="highlight">Daniel's</span> Web Design Resume</h1>
                </div>
                <nav>
                    <ul>
                        <li><a href ="index.html">Home</a></li>
                        <li class="current"><a href ="about.html">About</a></li>
                        <li><a href ="contact.html">Contact</a></li>
                        
                    </ul>
                </nav>
            </div>
        </header>
       
        
        <section id="newsletter">
            <div class="container">
                <h1>Subscribe to our Newsletter</h1>
                <form>
                    <input type="email" placeholder="Enter Email">
                    <button type="submit" class="button_1">Subscribe</button>
                     </form>
            </div>
        </section>
        
        <section id="main">
        <div class="container">
            <article id="main-col">
                <h1 class="page-title">About Me</h1>
                <p>
                   In turpis purus, suscipit sed lectus
                   lacinia, blandit tristique neque. Suspendisse 
                   tincidunt et tortor eu lobortis. Suspendisse potenti.
                   Proin lobortis porta nisl, semper pretium dui accumsan vel.
                   Aenean ultrices lectus id lacus sollicitudin, at consequat 
                   lorem lacinia. Fusce lacinia hendrerit augue, quis vehicula arcu
                   rutrum vel. Phasellus eget tempus odio.
                </p>
                <p class="dark">
                  In turpis purus, suscipit sed lectus
                   lacinia, blandit tristique neque. Suspendisse 
                   tincidunt et tortor eu lobortis. Suspendisse potenti.
                   Proin lobortis porta nisl, semper pretium dui accumsan vel.  
                </p>
            </article>
            
            
           <aside id="sidebar">
               <div>
                <h3>What I Do</h3>
                <p>In turpis purus, suscipit sed lectus
                   lacinia, blandit tristique neque. Suspendisse 
                   tincidunt et tortor eu lobortis. Suspendisse potenti.
                   Proin lobortis porta nisl, semper pretium dui accumsan vel. 
                </p>
                </div>
            </aside>
        </div>
        </section>
        <footer>
            <p>Daniel Web Design, Copyright &copy; 2017</p>
        </footer>

＆＃13;

除了酒吧不去我想要的地方

1 个答案: