文章/答案/技术大牛

发布

社区首页 >问答首页 >我的html和css不是链接，需要清晰。

问我的html和css不是链接，需要清晰。
EN

Stack Overflow用户

提问于 2022-04-05 15:46:39

回答 2查看 72关注 0票数 0

这是我正在做的一个项目的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>&nbsp;</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;
     }

html

css

hyperlink

回答 2

Stack Overflow用户

发布于 2022-04-05 16:12:31

考虑使用<img src="beekeeper.jpg">，并将其放在您希望图片显示的任何位置。请注意，为了找到图片，图片必须与html和css位于同一个文件夹中。如果您将它放在另一个文件夹中，请考虑使用完整的路径，例如<img src="C:/users/example/folder/beekeeper.jpg">。

就您的颜色而言，我在您的css中看到您所引用的h1，但是您的html页面上只有h3标记，请考虑将其更改为h3以针对正确的文本。

编辑

我又看了一遍你的代码，重新写了css，因为有一些格式化错误，不知何故没有应用代码。尝尝这个

CSS

th{
    font-weight:bold;
    height:65px;        
    border:1px solid black;
}

table{
    width:75%;        
    border:1px solid black;        
    line-height:50px;     
}

body{
    background-image:url(11123337.jpg);/*from nature.com*/        
    background-position: right top, left top;        
    background-repeat: no-repeat, repeat;        
    text-align:center;
}

h3{
    color: rgb(255, 153, 0);
}

legend{
    font-weight:bold;
}

a:hover{
    color:rgb(255,153,0);     
}

tr,td{
    border:1px solid black;
}

td, th{
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

table{
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="beekeeper.css">

<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>&nbsp;</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>

我从HTML文件中删除了您的样式，并将它们包含在CSS中，一切都按我所认为的那样工作。我放了一张我的照片，那也是展示的。所以，试着看看它是否适合你，如果不是只是小心你如何写你的CSS。

票数 1

Stack Overflow用户

发布于 2022-04-05 15:49:52

您似乎有两个关闭的</head>标记。去掉内部样式后的那个。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71754783

复制

相似问题

问我的html和css不是链接，需要清晰。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的html和css不是链接，需要清晰。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的html和css不是链接，需要清晰。
EN