我需要幫助，所以當我縮小瀏覽器的寬度時，它會回應并且我的導航欄鏈接將出現在我的導航欄標題下。有人可以幫助我完成這項作業。
我相信我需要使用 flexbox 來做到這一點。我一直在嘗試幾種不同的方法，但似乎無法讓 id 中的鏈接pagetitle和navid 垂直顯示。
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1; /* To make sure titleNav is on top of content, give it a higher z-index than content (content would have default value of zero). */
width: 100%;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { /* fix the nav bar */
position: fixed;
padding-right: 10rem;
top: 0px;
right: 0px;
text-align:right;
font-size:24px;
padding-bottom: 12px;
padding-top:32px;
overflow: hidden; /*when content to big to fit in area */
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}<!DOCTYPE html><html>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>
<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
<div id="titleNav">
<div id="pageTitle">
U-Bin Moving
</div>
<div id="nav">
<a href="index.html" class="active">Home</a>
<a href="services.html">Services</a>
<a href="about.html">About Us</a>
<a href="blog.html">Contact</a>
</div>
</div>
<div id="content">
<h2>The Right Moving Company For You</h2>
<p>
At U-Bin Storage we will get the job done for the lowest price.
</p>
<p style="text-align:center;">
<img src="pics/box.jpg" style="width:50%; border-radius:10px;">
</p>
</div> <!-- content. [[Keep track of nesting]] -->
<div id="footer">
[ Kyle Hrivnak ]
</div>uj5u.com熱心網友回復：
這是更新的css檔案。在#titleNav 和#nav 中使用了彈性框。
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1;
width: 100vw;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { /* fix the nav bar */
display: flex;
flex-wrap: wrap;
font-size:24px;
padding-bottom: 12px;
padding-top:32px;
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}
uj5u.com熱心網友回復：
你可以看看position: sticky;我認為哪個更適合你的例子，但為了簡單起見，我堅持只糾正你的 CSS ......
設定 #contentpadding-top: 100px或接近 100px 并從 #nav 中洗掉定位和填充，使其看起來像：
#nav {
text-align: right;
font-size: 24px;
overflow: hidden; /*when content to big to fit in area */
}
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1; /* To make sure titleNav is on top of content, give it a higher z-index than content (content would have default value of zero). */
width: 100%;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav {
text-align:right;
font-size:24px;
overflow: hidden; /*when content to big to fit in area */
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 100px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}<!DOCTYPE html><html>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>
<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
<div id="titleNav">
<div id="pageTitle">
U-Bin Moving
</div>
<div id="nav">
<a href="index.html" class="active">Home</a>
<a href="services.html">Services</a>
<a href="about.html">About Us</a>
<a href="blog.html">Contact</a>
</div>
</div>
<div id="content">
<h2>The Right Moving Company For You</h2>
<p>
At U-Bin Storage we will get the job done for the lowest price.
</p>
<p style="text-align:center;">
<img src="pics/box.jpg" style="width:50%; border-radius:10px;">
</p>
</div> <!-- content. [[Keep track of nesting]] -->
<div id="footer">
[ Kyle Hrivnak ]
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410706.html
標籤：
上一篇：標題的背景顏色不會改變