我的页面没有横跨整个页面

我有两个问题。首先，当我在我的html标签中写入时，我无法在运行页面时使用超链接。另一个主要原因是我的代码不能在整个页面上展开。我的页面没有横跨整个页面

这里是我写的造型页面

body { 
    background: #B2906F; 
    font-family: arial; 
    margin: 0; 
    height: 100%; 
} 

.maincontainer{ 
    width: 100%; 
    margin: 0 auto; 
} 


.picture{ 
    display: inline; 
    margin: 0; 
    padding: 0; 
    position: fixed; 
    z-index: -1; 
    background-size: 100%; 
} 

.button{ 
    padding: 10px 15px; 
    text-decoration: none; 
    border-radius: 5px; 
    background-color: #05280c; 
} 
.button-primary:hover { 
    background-color: #05370c; 
} 

h1 { 
    display: inline; 
    margin: 0; 
    background-color: #2c421f; 
    padding: 5px; 
    position: absolute; 
} 

ul{ 
    margin: 0; 
    display: inline; 
    padding: 0px 0px 0px 250px; 
} 
ul li { 
    display: inline-block; 
    list-style-type: none; 
    padding: 15px 10px; 
    color: #050c0c; 
    margin: 0; 
    border-radius: 5px; 
} 

ul li a { 
    color: black; 
} 

footer{ 
    clear: both; 
} 

nav { 
    color: 
    height: 100%; 
    margin: 0; 
    background-color: #2c421f; 
}

的CSS，这是我的HTML我写的页面。任何帮助都是极好的。我在这里呆了几天。

<!DOCTYPE html> 
<html> 

<head> 
    <title>NWWolfPack</title> 
    <link href="main.css" rel="stylesheet" /> 
</head> 

<body> 
    <div class="maincontainer"> 
     <h1>NW Wolf Pack</h1> 
     <div class="picture"><img src="camo.jpg" width="100%" height="150"> 
      <header> 
       <nav> 
        <ul> 
         <li class="button"><strong>Home</strong></li> 
         <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li> 
         <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li> 
         <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li> 
        </ul> 
       </nav> 
      </header> 
     </div> 
     <footer>2017 Dillan Hall</footer> 
</body> 

</html>

来源

2017-02-10 Dillan Hall

又是什么问题......？：| – Leo

对不起，我很糟糕。我只想让我的CSS从左到右遍历整个页面。目前它只能走到一半 –

检查您的代码中的开始和结束div标签。我不认为你打算在图片div中有这个头部导航。 – Adrianopolis

关注这个：

body { 
 
    background: #B2906F; 
 
    font-family: arial; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.maincontainer { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.picture { 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: -1; 
 
    background-size: 100%; 
 
} 
 

 
.button { 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    border-radius: 5px; 
 
    background-color: #05280c; 
 
} 
 

 
.button-primary:hover { 
 
    background-color: #05370c; 
 
} 
 

 
h1 { 
 
    display: inline; 
 
    margin: 0; 
 
    background-color: #2c421f; 
 
    padding: 5px; 
 
    position: absolute; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    display: inline; 
 
    padding: 0px 0px 0px 250px; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    padding: 15px 10px; 
 
    color: #050c0c; 
 
    margin: 0; 
 
    border-radius: 5px; 
 
} 
 

 
ul li a { 
 
    color: black; 
 
} 
 

 
footer { 
 
    clear: both; 
 
} 
 

 
nav { 
 
    color: height: 100%; 
 
    margin: 0; 
 
    background-color: #2c421f; 
 
}

<div class="maincontainer"> 
 
     <h1>NW Wolf Pack</h1> 
 
     <div class="picture"><img src="camo.jpg" width="100%" height="150"> 
 
      <header> 
 
       <nav> 
 
        <ul> 
 
         <li class="button"><strong>Home</strong></li> 
 
         <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li> 
 
         <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li> 
 
         <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li> 
 
        </ul> 
 
       </nav> 
 
      </header> 
 
     </div> 
 
     <footer>2017 Dillan Hall</footer>

来源

2017-02-10 07:33:03

你是最棒的。谢谢，这很好。 –

它是在你的CSS的.picture是导致您的问题position:fixed。另外我只注意到你的maincontainer没有关闭div。

来源

2017-02-10 07:35:29 Adrianopolis

删除position:fixed从你的类picture

.picture{ 
    display: inline; 
    margin: 0; 
    padding: 0; 

    z-index: -1; 
    background-size: 100%; 
}

和你的超级链接似乎working..Isnt那你是什么意思？

来源

2017-02-10 07:37:34 affaz

使用这一个：

<!DOCTYPE html> 
<html> 

<head> 
    <title>NWWolfPack</title> 
    <link href="main.css" rel="stylesheet" /> 



</head> 

<body> 
    <div class="maincontainer"> 
     <h1>NW Wolf Pack</h1> 
     <div class="picture"><img src="http://www.dvd-ppt-slideshow.com/images/ppt-background/background-5.jpg" width="100%" height="150"> 
      <header> 
       <nav> 
        <ul> 
         <li class="button"><strong>Home</strong></li> 
         <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li> 
         <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li> 
         <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li> 
        </ul> 
       </nav> 
      </header> 
     </div> 
     <footer>2017 Dillan Hall</footer> 
</body> 

</html>

风格：

<style> 
    button{ 
    padding: 10px 15px; 
    text-decoration: none; 
    border-radius: 5px; 
    background-color: #05280c; 
} 
.button-primary:hover { 
    background-color: #05370c; 
} 

h1 { 
    display: inline; 
    margin: 0; 
    background-color: #2c421f; 
    padding: 5px; 
    position: absolute; 
} 

ul{ 
    margin: 0; 
    display: inline; 
    padding: 0px 0px 0px 250px; 
} 
ul li { 
    display: inline-block; 
    list-style-type: none; 
    padding: 15px 10px; 
    color: #050c0c; 
    margin: 0; 
    border-radius: 5px; 
} 

ul li a { 
    color: black; 
} 

footer{ 
    clear: both; 
} 

nav { 
    color: 
    height: 100%; 
    margin: 0; 
    background-color: #2c421f; 
} 
    </style>

希望这会帮助你。如果有其他问题让我知道？

来源

2017-02-10 07:44:13 Sangrai

我的页面没有横跨整个页面

回答

相关问题