个人中心
gpt4 book ai didi

html - 响应式网站 : Faulty Logo and Banner Wrap, 导航栏

转载 作者：太空宇宙 更新时间：2023-11-04 02:38:16 24 4
gpt4 key购买 nike

我的响应式网站有几个问题。我的第一个问题很简单:横幅包裹在 Logo 下方。

enter image description here

enter image description here

我想要实现的是类似于 St. Louis Zoo 网站的内容，随着页面变小， Logo 和横幅图像(乌龟)保持在同一行。他们是怎么做到的？

我的第二个问题是，随着页面不断调整大小，导航栏变得草率。如您所见，“联系人”链接离主页、元素和商店链接太近了。 enter image description here

我是响应式网页设计的新手，我想知道 - 是否可以在全局样式中找到导航栏的问题，或者我是否需要在平板电脑部分创建更多 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;}

编辑:我无法将 Logo 和横幅组合成一张图片的原因是我需要让 Logo 保持指向主页的超链接。

最佳答案

在行动

您的两个解决方案都在一个地方运行:

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

关于html - 响应式网站 : Faulty Logo and Banner Wrap, 导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35245158/

24 4 0
文章推荐： c - 未设置 _GNU_SOURCE 时如何在 flex 规则中使用 asprintf？
文章推荐： python - 在 python re 中分隔字符串中的第一个单词
文章推荐： Python 在另一个函数返回结果后结束函数
文章推荐： c - RAM_HIGH_ADRS 在 VxWorks BSP 中的真正含义是什么？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com