代码之家 › 专栏 › 技术社区 › HappyHands31

如何创建具有静态标题的响应式网页?

grid-layout containers responsive-design css html

HappyHands31 · 技术社区 · 10 年前

我对我刚刚创建的标题非常满意:

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

我知道这是可以解决的,但会有太多的空白,我真的只需要导航栏和下面的内容就可以了。因此,当页面被压缩到移动时,它应该是这样的:

请注意,徽标和页眉不会随着页面的大小而改变。如果你知道如何获得这种效果,请帮忙。我想可能是用集装箱,但我不确定。非常感谢。

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 回复 | 直到 10 年前

Adnan Akram 10 年前

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

试试这个

CHETAN SELUKAR 10 年前

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

#container{ 
    margin-top: 200px;
}

CHETAN SELUKAR 10 年前

class=“navbar navbar default navbar fixed top”在引导程序中修复标题

HappyHands31 10 年前

我在标题中的所有内容都保持不变,下面是我所做的更改。

HTML:

<header id="header-wrap">
<div id="fixed">
<div class="row"><!--first row-->
    <div id="images">


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



        <img id="text" src="images/header.png" alt="header"
         height="250" width="880">

    <div id="socialIcons">

        <div  class="social">
        <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>
 </div>
</div>
</header>

CSS:

*{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;}

因此,我在HTML中所做的更改是给标题一个ID,“标题包装”,将类“logo”、“text”和“col-2”更改为ID的“logo”、“文本”和“socialIcons”,然后将“社会图标”div中的所有类更改为类“social”(摆脱social_twitter)。

在CSS中,我所做的更改是添加了“#header wrap”、“fixed”、“.logo img”、“img#logo”、“img#text”、“#images”、“#socialIcons”和“.fix”。

这些更改将三个元素——徽标、文本图像(骑士篮球学院)和社交媒体链接——放在标题中,用position:relative和div(#fixed)表示position:fixed。我不确定哪一个选择器实际上会导致所有三个都保持不变,但不管怎样,添加这些更改都会导致我的头变为静态。