2
我真的很滿意我剛剛創建的標題：
如何使用靜態標題創建響應式Web頁面？
但不幸的是，此項目的目標是使用行和列創建響應式網站。我們被指示使用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 [email protected] 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>©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;
}
}
首先設計移動設備會更好。這有助於您專注於重要的事情，並且可以在更多空間變得可用時調整佈局。 – MrMisterMan
這實際上很有意義，這只是我在課堂上被教導的方式。雖然也許這就是爲什麼她首先將/ *手機放入CSS中的原因* /評論？我不確定 - 所有的導航，旁邊和網格都是她的代碼。 – HappyHands31