使用HTML和CSS更改表开始的位置

我是一般的HTML和编码新手,我正在开发我的第一个网站 . 我正在使用一个表格为网站的主体,使它看起来更好一点 . 我的计划是让网站的 table 和主体从 Headers 正下方开始并继续向下 . 我遇到了一个问题,表没有占用 Headers 下方的空间 . 相反,它似乎开始高于页面的开头 . 我改变了身高,使它向下延伸到足以让 table 有足够的空间向下扩展,但事实并非如此 . 它只使用了页面的一小部分,我不知道如何解决这个问题 . 我的HTML代码就在这里(我只使用了魔法并将其作为表格单元格的临时填充文本):

<html>
<head>
<title>OTDA - Myths</title>
<link rel="shortcut icon" href="tv.ico" />
<link rel="stylesheet" type="text/css" href="mythstyle.css" />
</head>
<div id="header">
<header>    
<img class="banner" src="OTDABanner.jpg">

<div class="navigation">
<a href="otda.htm" class="button">Home</a>
<a href="otda.htm" class="button">Donation Station</a>
<a href="otda.htm" class="button">Gift of Life</a>
<a href="otda.htm" class="button">Myths</a>
<a href="otda.htm" class="button">Awareness</a>
</div>
<h1> Myths Regarding <abbr title="Organ and Tissue Donation Awareness">OTDA</h1>
<hr>
</header>
</div>
<body>
<table cellspacing="0">
<colgroup>
    <col style="width:10%">
    <col style="width:80%">
    <col style="width:10%">
  <tr>
    <th></th><!--Don't use these-->
    <th></th><!--Don't use these-->
    <th></th><!--Don't use these-->
  </tr>
  <tr>
    <th></th><!--Don't use these-->
    <td>
    </br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th><!--Don't use these--> </tr> <tr> <th></th><!--Don't use these--> <td> </br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th><!--Don't use these--> </tr> <tr> <th></th><!--Don't use these--> <td> </br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th><!--Don't use these--> </tr> <tr> <th></th><!--Don't use these--> <td> </br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th><!--Don't use these--> </tr> <tr> <th></th><!--Don't use these--> <td </br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th><!--Don't use these--> </tr> </table>
</body> </html> <!--<div class="container"> <img src="image.png" class="image"> <div class="middle"> <a href="http://www.t.org" height: 250; width: 250; target="_blank" class="button">Website</a> </div> </div>-->

这是我的CSS:

/ 身体样式 / body {背景颜色:rgb(190,190,190);文字对齐:对齐;字体系列:“Comic Sans MS”,草书,无衬线;保证金:0!重要;填充:0!重要;身高:10000px; } .picture {/ 为了应用这个,使用/ border:1px solid black; border-radius:50%; /图像有一个圆圈边框 /} .banner {display:block;保证金:0自动; } a.button {color:black;边框:2px脊黑; font-family:“Comic Sans MS”,草书,无衬线; background-color:#ff9191;填充:16px 32px; text-align:center; display:inline-block; font-size:16px;保证金:4px 2px; -webkit-transition-duration:0.4s;过渡期:0.4s;游标:指针; } a.button:hover {background-color:yellow;颜色:黑色;一个{颜色:黑色;文字装饰:无; } a:hover {color:blue;文字装饰:无; } .navigation {text-align:center; } table.tr {background-color:white; } header {background-color:white;保证金:0!重要;填充:0!重要; } h1 {text-align:center; } .container {position:relative;宽度:50%; } .image {opacity:1;显示:块;身高:自动;过渡:.5s轻松;背面 - 可见性:隐藏;边框:2px脊银; } .middle {transition:.5s easy;不透明度:0;位置:绝对;最高:50%;左:17%; transform:translate(-50%, - 50%); -ms-transform:translate(-50%, - 50%)} .container:hover .image {opacity:0.3; } .container:hover .middle {opacity:1; } .text {background-color:#4CAF50;白颜色; font-size:16px;填充:16px 32px; } header {position:fixed;宽度:100%; z-index:1; } table {background-color:white;宽度:100%;位置:绝对;底部:0;身高:100%; } {背景色:rgb(190,190,190); border:1px solid rgb(190,190,190);身高:1px; } td {border:1px solid rgb(0,0,0);身高:1px; } hr {background-color:rgb(190,190,190);颜色:rgb(190,190,190);保证金:0px; margin-left:auto; margin-right:auto;身高:10px;边界:0无;我很难道歉,如果这很难读,我是一个非常草率的编码器,这是匆忙的 . 谢谢 .

回答(2)

2 years ago

https://codepen.io/eGenius18/pen/vmMOVo这样的事情?顺便说一句,你应该清理你的代码 . 不要将 Headers 放在body标记之上,表位置必须是相对的, </br /> 无效...

2 years ago

你的身体标签外面有 Headers : -

<html>

<head>
    <title>OTDA - Myths</title>
    <link rel="shortcut icon" href="tv.ico" />
    <link rel="stylesheet" type="text/css" href="mythstyle.css" />
</head>

<body>
    <div id="header">
        <header>
            <img class="banner" src="OTDABanner.jpg">
            <div class="navigation">
                <a href="otda.htm" class="button">Home</a>
                <a href="otda.htm" class="button">Donation Station</a>
                <a href="otda.htm" class="button">Gift of Life</a>
                <a href="otda.htm" class="button">Myths</a>
                <a href="otda.htm" class="button">Awareness</a>
            </div>
            <h1> Myths Regarding <abbr title="Organ and Tissue Donation Awareness">OTDA</h1>
            <hr>
        </header>
    </div>
    <table cellspacing="0">
        <colgroup>
            <col style="width:10%">
            <col style="width:80%">
            <col style="width:10%">
            <tr>
                <th></th>
                <!--Don't use these-->
                <th></th>
                <!--Don't use these-->
                <th></th>
                <!--Don't use these-->
            </tr>
            <tr>
                <th></th>
                <!--Don't use these-->
                <td>
                    </br />magic
                    
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th> <!--Don't use these--> </tr> <tr> <th></th> <!--Don't use these--> <td> </br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th> <!--Don't use these--> </tr> <tr> <th></th> <!--Don't use these--> <td> </br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th> <!--Don't use these--> </tr> <tr> <th></th> <!--Don't use these--> <td> </br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th> <!--Don't use these--> </tr> <tr> <th></th> <!--Don't use these--> <td </br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</br />magic
</td> <th></th> <!--Don't use these--> </tr> </table>
</body> </html>

有人打败了我!