HTML页面很长

时间：2018-04-25 21:46:04

标签： html css

这是我现在对该页面的css，

.xyz {
        left: 400px;
        top: 55px;
        position: relative;
        text-align: center;
        width: 300px;
    }
    .m {
        left: 800px;
        top: -500px;
        position: relative;
        text-align: center;
        width: 300px;
        padding-bottom:100px;
    }
    .z {
        left: 1200px;
        top: -1153px;
        position: relative;
        text-align: center;
        width: 300px;
    }
    .main{background-color:white;opacity:0.6; margin-left:auto;margin-right:auto;
  margin-bottom:400px;text-align:center;width:30%;
    padding:20px;}

这是我现在对该页面的html代码。我更新了它以包括正文

<body>
<ul>
    <li style="float:left; padding-left:200px;font-size:30px;">HACKERYOU</li>
    <li style="padding-right:200px;">PART-TIME</li>
    <li>BOOTCAMP</li>
    <li>CONTACT</li>
    <li>ABOUT</li>
    <li>HOME</li>
</ul>
<nav class="main">
    <h1 style="opacity:1;">HACKERYOU</h1>
    <p style="opacity:inherit;">twenty-eighteen</p>
    <p style="opacity:1;">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum my nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
    </p>
</nav>
<p style="text-align:center;background-color:white;">FEATURED POSTS</p>
<div class="xyz">
    <img src="assets/image-small-1.jpg" height="310" width="300" />
    <p>HACKERYOU TECH TEST</p>
    <p>March 1st, 2018</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum my nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud</p>
    <p>READ MORE</p>
</div>
<div class="m">
    <img src="assets/image-small-2.jpg" height="310" width="300" />
    <p>HACKERYOU TECH TEST</p>
    <p>March 1st, 2018</p>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum my nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud
    </p>
    <p>READ MORE</p>
</div>
<div class="z">
    <img src="assets/image-small-3.jpg" height="310" width="300" />
    <p>HACKERYOU TECH TEST</p>
    <p>March 1st, 2018</p>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum my nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud
    </p>
    <p>READ MORE</p>
</div>
</body>

这是页面的图像 image

为什么页面这么长？我不明白为什么页面的长度很长，测试页面的长度不应该那么长

2 个答案:

答案 0 :(得分：1)

您使用许多选择器，例如top: -500px; top: -1153px;等postion: relative;。当您使用带有postion: relative;元素的负值或正值时，它在屏幕中占据的最大问题就是添加top, right等值。这是造成底部巨大空间的主要原因。

然而，在看到您的努力和尝试后，我意识到您可能尝试达到以下结果，请查看我为您编写的桌面大小屏幕，作为指导。

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}
.xyz, .m, .z {
	position: relative;
	text-align: center;
	width: 300px;
	float:none;
	display:inline-block;
	vertical-align:top;
	margin:20px;
}
.text-center {
	text-align:center;
}
.main {
	background-color:white;
	opacity:0.6; 
	margin-left:auto;
	margin-right:auto;
	margin-bottom:200px;
	text-align:center;width:30%;
	padding:20px;
}
<ul>
    <li style="float:left; padding-left:200px;font-size:30px;">HACKERYOU</li>
    <li style="padding-right:200px;">PART-TIME</li>
    <li>BOOTCAMP</li>
    <li>CONTACT</li>
    <li>ABOUT</li>
    <li>HOME</li>
</ul>
<nav class="main">
    <h1 style="opacity:1;">HACKERYOU</h1>
    <p style="opacity:inherit;">twenty-eighteen</p>
    <p style="opacity:1;">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum my nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
    </p>
</nav>
<p style="text-align:center;background-color:white;">FEATURED POSTS</p>
<div class="clearfix text-center">
<div class="xyz">
    <img src="assets/image-small-1.jpg" height="310" width="300" />
    <p>HACKERYOU TECH TEST</p>
    <p>March 1st, 2018</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum my nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud</p>
    <p>READ MORE</p>
</div>
<div class="m">
    <img src="assets/image-small-2.jpg" height="310" width="300" />
    <p>HACKERYOU TECH TEST</p>
    <p>March 1st, 2018</p>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum my nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud
    </p>
    <p>READ MORE</p>
</div>
<div class="z">
    <img src="assets/image-small-3.jpg" height="310" width="300" />
    <p>HACKERYOU TECH TEST</p>
    <p>March 1st, 2018</p>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum my nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud
    </p>
    <p>READ MORE</p>
</div>
</div>

答案 1 :(得分：0)

问题出在这里

   .main{background-color:white;opacity:0.6; margin-left:auto;
    marginright:auto;
    margin-bottom:400px;text-align:center;width:30%;
    padding:20px;}

为什么你给主要的400像素的底部？将其减少到40，您将看到页面缩短。我不确定您要对此做些什么 - 但如果您希望减小页面大小，请将其更改为其他值

相关问题
最新问题