我正在为自己开发一个网站，但我不知道如何使导航栏在网站中居中。我想也许其他人有一个想法:)整个导航栏稍微偏左&我不知道如何解决它..希望你们能做到这一点:)我是一个初学者@编码&我还有很多东西要学..页面截图标识感谢您的帮助 ：）网页：<!DOCTYPE html><html> <head> <title>Meine Seite!</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="sets.html">Sets</a></li> <li><a href="about.html">About</a></li> <li class="logo"><a href="index.html">SueZ Logo</a></li> <li><a href="gigs.html">Gigs</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section class="features"> <figure> <img src="" alt="trololololol"> <figcaption>Fresh Baked Techno</figcaption> </figure> <figure> <img src="" alt="lalala"> <figcaption>?</figcaption> </figure> <figure> <img src="" alt="Bla bli blub"> <figcaption>?</figcaption> </figure> </section> <footer>Copyright © 2020 SueZ</footer> </body></html>
1 回答
largeQ
TA贡献2039条经验 获得超7个赞
我在这里制作了一个片段来解决您的问题。核实。希望能帮助到你。
更新的 CSS 标记为/*----------*/
...............................................................................
给您的提示
不要使用height.
body {
background: rgb(58, 58, 58);
color: rgb(174, 62, 50);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
/*------------------------*/
header {
background-color: black;
background-image: url("Fotos/background-warehouse.jpg");
background-size: 100%;
background-position: center;
/*height: 150px;*/
padding: 40px;
text-align: center;
position:relative;
}
.logo{width:100px;position:absolute; left:0; right:0; margin: 0 auto; top:0; z-index:10;}
.logo img{width:100%;}
/*------------------------*/
header a {
color: rgb(174, 62, 50);
text-decoration: none;
text-transform: uppercase;
margin-top: 60px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
/*------------------------*/
nav li:last-child{margin-right:0}
nav li:nth-child(2){margin-right:120px}
/*------------------------*/
.features {
background: white;
color: gray;
padding: 20px;
display: flex;
flex-direction: row;
}
.features figure {
margin: auto;
text-align: center;
text-transform: uppercase;
width: 200px;
}
.features figure img {
border: 1px solid white;
border-radius: 50%;
box-shadow: gray 0 0 10px;
width: 200px;
}
footer {
background: black;
color: gray;
font-size: 12px;
padding: 20px 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<a href="#!"><img src="https://i.stack.imgur.com/yfW19.png" alt="logo"></a>
</div>
<nav>
<ul>
<li><a href="sets.html">Sets</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gigs.html">Gigs</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section class="features">
<figure>
<img src="" alt="trololololol">
<figcaption>Fresh Baked Techno</figcaption>
</figure>
<figure>
<img src="" alt="lalala">
<figcaption>?</figcaption>
</figure>
<figure>
<img src="" alt="Bla bli blub">
<figcaption>?</figcaption>
</figure>
</section>
<footer>
Copyright © 2020 SueZ
</footer>
- 1 回答
- 0 关注
- 121 浏览
添加回答
举报
0/150
提交
取消