如何使用静态标头创建响应式网页？

时间：2016-02-09 07:36:37

标签： html css responsive-design containers grid-layout

我对刚刚创建的标题非常满意：enter image description here

但遗憾的是，该项目的目标是使用行和列创建响应式网站。我们被指示使用12列网格系统。第一行包括导航栏上方的所有内容，徽标和标题占据前10列，社交媒体链接占据最后2列。最初，标题（“骑士篮球学院”）和社交媒体链接应该在页面调整大小时包裹在徽标下面。但现在我正在改变主意，因为结果是一场灾难：enter image description here

我知道可以解决这个问题，但是会有太多的空白区域，我真的只需要导航栏和它下面的内容来反应。因此，当页面缩小到移动设备时，它应如下所示：enter image description here enter image description here enter image description here

请注意，在调整页面大小时，徽标和标题不会更改。如果您知道如何获得此效果，请提供帮助。我想它可能是一个容器，但我不确定。谢谢！

HTML：

<!DOCTYPE html>
  <html>
  <head>
    <title>Knights Basketball Academy</title>
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <link href="styles.css" type="text/css" rel="stylesheet">
  </head>

<body>
  <header>
    <div class="row">
      <!--first row-->
      <div class="col-10">

        <div class="logo">
          <a href="index.html">
            <img src="images/logo2.png" alt="logo" height="250" width="250">
          </a>
        </div>

        <div class="header">
          <img src="images/header.png" alt="header" height="250" width="880">
        </div>
      </div>
      <div class="col-2">
        <div class="social_twitter">
          <a href="#"><img src="images/twitter.png"></a>
        </div>
        <div class="social">
          <a href="#"><img src="images/facebook.png"></a>
        </div>
        <div class="social">
          <a href="#"><img src="images/youtube.png"></a>
        </div>
        <div class="social">
          <a href="#"><img src="images/instagram.png"></a>
        </div>

      </div>
    </div>
    <!--ends first row-->
  </header>


  <div class="navigation">
    <nav>
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="roster.html">ROSTER</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">EVENTS</a></li>
        <li><a href="#">CALENDAR</a></li>
      </ul>
    </nav>
  </div>


  <div class="row">
    <!--second row-->

    <div class="col-3 col-m-3">
      <img src="images/image1.jpg" alt="Team Photo">
    </div>

    <div class="col-6 col-m-9">
      <h1>Welcome</h1>

      <p>Knights Basketball Academy is a non-profit amateur basketball club focused on individual player development and team concepts. With our elite coaching staff, we are confident that all players can achieve their own maximum potential while maintaining
        excellent character and integrity.
        <br>
        <br> Contact us at info@knightsbasketballacademy.com to learn how to become a Knight today.</p>

    </div>

    <div class="col-3 col-m-12">
      <aside>
        <h2>What?</h2>
        <p>This is information about the website</p>
        <h2>Where?</h2>
        <p>This website was created in St. Louis, MO.</p>
        <h2>How?</h2>
        <p>Visit our contact page for more information.</p>
      </aside>
    </div>

  </div>
  <!--ends second row-->

  <footer>
    <p>&copy;2016 KNIGHTS BASKETBALL ACADEMY</p>
  </footer>
</body>
</html>

CSS：

* {
  box-sizing: border-box;
}

.row:after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 10px;
}


/*global styles*/

.knights {
  margin-top: 0px
}

.logo {
  float: left;
  margin-left: 10px;
}

.header {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.social {
  float: left;
  margin-left: 2px;
  margin-right: 2px;
}

.social_twitter {
  float: left;
  margin-left: 80px;
}

.banner {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.navigation {
  text-align: center;
  background-color: #000000;
  padding: 0px;
}

#banner {
  text-align: center;
  margin-bottom: 0px;
}

a {
  text-decoration: none;
  color: white;
}

a:visited {
  color: white;
}

nav {
  margin: auto;
  height: auto;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: Arial;
}

nav li {
  padding: 10px;
  margin-bottom: 7px;
  background-color: #000000;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: block;
  margin-left: 30px;
  margin-right: 30px;
}

nav li:hover {
  background-color: #8E8E8E;
}

aside {
  background-color: #C5202A;
  padding: 15px;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

footer {
  background-color: #000000;
  color: #fff;
  text-align: center;
  font-size: 0.9em;
  padding: 15px;
}

img {
  max-width: 100%;
  height: auto;
}


/*mobile phones first*/

[class*="col-"] {
  width: 100%;
}


/*tablet*/

@media only screen and (min-width:600px) {
  /*12 column grid*/
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-4 {
    width: 33.33%;
  }
  .col-m-5 {
    width: 41.66%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-7 {
    width: 58.33%;
  }
  .col-m-8 {
    width: 66.66%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-10 {
    width: 83.33%;
  }
  .col-m-11 {
    width: 91.66%;
  }
  .col-m-12 {
    width: 100%;
  }
  nav {
    height: auto;
  }
  nav li {
    display: inline-block;
  }
}

@media only screen and (min-width:768px) {
  /*12 column grid*/
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
    height: 260px;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
  nav {
    height: auto;
  }
  nav li {
    display: inline-block;
    text-align: center;
  }
}

4 个答案:

答案 0 :(得分：2)

.logo omg{display: block; max-width: 100%; height: auto;}

试试这个

答案 1 :(得分：1)

#header-wrap {
    position: fixed;
    height: 200px;
    top: 0;
    width: 100%;
    z-index: 100;
}

#container{ 
    margin-top: 200px;
}

答案 2 :(得分：0)

class =“navbar navbar-default navbar-fixed-top”在bootstrap中修复标题

答案 3 :(得分：0)

我在标题中找到了所有内容以保持固定，这是我所做的更改。

HTML：

*{box-sizing:border-box;}

.row:after{content:"";
       clear:both;
       display:block;}

[class*="col-"]{float:left;
            padding:10px;}

/*global styles*/   
#header-wrap {position:relative;
              top:0;
              width:100%;
              min-height:260px;
              height:100%;
              z-index:9999;
              background:#fff;}

#fixed {position:fixed;
    width:100%;
    top:0;
    background-color:#fff;}

.knights {margin-top:0px}

.logo img {max-width:100%;
           height:auto;}

img#logo {width:300px;
          float:left;
          margin-left:10px;}

img#text {margin-top:50px;
          float:left;
          margin-left:70px;
          width:650px;}

#images {width:1400px;}

#socialIcons {padding-top:10px;
              margin-left:1264px;}

.fixed{position:fixed;
       width:100%;
       top:0;
       background-color;}  

.social {float:left;
        margin-left:2px;
        margin-right:2px;}

.banner {display: inline-block;
         margin-left:auto;
         margin-right:auto;}


.navigation {text-align:center;
             background-color:#000000;
             padding:0px;
             margin-top:30px;}

#banner {text-align:center;
         margin-bottom: 0px;}

a{text-decoration:none;
  color:white;}

a:visited {color:white;}

nav{margin:auto;
    height:auto;}

nav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 font-family:Arial;}

nav li {
    padding: 10px;
    margin-bottom: 7px;
    background-color :#000000;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    display:block;
    margin-left:30px;
    margin-right:30px;}


nav li:hover {
     background-color: #8E8E8E;}

aside{background-color:#C5202A;
      padding:15px;
      color:#fff;
      text-align:center;
      font-size:1.1em;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.24);}

footer{background-color:#000000;
      color:#fff;
      text-align:center;
      font-size:0.9em;
      padding:15px;}

img{max-width:100%;
    height:auto;}

/*mobile phones first*/
[class*="col-"]{
width:100%;
}

/*tablet*/
@media only screen and (min-width:600px)
{

/*12 column grid*/

.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}

nav {height:auto;}

nav li {display:inline-block;}

}   

@media only screen and (min-width:768px)
{   

/*12 column grid*/

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;height:260px;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}  

nav {height:auto;}

nav li {display:inline-block;
    text-align:center;}  

}


div.clear { clear:both;}

CSS：

{{1}}

因此，我在HTML中所做的更改为标题提供了ID，＆＃34; header-wrap＆＃34;，更改了类＆＃34; logo＆＃34;，＆＃34; text＆＃34;和＆＃34; col-2＆＃34;到ID＆＃34; logo＆＃34;，＆＃34; text＆＃34;和＆＃34; socialIcons＆＃34;，然后更改＆＃34;社交图标＆＃34; div to the class＆＃34; social＆＃34; （摆脱social_twitter）。

在CSS中，我所做的更改是添加＆＃34;＃header-wrap＆＃34;，＆＃34; fixed＆＃34;，＆＃34; .logo img＆＃34;，＆＃34; img＃logo＆＃34;，＆＃34; img＃text＆＃34;，＆＃34;＃images＆＃34;，＆＃34; #socialIcons＆＃34;，＆＃34; .fixed＆＃34;。

这些更改将三个元素 - 徽标，文本图像（骑士篮球学院）和标题包中的社交媒体链接放置在一个位置：relative和一个div（#fixed）的位置：fixed。我不确定哪个选择器实际上导致所有三个都保持固定，但无论如何，添加这些更改会导致我的标头变为静态。

相关问题
最新问题