我的HTML和CSS不连接需要清晰
这是我正在处理的项目的 HTML 代码，我不确定它是否正确，但请协助并修复任何不正确的地方。我已经移动了很多头代码，但当我单击 HTML 文件时，我发现没有任何区别。没有图像或颜色。我应该有一张蜜蜂的图像。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="beekeeper.css">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<script type="text/javascript">
function formValidation() {
var username = document.getElementById("userName").value;
var email = document.getElementById("email").value;
var birthday = document.getElementById("birthday").value;
var password = document.getElementById("password").value;
var verifyPassword = document.getElementById("verifyPassword").value;
if (username == "" || username == undefined) {
return false;
}
if (email == "" || email == undefined) {
return false;
}
if (birthday == "" || birthday == undefined) {
return false;
}
if (password == "" || password == undefined) {
return false;
}
if (verifyPassword == "" || verifyPassword == undefined) {
return false;
}
return true;
}
</script>
</head>
<body>
<h3>Bee Keeper Sign Up</h3>
<form name="signupForm" method="GET" action="beekeeper_completed.html"
onSubmit="return formValidation();">
<div id="signupFields" style="border: medium;">
<h3>User Info</h3>
<table border="1">
<caption>
Personal accounts allow only 1 private repo, please visit our <a href="https://www.amazon.com/">main site</a> for more information
</caption>
<tr>
<td>User Name<span style="color: red;">*</span></td>
<td><input type="text" name="userName" id="userName" /></td>
</tr>
<tr>
<td>Email<span style="color: red;">*</span></td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Birth Date<span style="color: red;">*</span></td>
<td><input type="date" id="birthday" name="birthday"></td>
</tr>
<tr>
<td>Password<span style="color: red;">*</span></td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td>Verify Password<span style="color: red;">*</span></td>
<td><input type="password" name="verifyPassword" id="verifyPassword" /></td>
</tr>
<tr>
<td>Type</td>
<td>
<input type="radio" name=accountType value="personal" checked>Personal
<input type="radio" name="accountType" value="business">Business
<input type="radio" name="accountType" value="enterprise">Enterprise
<input type="radio" name="accountType" value="other">Other
</td>
</tr>
</table>
</div>
<div id="pricingFields">
<h3>Pricing Info</h3>
<table>
<tr>
<th> </th>
<th>Personal (1-3 users)</th>
<th>Business (4-20 users)</th>
<th>Enterprise (21+ users)</th>
</tr>
<tr>
<td>1 Repo</td>
<td>free</td>
<td>$ 12 repo/month</td>
<td rowspan="3"><a href="">Contact Sales</a></td>
</tr>
<tr>
<td>2-9 Repos</td>
<td>$ 8 repo/month</td>
<td>$ 10 repo/month</td>
</tr>
<tr>
<td>10+ Repos</td>
<td>$ 6 repo/month</td>
<td>$ 8 repo/month</td>
</tr>
</table>
</div>
<br /> <input type="submit" name="submit" value="Sign Up" />
</form>
</body>
</html>
这是我的css代码，我已经在上面的html代码中输入了链接。请帮助修复我没有发现的任何错误。
th
{
font-weight:bold;
height:65px;
border:1px solid black;
}
table{
width:75%;
border:1px solid black;
line-height:50px;
}
body{
background-image:url(beekeeper.jpg);/*from nature.com*/
background-position: right top, left top;
background-repeat: no-repeat, repeat;
text-align:center;
}
h1{
color:rgb(255,153,0);
}
legend{
font-weight:bold;
}
a:hover{
color:rgb(255,153,0);
}
tr,td{
border:1px solid black;
}
here is my HTML code for a project I am working on, im not sure if it is correct but please assist and fix anything that is incorrect.I have been moving the head code around alot but I see no difference when I click my HTML file. There are no images or color. I was supposed to have an Image of a bee.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="beekeeper.css">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<script type="text/javascript">
function formValidation() {
var username = document.getElementById("userName").value;
var email = document.getElementById("email").value;
var birthday = document.getElementById("birthday").value;
var password = document.getElementById("password").value;
var verifyPassword = document.getElementById("verifyPassword").value;
if (username == "" || username == undefined) {
return false;
}
if (email == "" || email == undefined) {
return false;
}
if (birthday == "" || birthday == undefined) {
return false;
}
if (password == "" || password == undefined) {
return false;
}
if (verifyPassword == "" || verifyPassword == undefined) {
return false;
}
return true;
}
</script>
</head>
<body>
<h3>Bee Keeper Sign Up</h3>
<form name="signupForm" method="GET" action="beekeeper_completed.html"
onSubmit="return formValidation();">
<div id="signupFields" style="border: medium;">
<h3>User Info</h3>
<table border="1">
<caption>
Personal accounts allow only 1 private repo, please visit our <a href="https://www.amazon.com/">main site</a> for more information
</caption>
<tr>
<td>User Name<span style="color: red;">*</span></td>
<td><input type="text" name="userName" id="userName" /></td>
</tr>
<tr>
<td>Email<span style="color: red;">*</span></td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Birth Date<span style="color: red;">*</span></td>
<td><input type="date" id="birthday" name="birthday"></td>
</tr>
<tr>
<td>Password<span style="color: red;">*</span></td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td>Verify Password<span style="color: red;">*</span></td>
<td><input type="password" name="verifyPassword" id="verifyPassword" /></td>
</tr>
<tr>
<td>Type</td>
<td>
<input type="radio" name=accountType value="personal" checked>Personal
<input type="radio" name="accountType" value="business">Business
<input type="radio" name="accountType" value="enterprise">Enterprise
<input type="radio" name="accountType" value="other">Other
</td>
</tr>
</table>
</div>
<div id="pricingFields">
<h3>Pricing Info</h3>
<table>
<tr>
<th> </th>
<th>Personal (1-3 users)</th>
<th>Business (4-20 users)</th>
<th>Enterprise (21+ users)</th>
</tr>
<tr>
<td>1 Repo</td>
<td>free</td>
<td>$ 12 repo/month</td>
<td rowspan="3"><a href="">Contact Sales</a></td>
</tr>
<tr>
<td>2-9 Repos</td>
<td>$ 8 repo/month</td>
<td>$ 10 repo/month</td>
</tr>
<tr>
<td>10+ Repos</td>
<td>$ 6 repo/month</td>
<td>$ 8 repo/month</td>
</tr>
</table>
</div>
<br /> <input type="submit" name="submit" value="Sign Up" />
</form>
</body>
</html>
this is my css code, i have entered the link in the html code above. Please help fix any errors I have not caught.
th
{
font-weight:bold;
height:65px;
border:1px solid black;
}
table{
width:75%;
border:1px solid black;
line-height:50px;
}
body{
background-image:url(beekeeper.jpg);/*from nature.com*/
background-position: right top, left top;
background-repeat: no-repeat, repeat;
text-align:center;
}
h1{
color:rgb(255,153,0);
}
legend{
font-weight:bold;
}
a:hover{
color:rgb(255,153,0);
}
tr,td{
border:1px solid black;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
考虑使用
＆lt; img src =“ beekeeper.jpg”＆gt;，然后将其放置在您希望显示的位置。请注意，图片必须与您的HTML和CSS相同的文件夹，才能找到它。如果您将其放在另一个文件夹中，请考虑使用完整路径，例如＆lt; img src =“ c：/users/example/folder/beekeeper.jpg”＆gt;。就您的颜色而言，我在您的CSS中看到您参考H1，但是您在HTML页面上只有H3标签，请考虑将其更改为H3以定位正确的文本。
编辑
我再次浏览了您的代码并重新编写了CSS，因为存在某些格式错误，这些错误某种程度上没有应用代码。尝试此
CSS
html
我从您的HTML文件中删除了您的样式，并将其包含在CSS中，并且一切正常。我放了一张我的照片，也显示了。因此，请尝试查看它是否适合您，如果不只是小心您如何编写CSS。
Consider using
<img src="beekeeper.jpg">and put it wherever you would like your picture to show up. Be aware that the picture has to be in the same folder as your html and css in order for it to be found. If you have it in another folder consider using the full path for example<img src="C:/users/example/folder/beekeeper.jpg">.In terms of your colour, i see in your css you are referencing h1 however you only have h3 tags on your html page, consider changing it to h3 to target the correct text.
Edit
I have gone through your code again and re-wrote the css as there was some formatting errors which somehow wasn't applying the code. Try this
CSS
HTML
I removed your style from your HTML file and included them in the CSS and everything works as i think it should. I put a picture of mine and that also displays. So try and see if it works for you, if not just be careful how you write your CSS.
您似乎有两个关闭
＆lt;/head＆gt;标签。以内部样式删除一个。You seem to have two closing
</head>tags. Remove the one after internal style.