Question

我有标签的子标签，并将父标签的背景颜色设为蓝色。它改变了块的背景颜色，但我希望它的颜色为网页的整个宽度。甚至甚至没有显示这种标签的背景图像。这是我的代码：

<html>

<head>
    <title>Login</title>
<style>

    #login
    {
        background-color:blue;
        color:white;
        overflow:hidden;
    }
    #registration
    {
        background-color:white;
        overflow:hidden;
    }
    .logintable
    {

        color:white;
    }
</style>
</head>
<body bgcolor="white">

  <div>
    <div id="login">
        <div style="display: inline-block; white-space: nowrap;float:left">
                <font face="Monotype Corsiva" color="white" size="5">Facebook</font>
        </div>
        <div style="display: inline-block; white-space: nowrap;float:right">
        <table class="logintable" align="right">
            <tr>
                <td>email:</td>
                <td><input type="text" name="email" id="email"></td>
                <td>password:</td>
                <td><input type="password" name="pswd" id="pswd"></td>
                <td><input type="submit" value="Login" onClick="return validate()"></td>
            </tr>     
        </table>
        </div>
    </div>

    <div id="registration" style="background-image:registration.jpg">

        <div id="empty" style="float:left">

            <img src="registration.jpg" height="610">
        </div>
        <div id="registraionform" style="float:right">  
            <table align="right" height="630" cellspacing="10" cellpadding="3">
                 <tr>
                    <td><B><font size="6">Sign Up</font></B></h1>
                    <br><br><font size="3">Its free and always will be.</font>
                    </td>
                </tr>
                <tr>
                    <td>Firstname <input type="text" name="First"></td>
                    <td>Lastname <input type="text"name="Last"></td>
                </tr>
                <tr><td>Gender</td><td><input type="radio"name="gender">male 
                         <input type="radio"name="gender">female</td>
                </tr>
            <tr><td>phone</td><td><input type="text"name="phone"></td></tr>
            <tr><td>email</td><td><input type="text"name="user"</td></tr>
            <tr><td>password</td><td><input type="text"name="pass"></td></tr>
            <tr><td>Re-typepassword</td><td><input type="password"name="rpass"></td></tr>
            <tr><td><input type="checkbox" name="check" id="check">I agree to the terms and conditions</td><td></td></tr>
            <tr><td></td><td><input type="submit"value="Sign Up"></td></tr>
        </table>
        </div>
    </div>
  </div>
</body>
</html>

即使背景图片未加载，我也使用标签在注册旁边显示该图片。

这是结果页面的图片：

web page

Answer 1

在样式部分设置body {margin: 0;}可以修复页面周围的额外空白区域。

着色<div>以覆盖具有浮动子项的网页的整个宽度，<div>

1 个答案: