だから今、私はウェブサイトを始めて、ページにすべてを配置してフォーマットしてから、さらにスタイルを整えてjavascriptを追加しようとしています。奇妙なことに、次の行を 3 つの列に分割するために、フォームの後に 3 つの 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;
}