Question

我的响应式网站出现了一些问题。我的第一个问题很简单：横幅包裹在徽标下方。

我想要实现的内容类似于St. Louis Zoo的网站，其中徽标和横幅图片（海龟）与页面变小时保持在同一行。他们是如何做到的？

我的第二个问题是，随着页面继续调整大小，导航栏变得草率。如您所见，＆＃34;联系＆＃34;链接太靠近家庭，项目和商店链接。

我对响应式网页设计不熟悉并且我想知道 - 导航栏的问题可以在全局样式中找到，还是我需要在平板电脑部分创建更多的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>&copy;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;}

编辑：我无法将徽标和横幅合并到一张图片中的原因是因为我需要徽标保留到主页的超链接。

Answer 1

在行动中

您的两个解决方案都在一个地方实施：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

第一个问题的可能解决方案

您的图像和锚点是内嵌元素。如果屏幕尺寸足够大，它们将仅并排显示。您可以在图像周围使用div，并使用.col- * classname来限制它们的宽度，使用网格系统。

<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的宽度，而不会超出其原始大小。

可能你需要用正确的类名来捣乱。此外，图像可能最终具有不同的高度。您可以随时更改一个图像的高度，以便很好地排列它们。

希望这有帮助！

响应式网站：错误的徽标和横幅包裹，导航栏

2 个答案:

在行动中