个人中心
gpt4 book ai didi

html - 网站中间的空白

转载 作者：太空宇宙 更新时间：2023-11-04 12:09:07 25 4
gpt4 key购买 nike

我正在制作这个网站，图像和我想要放置的表格之间有一个空白区域，我试图找到是否有代码制作那个空间，但一无所获。问题出在哪里？？

谢谢!

<style>
body {
	padding: 0;
	margin: 0;
    background-color: #F0F0F0;
}

#nav {
	
	font-family:sans-serif;
    background-color:#F0F0F0;
    position: fixed;
	top: 0;
	width: 100%;
	color: #383838;
	height: 27px;
	text-align: center;
	padding-top: 9px;
	z-index: 999;
	

	/* Adds shadow to the bottom of the bar */
	-webkit-box-shadow: 0px 0px 0px 0px #FFA600;
	-moz-box-shadow: 0px 0px 0px 0px ##FFA600;
	box-shadow: 0px 0px 0px 1px #FFA600;
}

#nav a {
	
	font-size: 14px;
	padding-left: 70px;
	padding-right: 50px;
	color: #383838;
	text-decoration: none;
	z-index: 999;
}

#nav a:hover {
	color: #FCC772;
	z-index: 999;
	
} 

header{
	position: relative;
    width: 390px;
	top: 80px;
	padding-bottom:20px;
    z-index: 1;
	margin:0 auto;
}

#hd2{
	padding-top:90px;
	position: relative;
	padding-bottom:15px;
}

.wbox {
	position: relative;
	top: -370px;
   	opacity: 0.6;
	width:750px;
	height:280px;
	z-index: 1;
	margin:0 auto;
}

#textini {
	
	top: -570px;
    height: 150px;
    position: relative;
	padding-bottom:0px;
	margin:0 auto;
	z-index: 3;
}

#textini p{
	padding-bottom:0px;
	padding-top:0px;
	font-family:sans-serif;
	text-align: center;
	font-weight:normal;
	font-size: 28px;
	z-index: 3;
	color:#383838;
}

.s3{
	margin-top:50px;
	margin:0 auto;
	position: relative;

}

.font_8{
	font-family:sans-serif;
	color:#ffffff;
	font-size:18px;
	font-weight:normal;
	margin:0 auto;
	text-align:center;
}

footer {
    background-color:rgba(56, 56, 56, 1);
    clear:both;
    padding:30px;
	border-top: 0px solid rgba(146, 146, 146, 1);
	border-bottom: 0px solid rgba(146, 146, 146, 1);
}
</style>
</head>
<html>
<head>
<meta charset="UTF-8">
	
	<title>Números & Vírgulas</title>
	
	<link rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div id="page-wrap">

<div id="nav" style="overflow:hidden">
<a href="index.html">INÍCIO</a>
<a href="index.html">ATUAÇÃO</a>
<a href="index.html">QUEM SOMOS</a>
<a href="index.html">CONTATOS</a>
</div>

<header>
  <img src="http://i61.tinypic.com/2vjwxv5.png" style="width:100%;height:100%" alt="" />
</header>

<div id="hd2">
<img src="http://i61.tinypic.com/fn4n6q.png"; style="width:100%;height:424px"; alt="" />
</div>

<div class="wbox">
<img src="http://i60.tinypic.com/2ypel9c.png" style="width:100%; height:100%" alt="" />
</div>

<div id="textini">
<p>Os Números constituem uma linguagem universal mas <br> uma Vírgula pode mudar tudo.</p>
<p style="margin-left:350px;font-size:15px">Por: Dr. Sérgio Rosa</p>
</div>

<table style="width:100%:">
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</div>
</table>



<div style="width:330px; top:55px;" class="s3">
 <p style="line-height: 1.6em;" class="font_8"><span style="line-height:1.6em;">© 2013 Números & Vírgulas</span></p>
</div>
<!--
<div class="in" style="width:0 auto; padding-left:0px; right:300px;">
<a href="https://www.linkedin.com/company/n%C3%BAmeros-&-v%C3%ADrgulas---contabilidade-gest%C3%A3o-e-forma%C3%A7%C3%A3o-unipessoal-lda-?trk=top_nav_home">
<img src="http://i59.tinypic.com/jphpix.png" alt=" " style="width:24px;height:24px;margin:0 auto;float:right">
</a>
</div>
-->

<footer>
<br>
</footer>


</body>

</html>

最佳答案

您的空间被 <div class='wbox'></div> 占用了和 <div class='textini'></div>它们有设定的高度，但您使用负值 top 来定位它们值(value)观。

这是没有 2 个元素的网站 fixed

因此您将需要重组您的网站。

关于html - 网站中间的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29165633/

25 4 0
文章推荐： html -
  • 标签的 CSS Margin 自动居中
    • 文章推荐： java - JFrame 和 JOptionPane
    文章推荐： c - Linux 中 userfaultfd() 系统调用的旧替代方案？
    文章推荐： html - 如何使 float 中的文本居中？
    太空宇宙
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com