时间戳

首页 > 解决方案 > html页面很长

html - html页面很长

问题描述

这是我现在的页面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>

这是页面图像的 图像

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

标签： htmlcss

解决方案

您使用了许多类似的选择器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>

推荐阅读