在页面周围挣扎着定位div

时间：2018-01-29 09:08:47

标签： html css

我已经做了好几天了，觉得我已经尝试了一切。不确定它是否只是我想要的小东西，或者我是否完全偏离轨道。我需要在页面上定位我的div，就像在这张图片enter image description here中我到目前为止所获得的代码就是这样。

HTML：

＆＃13;
＆＃13; 
    body {
      margin: 0px;
      padding: 0px;
      width: 1024px;
      height: 768px;
      float: left;
    }

    .pagebanner {
      height: 200px;
      width: 1024px;
    }

    .header {
      background-color: aqua;
      height: 50px;
      margin-top: 0px;
      padding-left: 200px
    }

    .navbar {
      background-color: brown;
      float: left;
      height: 768px;
    }

    .subheading {
      background-color: chartreuse;
      padding-left: 420px;
      margin-top: 0px
    }

    .content {
      background-color: crimson;
      height:
    }

    .footer {
      background-color: darkgreen;
      padding: 20px;
      margin-bottom: 0px
    }
＆＃13; 
    <html>

    <head>
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
      <title>The Club Site</title>
    </head>

    <body>
      <div wrapper="mainwrapper">
        <div class="pagebanner"><img src="HTML Pract A/images/banner.jpg" alt="PageBanner" width="1024px" height="200px">
          <div class="navbar">
            <ul>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="header">
            <h1 class="header">The Club Site</h1>
          </div>
          <div class="subheading">
            <h2>Members Prices</h2>
          </div>
          <div class="content">
          </div>
          <div class="footer">
            <p>blah blah blah</p>
          </div>
        </div>
    </body>

    </html>
＆＃13;
＆＃13;
＆＃13;

对此的任何帮助将不胜感激。第一次尝试使用HTML，我没有太多运气。

3 个答案:

答案 0 :(得分：2)

在这个示例中，我尝试向您介绍bootstrap framework，bootstrap可以帮助您用更少的时间制作大量的html模板，尝试阅读此框架的文档，您将弄清楚它是如何容易的。< / p>

  

祝你好运，并且在你询问有关它的事情之前总是这样，   我相信你会得到解决的问题。

此示例基于bootstrap 4框架 

.nav {
  background-color: #ccc;
  min-height: 500px;
}

.header {
  background-color: #eee;
}

.sub-header {
  background-color: yellow;
  margin-bottom: 15px;
}

.item {
  border: solid 1px #ccc;
  text-align: center;
  height: 150px;
  margin-bottom: 15px;
}
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>The Club Site</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <h1>header</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-4 nav">
        <h3>nav</h3>
      </div>
      <div class="col-8">
        <div class="row">
          <div class="col header">
            <h3>The Club Site</h3>
          </div>
        </div>
        <div class="row">
          <div class="col sub-header">
            <h6>sub header</h6>
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <div class="item">
              <h4>item 1</h4>
            </div>
          </div>
          <div class="col-4">
            <div class="item">
              <h4>item 2</h4>
            </div>
          </div>
          <div class="col-4">
            <div class="item">
              <h4>item 3</h4>
            </div>
          </div>
          <div class="col-4">
            <div class="item">
              <h4>item 4</h4>
            </div>
          </div>
          <div class="col-4">
            <div class="item">
              <h4>item 5</h4>
            </div>
          </div>
          <div class="col-4">
            <div class="item">
              <h4>item 6</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

答案 1 :(得分：0)

<header>Header</header>
<div id="main">
  <article>
    <div class="my-container">
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
      <div class="image">
        <img src="https://www.placebacon.net/400/300">
      </div>
    </div>

  </article>
  <nav>Nav</nav>
</div>
<footer>Footer</footer>
<style>
  * {
    box-sizing: border-box; 
  }
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
  }
  #main {
    display: flex;
    flex: 1;
  }
  #main > article {
    flex: 1;
    order: 1;
  }
  #main > nav, 
  #main > aside {
    flex: 0 0 20vw;
  }
  #main > nav {
    background: #D7E8D4;
    order: 3;
  }

  header, footer {
    background: yellowgreen;
    height: 20vh;
  }
  header, footer, article, nav, aside {
    padding: 1em;
  }

  .my-container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start; /* pack wrapping lines to the top */
  width: 100%;
  height: 300px;
}

.image {
  flex: 0 0 30%;
  margin: 5px;
}

img {enter code here
  max-width: 100%;
}
</style>

答案 2 :(得分：0)

  

注意：尝试学习而不是复制＆amp;粘贴它，开始尝试再次编写代码。

我更改并在您的代码中添加一些css类，因此请注意旧版本与新css和html文件之间的不同。

说明：要开始为您的风格建模，您需要将所有需要的部分分开;例如，我们需要：

  1. 标题
  2. 标题＆gt;图像
  3. main＆gt; NAV
  4. main＆gt;含量
  5. main＆gt;内容＆gt;头
  6. main＆gt;内容＆gt;副标题
  7. main＆gt;内容＆gt;区域
  8. main＆gt;内容＆gt;区域＆gt;项目
  9. main＆gt;内容＆gt;区域＆gt;项目＆gt;项目
  10. 等...

    11. 然后开始html他们，插入你的div或你想要的，最后一步是用css管理它们。

    body {
  margin: 0px;
  padding: 0px;
}

.mainwrapper {
  width: 1024px;
  margin: 0 auto;
}

.pagebanner {
  height: 250px;
  margin: 0;
}

.pagebanner img {
  width: 100%;
  height: 100%;
}

.main {
  margin: 0;
}

.navbar {
  background-color: brown;
  min-height: 500px;
  width: 20%;
  float: left;
}

.navbar li {
  list-style: none;
  margin-bottom: 15px;
}

.navbar a {
  color: #fff;
  font-size: 20px;
}

.content {
  width: 80%;
  float: left;
  padding: 0;
  min-height: 500px;
}

.header {
  background-color: #000;
  text-align: center;
}

.header h1 {
  color: #fff;
  margin: 0;
}

.subheading {
  background-color: #f8d631;
  text-align: center;
}

.subheading h2 {
  background-color: #f8d631;
  margin: 0;
}

.area h3 {
  margin: 0;
  text-align: center;
}

.item {
  width: 33.33333333333333%;
  float: left;
  text-align: center;
}

.item div {
  padding: 0 15px;
}

.item img {
  height: 150px;
  width: 100%;
}

.footer {
  background-color: darkgreen;
}
    <!DOCTYPE html>
<html>

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

<body>
  <div class="mainwrapper">
    <div class="pagebanner">
      <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
    </div>

    <div class="main">
      <div class="navbar">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Home</a>
          </li>
        </ul>
      </div>

      <div class="content">
        <div class="header">
          <h1>The Club Site</h1>
        </div>
        <div class="subheading">
          <h2>Members Prices</h2>
        </div>
        <div class="area">
          <h3>discounted Items</h3>

          <div class="items">
            <div class="item">
              <div>
                <img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
                <h4>name - %200</h4>
              </div>
            </div>
            <div class="item">
              <div>
                <img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
                <h4>name - %200</h4>
              </div>
            </div>
            <div class="item">
              <div>
                <img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
                <h4>name - %200</h4>
              </div>
            </div>
            <div class="item">
              <div>
                <img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
                <h4>name - %200</h4>
              </div>
            </div>
            <div class="item">
              <div>
                <img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
                <h4>name - %200</h4>
              </div>
            </div>
            <div class="item">
              <div>
                <img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
                <h4>name - %200</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

相关问题
最新问题