首页 文章

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

提问于
浏览 次
-1

我是一般的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无;我很难道歉，如果这很难读，我是一个非常草率的编码器，这是匆忙的 . 谢谢 .

html css

2 回答

  • 0

    你的身体标签外面有 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>

    有人打败了我！

    回复于
  • 0

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

    回复于

相关问题