重新安排HTML页面

时间：2016-01-13 17:14:04

标签： html css

正如您从我的代码中看到的那样，4个部分被堆积起来。如果有人能帮助我在页面上均匀地传播它们会很棒。这四个部分是：游戏历史，雅达利，其他游戏，未来游戏。

＆＃13;
＆＃13; 
.jumbotron h1 {
  color: #ffffff;
  font-size: 150px;
  font-family: Sans-serif;
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
}
.jumbotron {
  background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
  position: absolute;
  left: 0px;
  top: 100px;
  height: 350px;
  display: block;
}
.nav li {
  display: inline;
  text-align: center;
  color: #ff0000;
  font-size: 50px;
  bottom: 350px;
  padding-left: 35px;
  font-family: Sans-serif;
}
.page ul {
  color: #000000;
  font-size: 20px;
  font-family: Calibri;
  padding-left: 75px;
  .page ul li {
    display: inline;
  }
  .page a {
    color: #000000;
    font-size: 15px;
    font-family: Calibri;
    padding-left: 70px;
  }
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="home.css">
  <title>Gaming T,N & B</title>
</head>

<div class="jumbotron">
  <div class="container">
    <h1>Gaming: Then, Now & Beyond</h1>
  </div>
</div>


<body>


  <div class="nav">
    <div class="container">
      <ul>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">History of Gaming</a>
        </li>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Atari</a>
        </li>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Other Games</a>
        </li>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Future</a>
        </li>
      </ul>
    </div>
  </div>


  <style>
    div.img {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 180px;
    }
    div.img:hover {
      border: 1px solid #777;
    }
    div.img img {
      width: 100%;
      height: auto;
    }
    div.desc {
      padding: 15px;
      text-align: center;
    }
  </style>
  </head>

  <body>

    <div class="img">
      <a target="_blank" href="history.png">
        <img src="history.png" alt="The History of Gaming" width="300" height="200">
      </a>
      <div class="desc">
        <div class="page">
          <div class="container">
            <div>
              <div>
                <div>
                  <h3>History of Gaming</h3>
                  <ul>
                    <li>What is gaming?</li>
                    <li>Pong</li>
                    <li>Technology Boom</li>
                  </ul>
                  <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn more about the history of gaming</a>
                  </p>
                </div>
              </div>
            </div>

            <div class="img">
              <a target="_blank" href="atari.jpg">
                <img src="atari.jpg" alt="Atari" width="600" height="400">
              </a>
              <div class="desc">
                <div>
                  <h3>Atari</h3>
                  <ul>
                    <li>40 years of fun</li>
                    <li>Who is Nolan Bushnell</li>
                    <li>Bought & Sold</li>
                  </ul>
                  <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Learn more about Atari</a>
                  </p>
                </div>
              </div>
            </div>

            <div class="img">
              <a target="_blank" href="xbox_ps1.jpg">
                <img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
              </a>
              <div class="desc">
                <div>
                  <h3>Other Games</h3>
                  <ul>
                    <li>PC</li>
                    <li>Xbox</li>
                    <li>PlayStation</li>
                  </ul>
                  <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn more about other games</a>
                  </p>
                </div>
              </div>
            </div>

            <div class="img">
              <a target="_blank" href="future_ocu.jpg">
                <img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
              </a>
              <div class="desc">
                <div>
                  <h3>Future</h3>
                  <ul>
                    <li>Gaming in society</li>
                    <li>Who is driving who?</li>
                    <li>CrowdFunding</li>
                  </ul>
                  <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Learn about future gaming</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
      </iframe>


  </body>

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

非常感谢

亚当

2 个答案:

答案 0 :(得分：0)

您的HTML代码结构无效。我刚刚修改过它。 head标记打开了两次，style被放置在正文中。 body标记也多次打开，并且某些div标记未关闭。

.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 100px;
height: 350px;
display: block;
}
.nav li {
display: inline;
text-align: center;
color: #ff0000;
font-size: 50px;
bottom: 350px;
padding-left: 35px;
font-family: Sans-serif;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
.page ul li {
display: inline;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
}
<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="home.css">
      <title>Gaming T,N & B</title>
      <style>
         div.img {
         margin: 5px;
         border: 1px solid #ccc;
         float: left;
         width: 180px;
         }
         div.img:hover {
         border: 1px solid #777;
         }
         div.img img {
         width: 100%;
         height: auto;
         }
         div.desc {
         padding: 15px;
         text-align: center;
         }
      </style>
   </head>
   <body>
      <div class="jumbotron">
         <div class="container">
            <h1>Gaming: Then, Now & Beyond</h1>
         </div>
      </div>
      <div class="nav">
         <div class="container">
            <ul>
               <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">History of Gaming</a>
               </li>
               <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Atari</a>
               </li>
               <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Other Games</a>
               </li>
               <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Future</a>
               </li>
            </ul>
         </div>
      </div>
      <div class="img">
         <a target="_blank" href="history.png">
         <img src="history.png" alt="The History of Gaming" width="300" height="200">
         </a>
      </div>
      <div class="desc">
         <div class="page">
            <div class="container">
               <div>
                  <div>
                     <div>
                        <h3>History of Gaming</h3>
                        <ul>
                           <li>What is gaming?</li>
                           <li>Pong</li>
                           <li>Technology Boom</li>
                        </ul>
                        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn more about the history of gaming</a>
                        </p>
                     </div>
                  </div>
               </div>
               <div class="img">
                  <a target="_blank" href="atari.jpg">
                  <img src="atari.jpg" alt="Atari" width="600" height="400">
                  </a>
                  <div class="desc">
                     <div>
                        <h3>Atari</h3>
                        <ul>
                           <li>40 years of fun</li>
                           <li>Who is Nolan Bushnell</li>
                           <li>Bought & Sold</li>
                        </ul>
                        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Learn more about Atari</a>
                        </p>
                     </div>
                  </div>
               </div>
               <div class="img">
                  <a target="_blank" href="xbox_ps1.jpg">
                  <img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
                  </a>
                  <div class="desc">
                     <div>
                        <h3>Other Games</h3>
                        <ul>
                           <li>PC</li>
                           <li>Xbox</li>
                           <li>PlayStation</li>
                        </ul>
                        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn more about other games</a>
                        </p>
                     </div>
                  </div>
               </div>
               <div class="img">
                  <a target="_blank" href="future_ocu.jpg">
                  <img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
                  </a>
                  <div class="desc">
                     <div>
                        <h3>Future</h3>
                        <ul>
                           <li>Gaming in society</li>
                           <li>Who is driving who?</li>
                           <li>CrowdFunding</li>
                        </ul>
                        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Learn about future gaming</a>
                        </p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
      </iframe>
   </body>
</html>

由于结构无效，CSS代码无法正常工作，现在尝试布局文档，现在应该可以正常工作。

答案 1 :(得分：0)

如果你对该部分采用相同的技术，詹姆斯的答案可能仍然有效。由于这在技术上是他的答案，我将提供替代解决方案。你可以将它添加到你的CSS：

while ($row = mysql_fetch_array($result)) {
  ... // existing code goes here
  $rowSum = 0;
  foreach($pointVals as $colName => $val)
  {
    if(isset($row[$colName]) && !empty($row[$colName]))
      $rowSum += $val;
  }
  ... // do stuff with $rowSum here
}

或者，如果您只想将该规则应用于该部分，则可以为该UL提供ID并将其应用于CSS中的ID。

我还建议将h1部分向下移动到身体内。

相关问题
最新问题