Question

我的问题是我的页脚没有定位在页面底部，就像我告诉它的那样。我不知道如何修复它，以及有关如何修复输入框的任何提示，以便当我输入它们时它们变成黑色而不是灰色。

    <head>
        <title>Website</title>
        <link rel='stylesheet' type='text/css' href='./css/style.css'>
        <link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Baloo+Paaji" rel="stylesheet">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
<body>
    <div id='banner'>
        <div class='nav'>
            <ul class="topnav">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="#news">News</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li class="right"><a href="#about">About</a></li>
            </ul>
        </div>
    </div>
    <div id='main'>
        <input type="text" value="First Name" name="First Name" id="First Name" onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" />
        <input type="text" value="Middle Name" name="Middle Name" id="Middle Name" onblur="if (this.value == '') {this.value = 'Middle Name';}" onfocus="if (this.value == 'Middle Name') {this.value = '';}" />
        <input type="text" value="Last Name" name="Last Name" id="Last Name" onblur="if (this.value == '') {this.value = 'Last Name';}" onfocus="if (this.value == 'Last Name') {this.value = '';}" />
        <br>
        <input type="text" value="Email" name="Email" id="email" onblur="if (this.value == '') {this.value = 'Email';}" onfocus="if (this.value == 'Email') {this.value = '';}" />
        <input type="text" value="Phone Number" name="Phone Number" id="Phone Number" onblur="if (this.value == '') {this.value = 'Phone Number';}" onfocus="if (this.value == 'Phone Number') {this.value = '';}" />
        <br>
        <input type="text" value="Country" name="Country" id="Country" onblur="if (this.value == '') {this.value = 'Phone Number';}" onfocus="if (this.value == 'Country') {this.value = '';}" />
        <input type="text" value="Age" name="Age" id="Age" onblur="if (this.value == '') {this.value = 'Age';}" onfocus="if (this.value == 'Age') {this.value = '';}" />
        <input type="text" value="Gender" name="Gender" id="Gender" onblur="if (this.value == '') {this.value = 'Gender';}" onfocus="if (this.value == 'Gender') {this.value = '';}" />
        <br>
        <input type="text" value="Message" name="Message" id="Message" onblur="if (this.value == '') {this.value = 'Message';}" onfocus="if (this.value == 'Message') {this.value = '';}" />
    </div>
</body>
<body>
    <div class='footer'>
        <u><a href=''>Dawson Hudson</u>
    </div>
</body>
</html>
Css

/*---------------------------------------Styles Everything---------------------------------------*/
*{
    padding:0px;
    margin: 0px;
}
body, html {
    width: 100%;
    height: 100%;
}
/*------------------------------------Makes The Page Flexible-------------------------------------*/
@media screen and (max-width: 600px){
    ul.topnav li.right,
    ul.topnav li{
        float: none;
    }
    ul.topnav li a {
        font-size: 10pt;
    }
}
/*===========================================Home Page============================================*/
/*------------------------------------------Banner Code-------------------------------------------*/
#banner {
    width: 100%;
    height: 570px;
    background-image: url('../images/DH.png');
    background-size: 100%;
    background-repeat: no-repeat;
    border-bottom: #333 solid 5px;
}
/*-------------------------------------------Link Code-------------------------------------------*/
ul.topnav {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background-color: #333;
    position: fixed;
    padding-left: 10%;
    z-index: 10;
}
ul.topnav li {
    float: left;
    }
ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 30px;
    text-decoration: none;
    font-family: 'Baloo Paaji' ,cursive;
    font-size: 20pt;
}
ul.topnav li a:hover {
    background-color: #34B5E0;
    }
ul.topnav li.right {
    position: absolute;
    padding-right: 7.5%;
    right: 10.5%;
}
/*---------------------------------------Main Page Code---------------------------------------*/
#main {
    width: 80%;
    position: relative;
    top: 100px;
    left: 10%;
    z-index: 1;
    background-color: pink;
}
/*-------------------------------------------Row Code-------------------------------------------*/
.row {
    width: 100%;
    height: 40%;
    background-image: url('../images/holder.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    border: 2px black solid;
    z-index: 2;
}
.rowText {
    width: 40%;
    height: 90%;
    position: relative;
    top: 5%;
    right: 2.5%;
    float: right;
}
.rowText button {
    width: 30%;
    height: 9%;
    border-radius: 5px;
    background: black;
    border: none;
    color: white;
    font-family: 'bungee', cursive;
    font-size: 15pt;
    cursor: pointer;
}
.rowText button.Fb {
    position: absolute;
    bottom: 0%;
    right: 0%;
    background-image: url('../images/facebook.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
}
.rowText button.Pin {
    position: absolute;
    bottom: 0%;
    right: 35%;
    background-image: url('../images/pinterest.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
}
.rowText button.Tw {
    position: absolute;
    bottom: 0%;
    left: 0;
    background-image: url('../images/twitter.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
}
a button.tw:hover, button.Pin:hover, button.Fb:hover {
    opacity: 1;
}
.rowText h1 {
    color:  rgba(255,255,255,0.7);
    font-family: 'bungee', cursive;
    font-size: 30pt;
    position: absolute;
    top: -20px;
    left: 0px;
}
.rowText h2 {
    color: rgba(255,255,255,0.5);
    font-family: 'baloo paaji', cursive;
    font-size: 15pt;
    position: absolute;
    top: 10%;
    left: 0px;
}
.rowText h3 {
    color: white;
    font-family: 'baloo paaji', cursive;
    font-size: 15pt;
    position: absolute;
    top: 20%;
    left: 0px;
}
.footer { /*---------------------------------------------------Footer Code-----------------------------------------------------*/
    background-image: url('../images/footer.png');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 200px;
    position: absolute;
    bottom:0px;
}
.footer u{
    font-size: 22px;
    position: absolute;
    bottom: 10px;
    left: 10%;
}
.footer a:visited {
    color: white;
}
.footer a:active{
    color: #34B5E0;
}
.footer a:hover {
    text-decoration: none;
    color: grey;
    cursor: pointer;
}
/*=========================================Contact Page==========================================*/
#main input {
    height: 50px;
    width: 20%;
    font-family: 'baloo paaji', cursive;
    font-size: 20pt;
    text-align: center;
    position: relative;
    left: 20%;
    color: grey;
    margin-left: -4px;
}
#main input:active {
    color: black;
}
#main input#email {
    width: 40%;
}
#main input#Message {
    width: 60%;
    height: 400px;
    text-align: left;
}
/*===========================================News Page===========================================*/

Answer 1

您可以在bootstrap sticky footer docs

中找到答案

按F12打开开发者工具
查看页面的CSS，特别是 wrap id的样式（你应该包装 banner 和 main wrap div中的内容 - ＆gt; min-height：100％是关键
还注意 wrap div中的 push div（但是如果你使用它，还要添加 margin：0 auto -60px to wrap style）

这应该给出你想要的答案。

Answer 2

至于你的第二个问题，我认为你的意思是你希望在该字段中有灰色提示，然后在开始输入时将文本变为黑色。开始键入时更改文本颜色的最简单方法是让onfocus添加一个使文本变黑的类，然后在必要时让onblur删除该类。

首先，您需要在样式中添加一个新类，将文本变为黑色。

.blacktext
{
  color: black;
}

添加一个类很简单：

onfocus="this.className += ' blacktext'; if (this.value == 'First Name') {this.value = '';}"

删除需要一些字符串搜索：

onblur="if (this.value == '') {this.value = 'First Name'; this.className = this.className.replace(' blacktext', '');}"

请注意，如果当前值为“First Name”，您可能希望激活onblur，以便在您单击该字段并再次退出时不会保持黑色。

没有正确定位

2 个答案: