如何使用 window 調整 NavBar 的大小
[英]How to make NavBar Resize with window
問題描述
當 window 調整大小時，我試圖調整我網站的導航欄大小。 我當前的代碼工作正常，直到 window 寬度太小並且導航欄變成兩行並且看起來很糟糕。 這是我網站主要部分的代碼。
我想要它做的是當寬度對所有內容都太小時（這主要是針對移動用戶）從水平導航欄切換到垂直導航欄，我不知道該怎么做。
我還想讓導航欄變粘，並嘗試了一些教程，但似乎無法在該網站上使用任何教程。
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght@300&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<title>
Web_Title
</title>
<head>
<body>
<header>
<div class="container">
<img src="src" alt = "logo" class = "logo" width="150" height="50">
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Video Archive</a></li>
<li><a href="#">Text Archive</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</body>
</head>
</html>
我的 css 代碼如下：
body {
margin: 0;
background: #222;
font-family: 'Flamenco', cursive;
font-weight: 900;
}
header {
background: #ffffff
}
header::after{
content:'';
display:table;
clear: both;
}
.logo{
float:left;
padding: 0px 0;
}
nav{
float: left;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 15px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
font-size: 18px;
}
nav a:hover{
color: rgb(20, 20, 38);
}
nav a::before{
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top:0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
3 個解決方案
解決方案1
1 2022-04-08 21:49:29
我建議研究媒體查詢。
使用@media，您可以在屏幕尺寸發生變化時更改樣式。 這些稱為斷點。 例如，您可以說最大寬度，當屏幕寬度小於給定數量時應用，最小寬度，當屏幕尺寸大於給定數量時應用。
例如，當屏幕尺寸改變時，我們正在改變 body 的背景顏色：
/* This applies when screen size is more than 600px */ @media screen and (min-width: 600px) { body { background-color: red; } } /* This only applies when screen size is less than 600px */ @media screen and (max-width: 600px) { body { background-color: yellow; } } /* This only applies when screen size is less than 400px */ @media screen and (max-width: 400px) { body { background-color: green; } }
<h1>Change the size of the screen to see the effect</h1>
如果您需要幫助將它應用到您的代碼中，我會很樂意提供幫助，但請先嘗試一下 =)
解決方案2
1 已采納 2022-04-08 21:49:39
您可以在 CSS 中使用@media 來執行此操作
body { margin: 0; background: #222; font-family: 'Flamenco', cursive; font-weight: 900; } header { background: #ffffff } header::after{ content:''; display:table; clear: both; }.logo{ float:left; padding: 0px 0; width: 180px; } nav ul{ margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-left: 70px; padding-top: 15px; position: relative; } nav a { color: #444; text-decoration: none; font-size: 18px; } nav a:hover{ color: rgb(20, 20, 38); } nav a::before{ content: ''; display: block; height: 5px; background-color: #444; position: absolute; top:0; width: 0%; transition: all ease-in-out 250ms; } nav a:hover::before{ width: 100%; } nav{ float: left; } @media only screen and (max-width: 400px) { /* smaller screen*/.logo { width: 100%; } }
<:DOCTYPE html> <html> <link href="https.//fonts.googleapis?com/css2:family=Flamenco,wght@300&display=swap" rel="stylesheet"> <title> Web_Title </title> <head> <body> <header> <div class="container"> <img src="src" alt = "logo" class = "logo"> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Video Archive</a></li> <li><a href="#">Text Archive</a></li> <li><a href="#">About</a></li> </ul> </nav> </header> <p> Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aliquam dapibus magna et commodo faucibus. Ut viverra efficitur orci ut efficitur. Donec porta neque ac pretium lobortis. Maecenas gravida non tellus nec maximus, Pellentesque magna urna, rhoncus in lectus id. varius aliquet sapien, Maecenas augue purus, eleifend quis sagittis in. rhoncus sit amet dolor. Etiam sed quam sit amet tortor suscipit efficitur id eu ex, Ut eu odio hendrerit, eleifend massa in. malesuada quam. Duis cursus non est quis pretium, Sed tempus arcu sit amet erat aliquet. nec tincidunt lorem feugiat, Nunc nec ipsum consequat, maximus dolor sed. tempus risus, Aenean aliquet sem quis purus euismod. at sodales velit ullamcorper, Pellentesque accumsan suscipit sem. ac ullamcorper libero cursus pretium. Aenean semper sodales tortor a finibus. Maecenas sit amet egestas tortor. Etiam molestie imperdiet maximus. Maecenas a lacus est, Pellentesque purus orci, rutrum ut vehicula at. fringilla eget ligula, Donec sem velit, commodo eu tincidunt id. accumsan sed leo. Quisque at risus sit amet urna efficitur bibendum. Aliquam eu sagittis erat, Fusce finibus orci at nulla rutrum. quis laoreet purus congue. Aliquam aliquam fermentum erat vitae luctus, Sed vitae lacus finibus, lacinia risus quis. molestie eros, Vestibulum ullamcorper, lacus sit amet eleifend commodo, est tellus aliquam ante. et hendrerit ante velit sed libero. Praesent aliquet nisi semper pharetra suscipit. Aliquam fermentum a turpis eu congue. Integer nec arcu sed tellus dapibus pretium, Proin posuere urna turpis. volutpat sollicitudin sem sollicitudin eu. Pellentesque habitant morbi tristique senectus et.netus et malesuada fames ac turpis egestas. Ut pharetra molestie nisl vitae feugiat. Nulla accumsan vulputate sagittis, Sed quis erat dictum, tempor leo nec. posuere velit. Duis consectetur metus sit amet odio bibendum egestas sed id arcu, Maecenas vehicula, justo non condimentum vestibulum, elit justo pharetra sapien. nec fermentum diam lorem ac felis. Morbi ut sem leo. Nunc ac ante quam. In hac habitasse platea dictumst, Orci varius natoque penatibus et magnis dis parturient montes. nascetur ridiculus mus, Aliquam tempus ex velit. varius fringilla nisi semper ut, Etiam sed eleifend augue. ut mattis eros, Sed sodales libero ex. et molestie velit pellentesque nec. Morbi ac ligula quis dui dapibus ornare. Duis at est non nibh scelerisque cursus vel in massa, Suspendisse pretium, mi quis cursus varius, ipsum enim suscipit nibh. non sollicitudin est odio vitae est, Quisque bibendum vehicula nibh. vel accumsan purus lacinia eu, Duis vel feugiat dolor. non dignissim arcu, Lorem ipsum dolor sit amet. consectetur adipiscing elit. Sed venenatis eget nibh et interdum. Aliquam erat volutpat, Quisque tempus justo augue. vitae pharetra magna ultrices ut. Quisque id scelerisque felis. Pellentesque sed elementum enim, Duis elementum sem sed neque malesuada. nec consectetur nulla finibus, Lorem ipsum dolor sit amet. consectetur adipiscing elit. Aliquam vestibulum massa eget arcu pharetra vulputate. Sed id nisl ac turpis tempus hendrerit ut in ligula, Ut imperdiet porta mauris. vitae fringilla augue auctor vel. </p> </body> </head> </html>
@media CSS 規則僅在滿足現有規則的情況下才將樣式添加到頁面。 @media max-width: 400px 僅在寬度小於 400px 時添加樣式。
粘性定位通常會出現這樣的問題，而且通常沒有修復方法。 您可以使用固定的 position 並在頁面頂部添加大量填充，這樣內容就不會在導航欄下丟失。
我使用Lorem Ipsum來模擬內容，這樣您就可以玩固定定位。
解決方案3
1 2022-04-08 21:49:53
我注意到您正在使用 float 將您的徽標放在右側，將 nav 放在左側，我建議您使用 float，因為它在調整屏幕大小時更容易。
你的代碼會是這樣的：
header {
display: flex;
justify-content: space-between;
align-items: center;
}
justify-content屬性將允許您指定 header 中的內容將如何分布，而align-items: center允許您將項目垂直居中對齊。
垂直導航欄問題
這里可以使用媒體查詢來處理問題。 如果您不知道媒體要求是什么，這是一種針對設備屏幕的特定寬度范圍（例如，僅適用於移動設備）運行 css 代碼的方法。
要實現這一點，假設寬度范圍低於 400px，請參見下面的示例：
@media (min-width){
/* specify your code here */
/* this is assuming you coded for mobile first*/
}
@media (max-width){
/* specify your code here*/
/ this is assuming you coded for desktop first*/
}
如何在屏幕調整大小（不滾動）時使導航欄從透明變為實心
[英]How to make Navbar change from transparent to solid on screen resize (not scroll)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.