Question

所以现在我正在创建一个网站即时工作，只是让我在页面上定位和格式化所有内容，然后再尝试将其设置为风格化并添加一些javascript。奇怪的是，我在下一行的表单后添加了三个div标签，分成三列。在我的CSS表上，我添加了一个边框，这样我就能看到盒子和标题的大小。问题是什么都没有出现。任何帮助将不胜感激，因为我打赌它的东西非常简单。

    <!doctype html>
    <html lang="en"">
    <head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="operationStyle.css">
<title>Operation:Educate Children</title>
<script language="javascript" type="text/javascript">
        image1=new Image();
        image1.src="supermario.png";
        image2=new Image();
        image2.src="mario.png";
</script>
    </head>
    <body>  
<header class="header">
    <img src="mario.png" alt="header"/>
    <h2>"Only the educated are free-Epictetus"</h2>
</header>




<table>
    <tr>
        <th><a href="educatedChilren.html">Home</a></th>
        <th><a href="aboutUs.html">About Us</a></th>
        <th><a href="currentProject.html">Current Project</a></th>
        <th><a href="getInvolved.html">Get Involved</a></th>
        <th><a href="Calendar.html">Calendar</a></th>
        <th><a href="Donate.html">Donate</a></th>
    </tr>
</table>


<div id="slideshow">
    <img class="slide" name="slide" src="supermario.png" width="100" height="200">
    <script>
        var step=1;
        function slideit(){
            if(!document.images)
                return;
            document.images.slide.src=eval("image"+step+".src")
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
            }
            slideit();
    </script>
<div>
<div class="contact">
    <h2>Contact Us!</h2>
    <form action="contact.php" method="post">
        <strong>Name:</strong>
        <input type="text" name="name"><br></br>
        <strong>E-Mail:</strong>
        <input type="text" name="email"><br></br>
        <strong>Message:</strong>
        <textarea name="message" cols="25" rows="12"></textarea>
        <input type="submit" value="Send">
        <input type="reset" value="Clear">
    </form
</div>

<div class="events">
    <h3><strong>Upcoming Events</strong></h3>
</div>

<div class="follow">
    <h3><strong><Follow Us!></h3></strong>
</div>

<div class="blog">

</div>



    </body>
    </html>

    BODY{
margin-left:15%;
margin-right:15%;
    }
    .header h2{
color:blue;
text-align:right;
border:5px solid black;
font-family:'Bookman Old Style',serif;
font-size:10pt;
font-style:italic;
width:28%;
float:right;
height:200px;

    }


    .header img{
width:70%;
float:left;
border:thin black;
height:200px;
    }
    table{
border:5px solid black;
width:100%;
height:75px;
clear:left;
    }

    .slide{
border:5px solid black;
width:70%;
height:400px;
float:left;
    }

    .contact{
border:5px solid black;
width:27%;
height:400px;
float:right;
    }

    .contact h2{
text-align:center;
    }

    .contact form{
margin-left:2%;
    }

    img.slide{
position:absolute;
left:0;
top:0;
    }

    #slideshow{
position:relative;
overflow:hidden;
    }

    .events{
float:left;
width:33%;
border:black;
height:200px;
    }

    .follow{
float:left;
width:33%;
border:black;
height:200px;
    }

    .blog{
float:left;
width:33%;
height:200px;
border:black;
    }

Answer 1

看看这一行：

<h3><strong><Follow Us!></h3></strong>

您正在使用＆lt;和＆gt;在强大的标签内。这可能搞砸你的HTML。此外，您的代码的顺序不正确，您应该将行更改为：

<h3><strong>Follow Us!</strong></h3>

此外，您的上一个表单的结束标记未正确关闭。

Answer 2

将您的CSS更改为：

.events, .follow, .blog { // they are all the same, why having three times as much code?
   float: left;
   width: 33%;
   border: 1px solid black;
   height: 200px;
}

然后修复缺少的＆gt;在</form

您还错过了</div>

末尾幻灯片div中的/

（并修复Dany指出的标记（<Follow Us!>＆gt; Follow Us!）

然后你会看到DIV

Answer 3

有几个关闭标签出现故障：

<div class="follow">
    <h3><strong><Follow Us!></h3></strong>
</div>

</h3>和</strong>需要重新排序为<h3><strong><Follow Us!></strong></h3>

您还缺少结束表单标记。 </form缺少结算>。

Answer 4

正如已经指出的那样，您的HTML代码有几个语法错误，这使得浏览器呈现您在<div>内添加的3 <div class="contact"> - 并且因为它的高度被指定为切断了。

看不到添加的元素

4 个答案: