我正在為自己開發(fā)一個網(wǎng)站，但我不知道如何使導航欄在網(wǎng)站中居中。我想也許其他人有一個想法:)整個導航欄稍微偏左&我不知道如何解決它..希望你們能做到這一點:)我是一個初學者@編碼&我還有很多東西要學..頁面截圖標識感謝您的幫助 ：）網(wǎng)頁：<!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條經(jīng)驗 獲得超8個贊
我在這里制作了一個片段來解決您的問題。核實。希望能幫助到你。
更新的 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 關(guān)注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消