Fatal编程技术网

Javascript 定位不当

javascript html css

Javascript 定位不当,javascript,html,css,positioning,footer,Javascript,Html,Css,Positioning,Footer,我的问题是我的页脚没有像我告诉它的那样放在页面底部。我不知道如何修复它，也不知道如何修复输入框，使它们在我输入时变成黑色而不是灰色。 网站 道森哈德逊 Css /*---------------------------------------风格一切---------------------------------------*/ *{ 填充：0px； 边际：0px； } 正文，html{ 宽度：100%； 身高：100%； } /*--------------------

我的问题是我的页脚没有像我告诉它的那样放在页面底部。我不知道如何修复它，也不知道如何修复输入框，使它们在我输入时变成黑色而不是灰色。 


网站

    

  • 

  • 

  • 

  • 








道森哈德逊
Css
/*---------------------------------------风格一切---------------------------------------*/
*{
填充：0px；
边际：0px；
}
正文，html{
宽度：100%；
身高：100%；
}
/*------------------------------------使页面灵活-------------------------------------*/
@媒体屏幕和屏幕（最大宽度：600px）{
ul.topnav li.对，
ul.topnav li{
浮动：无；
}
ul.topnav li a{
字号：10pt；
}
}
/*=============================================================主页============================================*/
/*------------------------------------------横幅代码-------------------------------------------*/
#横幅{
宽度：100%；
高度：570px；
背景图像：url（'../images/DH.png'）；
背景大小：100%；
背景重复：无重复；
边框底部：#333实心5px；
}
/*-------------------------------------------链接代码-------------------------------------------*/
ul.topnav{
宽度：100%；
列表样式类型：无；
保证金：0；
填充：0；
溢出：可见；
背景色：#333；
位置：固定；
左：10%；
z指数：10；
}
ul.topnav li{
浮动：左；
}
ul.topnav li a{
显示：块；
颜色：白色；
文本对齐：居中；
填充：10px 30px；
文字装饰：无；
字体系列：“巴鲁帕吉”，草书；
字号：20pt；
}
ul.topnav李a：悬停{
背景色：#34B5E0；
}
ul.topnav li.对{
位置：绝对位置；
右翼：7.5%；
右：10.5%；
}
/*---------------------------------------主页代码---------------------------------------*/
#主要{
宽度：80%；
位置：相对位置；
顶部：100px；
左：10%；
z指数：1；
背景颜色：粉红色；
}
/*-------------------------------------------行代码-------------------------------------------*/
.行{
宽度：100%；
身高：40%；
背景图像：url（'../images/holder.jpg'）；
背景大小：100%；
背景重复：无重复；
边框：2个黑色实心；
z指数：2；
}
.rowText{
宽度：40%；
身高：90%；
位置：相对位置；
最高：5%；
右：2.5%；
浮动：对；
}
.rowText按钮{
宽度：30%；
身高：9%；
边界半径：5px；
背景：黑色；
边界：无；
颜色：白色；
字体系列：“蹦极”，草书；
字体大小：15磅；
光标：指针；
}
.rowText按钮.Fb{
位置：绝对位置；
底部：0%；
右：0%；
背景图片：url（'../images/facebook.jpg'）；
背景大小：100%；
背景重复：无重复；
不透明度：0.7；
}
.rowText按钮.Pin{
位置：绝对位置；
底部：0%；
右：35%；
背景图像：url（'../images/pinterest.jpg'）；
背景大小：100%；
背景重复：无重复；
不透明度：0.7；
}
.rowText按钮.Tw{
位置：绝对位置；
底部：0%；
左：0；
背景图片：url（'../images/twitter.jpg'）；
背景大小：100%；
背景重复：无重复；
不透明度：0.7；
}
按钮。tw:悬停，按钮。Pin:悬停，按钮。Fb:悬停{
不透明度：1；
}
.rowText h1{
颜色：rgba（255255,0.7）；
字体系列：“蹦极”，草书；
字体大小：30磅；
位置：绝对位置；
顶部：-20px；
左：0px；
}
.rowText h2{
颜色：rgba（255255,0.5）；
字体系列：“巴鲁帕吉”，草书；
字体大小：15磅；
位置：绝对位置；
排名前10%；
左：0px；
}
.rowText h3{
颜色：白色；
字体系列：“巴鲁帕吉”，草书；
字体大小：15磅；
位置：绝对位置；
最高：20%；
左：0px；
}
.footer{/*---------------------------------------页脚代码-----------------------------------------------------*/
背景图像：url（'../images/footer.png'）；
背景重复：无重复；
背景大小：100%；
宽度：100%；
高度：200px；
位置：绝对位置；
底部：0px；
}
.页脚u{
字体大小：22px；
位置：绝对位置；
底部：10px；
左：10%；
}
.footer a:已访问{
颜色：白色；
}
.footer a:活动{
颜色：#34B5E0；
}
.footer a:悬停{
文字装饰：无；
颜色：灰色；
光标：指针；
}
/*========================================================================联系页面==========================================*/
#主要输入{
高度：50px；
宽度：20%；
字体系列：“巴鲁帕吉”，草书；
字号：20pt；
文本对齐：居中；
位置：相对位置；
左：20%；
颜色：灰色；
左边距：-4px；
}
#主输入：激活{
颜色：黑色；
}
#主输入#电子邮件{
宽度：40%；
}
#主输入#消息{
宽度：60%；
高度：400px；
文本对齐：左对齐；
}
/*==============================================================================新闻页===========================================*/
答案在

  • 按F12打开开发人员工具
  • 查看页面的CSS，尤其是wrap id的样式（您应该将横幅和主要内容包装在wrap div中）->最小高度：100%是关键

  • 还要注意wrap div中的push div（但是如果您使用它，还可以在wrap样式中添加边距：0 auto-60px）

这应该是您想要的答案。

至于您的第二个问题，我想您的意思是希望字段中有一个灰色提示，然后在输入时将文本变为黑色 
    <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===========================================*/