响应式网站：错误的徽标和横幅包装、导航栏
Responsive Website: Faulty Logo and Banner Wrap, Navigation Bar
我的响应式网站有几个问题。我的第一个问题很简单：横幅包裹在徽标下方。
我想要实现的是类似于 St. Louis Zoo 网站的内容，其中徽标和横幅图像（乌龟）在页面变小时保持在同一行。他们是怎么做到的？
我的第二个问题是，随着页面不断调整大小，导航栏变得草率。如您所见，"contact" link 距离住宅、项目和商店 link 太近了。
我是响应式网页设计的新手，我想知道 - 是否可以在全局样式中找到导航栏的问题，或者我是否需要在平板电脑部分创建更多 CSS 代码？谢谢你。完整代码如下。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Artistic Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<header>
<h1>
<a href="index.html">
<img class="banner" src="images/Artistic_Logo2.png" alt="logo">
</a>
<img class="banner" src="images/Artistic_Banner2.png" alt="banner">
</h1>
</header>
</div>
<div class="navigation">
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="projects.html">PROJECTS</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-3 col-m-3">
<img src="images/image2.jpg" alt="image">
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id,
cu sit etiam iisque equidem.</p>
<img src="images/image3.jpg" alt="image">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id,
cu sit etiam iisque equidem.</p>
<img src="images/image4.jpg" alt="image">
<h1>Header 3</h1>
<p>Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id,
cu sit etiam iisque equidem.</p>
</div>
<div class="col-6 col-m-9">
<h1>Header 1</h1>
<p class="p1">Lorem ipsum dolor sit amet, vocibus incorrupte
dissentiet qui id,
cu sit etiam iisque equidem.</p>
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id,
cu sit etiam iisque equidem.</p>
<p>Resize the browser window to see how the content responds to
the resizing.</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><!--closes row-->
<footer>
<p>©2016 WEBSITE</p>
</footer>
</body>
</html>
CSS:
*{box-sizing:border-box;}
.row:after{content:"";
clear:both;
display:block;}
[class*="col-"]{float:left;
padding:15px;}
/*global styles*/
.banner {display: inline-block;
margin-left:auto;
margin-right:auto;}
.p1 {margin-bottom: 400px;}
.navigation {text-align:center;
background-color:#000000;
padding:11px;}
#banner {text-align:center;
margin-bottom: 40px;}
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:#19A5DE;
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:#19A5DE;
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;}
}
@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%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
nav{height:auto;}
nav li{display:inline;
text-align:center;}
编辑：我无法将徽标和横幅组合成一张图片的原因是我需要徽标在主页上保持超link页。
在行动
你的两个解决方案在一个地方起作用：
.wrapper{
width: 400px;
margin: 0 auto;
}
#banner{
margin: 0 auto 10px;
}
#banner header h1{
margin: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#banner header h1 .top-sections{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.navigation{
text-align:center;
background-color:#000000;
padding:11px;
}
nav{
margin:auto;
height:auto;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
margin: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
justify-content: space-around;
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);
}
nav li:hover{
background-color: #8E8E8E;
}
nav a{
text-decoration:none;
color:white;
font-size: 10px;
}
nav a:visited{
color:white;
}
<div class="wrapper">
<div id="banner">
<header>
<h1>
<a class="top-sections" href="index.html">
<img class="banner" src="https://placehold.it/73x50/000000/FFFFFF?text=Logo" alt="logo">
</a><!--
--><img class="top-sections banner" src="https://placehold.it/325x50/000000/FFFFFF?text=Banner" alt="banner">
</h1>
</header>
</div>
<div class="navigation">
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="projects.html">PROJECTS</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
第一个问题的可能解决方案
您的图片和锚点是内联元素。如果屏幕尺寸足够大，它们只会并排显示。您可以在图像周围使用 div，并给它们一个 .col-* 类名，以使用您的网格系统限制它们的宽度。
<header>
<div class="row">
<div class="col-3">
<h1>
<a href="index.html">
<img class="banner" src="images/Artistic_Logo2.png" alt="logo">
</a>
</h1>
</div>
<div class="col-9">
<img class="banner" src="images/Artistic_Banner2.png" alt="banner">
</div>
</div>
</header>
您必须通过为所有图像设置 100% 的最大宽度来确保图像在屏幕变小时会调整大小：
img {
max-width: 100%;
}
这将使您的图片填满其包含 div 的宽度，而不会拉伸它们超出其原始大小。
可能您需要 fiddle 一些正确的类名。此外，图像最终可能具有不同的高度。您可以随时更改一张图片的高度，使它们排列整齐。
希望对您有所帮助！
我的响应式网站有几个问题。我的第一个问题很简单：横幅包裹在徽标下方。
我想要实现的是类似于 St. Louis Zoo 网站的内容，其中徽标和横幅图像（乌龟）在页面变小时保持在同一行。他们是怎么做到的？
我的第二个问题是，随着页面不断调整大小，导航栏变得草率。如您所见，"contact" link 距离住宅、项目和商店 link 太近了。
我是响应式网页设计的新手，我想知道 - 是否可以在全局样式中找到导航栏的问题，或者我是否需要在平板电脑部分创建更多 CSS 代码？谢谢你。完整代码如下。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Artistic Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="banner">
<header>
<h1>
<a href="index.html">
<img class="banner" src="images/Artistic_Logo2.png" alt="logo">
</a>
<img class="banner" src="images/Artistic_Banner2.png" alt="banner">
</h1>
</header>
</div>
<div class="navigation">
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="projects.html">PROJECTS</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-3 col-m-3">
<img src="images/image2.jpg" alt="image">
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id,
cu sit etiam iisque equidem.</p>
<img src="images/image3.jpg" alt="image">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id,
cu sit etiam iisque equidem.</p>
<img src="images/image4.jpg" alt="image">
<h1>Header 3</h1>
<p>Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id,
cu sit etiam iisque equidem.</p>
</div>
<div class="col-6 col-m-9">
<h1>Header 1</h1>
<p class="p1">Lorem ipsum dolor sit amet, vocibus incorrupte
dissentiet qui id,
cu sit etiam iisque equidem.</p>
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, vocibus incorrupte dissentiet qui id,
cu sit etiam iisque equidem.</p>
<p>Resize the browser window to see how the content responds to
the resizing.</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><!--closes row-->
<footer>
<p>©2016 WEBSITE</p>
</footer>
</body>
</html>
CSS:
*{box-sizing:border-box;}
.row:after{content:"";
clear:both;
display:block;}
[class*="col-"]{float:left;
padding:15px;}
/*global styles*/
.banner {display: inline-block;
margin-left:auto;
margin-right:auto;}
.p1 {margin-bottom: 400px;}
.navigation {text-align:center;
background-color:#000000;
padding:11px;}
#banner {text-align:center;
margin-bottom: 40px;}
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:#19A5DE;
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:#19A5DE;
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;}
}
@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%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
nav{height:auto;}
nav li{display:inline;
text-align:center;}
编辑：我无法将徽标和横幅组合成一张图片的原因是我需要徽标在主页上保持超link页。
在行动
你的两个解决方案在一个地方起作用：
.wrapper{
width: 400px;
margin: 0 auto;
}
#banner{
margin: 0 auto 10px;
}
#banner header h1{
margin: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#banner header h1 .top-sections{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.navigation{
text-align:center;
background-color:#000000;
padding:11px;
}
nav{
margin:auto;
height:auto;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
margin: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
justify-content: space-around;
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);
}
nav li:hover{
background-color: #8E8E8E;
}
nav a{
text-decoration:none;
color:white;
font-size: 10px;
}
nav a:visited{
color:white;
}
<div class="wrapper">
<div id="banner">
<header>
<h1>
<a class="top-sections" href="index.html">
<img class="banner" src="https://placehold.it/73x50/000000/FFFFFF?text=Logo" alt="logo">
</a><!--
--><img class="top-sections banner" src="https://placehold.it/325x50/000000/FFFFFF?text=Banner" alt="banner">
</h1>
</header>
</div>
<div class="navigation">
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="projects.html">PROJECTS</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
第一个问题的可能解决方案
您的图片和锚点是内联元素。如果屏幕尺寸足够大，它们只会并排显示。您可以在图像周围使用 div，并给它们一个 .col-* 类名，以使用您的网格系统限制它们的宽度。
<header>
<div class="row">
<div class="col-3">
<h1>
<a href="index.html">
<img class="banner" src="images/Artistic_Logo2.png" alt="logo">
</a>
</h1>
</div>
<div class="col-9">
<img class="banner" src="images/Artistic_Banner2.png" alt="banner">
</div>
</div>
</header>
您必须通过为所有图像设置 100% 的最大宽度来确保图像在屏幕变小时会调整大小：
img {
max-width: 100%;
}
这将使您的图片填满其包含 div 的宽度，而不会拉伸它们超出其原始大小。
可能您需要 fiddle 一些正确的类名。此外，图像最终可能具有不同的高度。您可以随时更改一张图片的高度，使它们排列整齐。
希望对您有所帮助！