0
這是我第一次評論這個網站。我發現這個網站在過去有幫助，但現在我似乎無法找到解決我的問題，我希望有人直接回答我。html和css網頁內容調整
我有網頁使用的地方，我有一個固定的頁眉和頁腳和絕對定位面板的內容去。我的問題是，當我調整瀏覽器的大小時，標題內容保持在固定位置>現在很明顯，我希望通過頁面其餘部分的滾動進行移動。當我將標題設置爲相對時，它確實符合我的要求，但標題導航鏈接位於我的低頻帶下，z-indexing無濟於事。頁腳也是如此。 此外，對於內容面板，當我將主體溢出設置爲自動或顯示時，內容面板在滾動時會將空白留給右側。 任何人都可以幫我解決這個問題嗎？這是非常令人沮喪的。 還有一件事，任何人都可以幫我用代碼來使用css來獲取我的ux-header-upperbandcontent和lowebandcontent ?.我想將徽標和其他文本放置在較低頻段的上層和導航鏈接中，但使用內容包裝器。
謝謝。這是我的代碼爲CSS和HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="content/style.css">
</head>
<body>
<!--BACKGROUND-->
<!--HOME-->
<div id="home">
</div>
<!--ABOUT-->
<div id="about" class="panel">
<div class="content">
<p>about content</p>
</div>
</div>
<!--SERVICES-->
<div id="services" class="panel">
<div class="content">
<p>services content</p>
</div>
</div>
<!--CONTACT-->
<div id="contact" class="panel">
<div class="content">
<p>contact content</p>
</div>
</div>
<!--HEADER-->
<div id="ux-header">
<div id="ux-header" class="upperband">
</div>
<div id="ux-header" class="lowerband">
</div>
<div id="ux-header">
<ul id="ux-header" class="dev-navigation">
<li><a id="dev-home" href="#home">HOME</a></li>
<li><a id="dev-services" href="#services">SERVICES</a></li>
<li><a id="dev-about" href="#about">ABOUT</a></li>
<li><a id="dev-contact" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<!--FOOTER-->
<div id="ux-footer">
</div>
</body>
</html>
body {
min-width:980px;
margin: 0px;
color: rgb(51, 51, 51);
line-height: 30px;
font-family: "Segoe UI","Helvetica",Garuda,Arial,sans-serif;
font-size: 0.81em;
cursor: default;
overflow:hidden;
}
a {
color: rgb(0, 68, 204);
text-decoration: none;
cursor: pointer;
}
img {
border:currentColor;
border-image: none;
max-width: 100%;
}
ul {
margin: 0px;
padding: 0px;
}
ol {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
}
ul {
margin-bottom: 0px;
}
ul li {
margin-bottom: 0px;
margin-left: 15px;
}
ol li {
margin-bottom: 2px;
margin-left: 18px;
}
p {
margin-bottom: 10px;
}
h1 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h2 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h3 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h1 {
line-height: 42px;
font-size: 2.77em;
margin-bottom: 20px;
}
h1.error {
margin-top: 50px;
}
h2 {
line-height: 34px;
font-size: 2.16em;
margin-bottom: 20px;
}
h3 {
line-height: 24px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.39em;
margin-bottom: 20px;
}
h4 {
margin: 0px 0px 10px;
color: rgb(51, 51, 51);
line-height: 20px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.08em;
}
#ux-header.dev-navigation {
margin-top:60px;
width:300px;
z-index:3;
left:70%;
white-space:nowrap;
}
#ux-header .dev-navigation li{
padding-right:10px;
margin:10px;
}
#ux-header ul.dev-navigation li{
display:inline;
}
#ux-header.dev-navigation li a {
text-transform:uppercase;
font-size:12px;
padding-bottom:0px;
margin-bottom:0px;
}
#ux-header.dev-navigation li a:hover {
padding-bottom:3px;
border-bottom-style:solid;
border-bottom-color:#4169E1;
border-bottom-width:10px;
}
#ux-header {
position:fixed;
top:0px;
z-index:2000;
width:100%;
overflow:hidden;
}
#ux-header a {
color:#FFF;
}
#ux-header ul {
margin:0px;
}
#ux-header li {
margin:0px;
}
#ux-header .upperband{
height:60px;
background-color:#000;
}
#ux-header.upperbandcontent {
margin:0px, auto;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-header .lowerband {
top:60px;
height:30px;
background-color:#F42;
}
#ux-header.lowerbandcontent {
position:absolute;
margin:0px, 0px, 5px, 0px;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-footer {
position:fixed;
bottom:0px;
width:100%;
height:50px;
background-color:#000;
border-top-style:solid;
border-top-width:8px;
border-top-color:#0000FF;
z-index:2000;
}
.content {
font-size:12px;
padding:3px;
line-height:10px;
color:#fff;
display:inline-block;
margin:3px 0px;
z-index:-1;
}
.content h2{
font-size: 30px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
font-size: 12px;
padding: 3px;
line-height: 16px;
color: #fff;
display: inline-block;
margin: 3px 0px;
}
.panel {
position:absolute;
min-width:100%;
min-height:80%;
margin-top:90px;
right:2000px;
background-color:#FF00FF;
z-index:-2;
transition:right 2s;
overflow:hidden;
}
.panel:target {
background-color:#F6A600;
right:0;
}
#home:target ~ #ux-header .dev-navigation #dev-home,
#about:target ~ #ux-header .dev-navigation #dev-about,
#services:target ~ #ux-header .dev-navigation #dev-services,
#contact:target ~ #ux-header .dev-navigation #dev-contact,{
color:#000;
}
哪裏是代碼？ – San
對不起，我無法發佈它，它現在在那裏。 – user3013330
我認爲我可以使用java腳本，當標題大小低於某個寬度時，它會變成菜單樣式的naviation和頁腳內容。但對於內容，在主頁上我會有一個視頻，這可能會造成問題？ – user3013330