Question

我需要标题主页和页脚有855px，浮动左边是570px，右边是浮点数255px。如果没有进入其他部分，它就不会正确排列。

enter image description here

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
        <title>BrightIdeas</title>
            <link rel="stylesheet"  href="  C:\Users\Brandon\Desktop\html\css\style.css"/>
            <link rel="stylesheet" href="C:\Users\Brandon\Desktop\html\css\reset.css"/>
            <link rel="javascript" href="C:\Users\Brandon\Desktop\html\css\js\app.js">
    </head>

<body>
<div id="wrapper"> 
        <div id="header">
            <header>
                <div class="container">
                    <h1>BrightIdeas</h1>

                    <nav><a href="signUp.html">Sign Up!</a> | <a href="faq.html">FAQ</a> | <a href="#">Support</a>
                    </nav>                         

                </div>
            </header>
        </div>  

<div id="content">
    <main>
        <div class="container">

            <div  id="left">
                    <h2>BrightIdeas will change your life!</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                    <h3>Here's why you need bright ideas</h3>
                    <ul><li>It fits your lifestyle</li>
                    <li>It's awesome</li>
                    <li>We say so</li></ul>
            </div>
                <div id="right">
                    <img src="C:\Users\Brandon\Desktop\html\brightIdeas\images\brightidea.png" alt="an image of a lightbulb"/>
                </div>          
            </div>
    </main>
</div>

<div id="footer">
    <footer>
            <div id="contact">
                <h5>Contact Us</h5>
                <p>BrightIdeas</p>
                <p>666 Sixth Street</p>
                <p>Amherst, NY 12345</p>
            </div>


            <div id="sitemap">
                <h5>Sitemap</h5>
                <ul><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Careers</a></li></ul>
            </div>
    </footer>
</div>

</div>
</body> 
</html>

＆＃13;

＆＃13; 这是我的样式表。香港专业教育学院多次改变它，所以它有点混乱＃身体 { 保证金：0自动; 保证金底部：120px; 身高：100％; 宽度：100％; }

#main{
    min-width:855px;
    overflow: auto;

}
#header {
     background: white;
     min-width:855;
     overflow:auto;
     height: 70px;
     padding:20px 20px;

 }
div img{
    float:right;

}
div h1{
    float:left;
    width:570px;
    font-style: italic;
    font-size: 250%;
    overflow: auto;
}
div nav{
    overflow: auto;
    float:right;
    width:285px;

}
#content {
/* Height of the footer element */
    padding-bottom:120px;

}


}
#footer {
    /*yellow footer*/
      position:fixed;
      background: #f9e933;
      min-width:855px;
      bottom: 0;
      height:120px;
 }
 #contact{
     float:left;
     width:570px;
     background: #f9e933;
     height:120px;
     padding
 }
 #sitemap {
     float:right;
     width:285px;
     background: #f9e933;
     height:120px;
  }

  #left{
    margin: 20px;
    float:left;
    width:570;
    overflow: auto;
  }

   #right{
      float:right;
      width:285;
      overflow:auto;
   }
   .container {
      max-width:855;
      margin: auto;
      column-count: 2;
  }
    #wrapper {
    min-height: 100%;
    position: relative;
    width:855px;

  }

使用CSS的HTML。不要格式化我想要的方式

0 个答案: