首页的载入方式与其他网页的载入方式不同 [英] Homepage loads differently than every other page
问题描述
为什么我的首页宽度为1024像素。之后每一页都有1280像素的宽度？即使全屏，这是如何加载。为什么？
Why does my homepage have a width of 1024 px. And every page after that has a width of 1280 px? Even as full screen this is how it loads up. How why?
规格：
浏览器：Chrome
位于本地计算机上的页面。
html非常简单这里是css ...
Specs: Browser : Chrome Pages located on local machine. html very simple here is the css...
root {
display: block;
}
#leftcol a{text-decoration: none;}
#leftcol{
left: 10%;
width: 200px;
height: 100%;
margin-top: 0px;
position: absolute;
opacity:0.6;
color: white;
font-size: 2em;
}
#left-placeholder{
height: 100%;
width: 10%;
float: left;
}
#left-pusher{
height: 100%;
width: 200px;
float: left;
}
.left-column-item{
background: url('images/bgnav.jpg');
height: 33.334%;
background-size: 100%;
opacity:0.6;
color: white;
}
.left-column-item:hover{
background: url('images/bgnav.jpg');
height: 33.334%;
background-size: 100%;
opacity: 1;
}
#content{
text-align: center;
color: white;
font-size: 5em;
height: 100%;
width: 70%;
float:left;
}
body{
background: url('images/background.jpg');
background-size: 100%;
margin: 0;
min-height: 100%;
width: 100%}
html, body
{
height: 100%;
}
// html for homepage：
//html for homepage:
<html>
<head>
<title></title>
<LINK href="styles.css" rel="stylesheet" type="text/css">
<script type ="text/javascript">
</script>
</head>
<body>
<div id ="leftcol">
<a href="content/practice.html"><div class ="left-column-item">Practice!</div></a>
<a href="content/AboutUs.html"><div class ="left-column-item">About Us!</div></a>
<a href="content/contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
</div>
<div id="left-placeholder"></div>
<div id ="left-pusher"></div>
<div id ="content">Math Practice Site<br>Welcome</div>
</body>
</html>
//练习页没有正确加载
// the practice page that is not loading correctly
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="../styles.css" rel="stylesheet" type="text/css">
<script type ="text/javascript">
</script>
</head>
<body>
<div id ="leftcol">
<a href="practice.html"><div class ="left-column-item">Practice!</div></a>
<a href="aboutUs.html"><div class ="left-column-item">About Us!</div></a>
<a href="contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
</div>
<div id="left-placeholder"></div>
<div id ="left-pusher"></div>
<div id ="content">Math Practice Site <br> hello</div>
</body>
</html>
推荐答案
您的网站...
您似乎引用了不同的样式表。尝试在其他网页中使用索引调用：
It would be great if you could post a link to your site... It appears that you are referencing your style sheets differently. Try using the index call in the other pages:
<LINK href="styles.css" rel="stylesheet" type="text/css">
而不是
<LINK href="../styles.css" rel="stylesheet" type="text/css">
您可能正在呼叫完全不同的样式表。
you may be calling an entirely different stylesheet.
您也可以尝试收缩主体的宽度，而不是使用％
You can also try constricting the width of the body instead of using a %
body{
background: url('images/background.jpg');
background-size: 100%;
margin: 0;
min-height: 100%;
width: 1024 px;}
这篇关于首页的载入方式与其他网页的载入方式不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
