Question

您好，在下面的代码中我显示登录表单。没有一切正常，但我希望将此表单更改为响应。

任何人都可以帮助我

HTML

<div class="login-01">
        <div class="one-login  hvr-float-shadow">
            <div class="one-login-head">
                    <img src="images/top-lock.png" alt=""/>
                    <h1>LOGIN</h1>
                    <span></span>
            </div>
            <form>
                <li>
                    <input type="text" class="text" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}" ><a href="#" class=" icon user"></a>
                </li>
                <li>
                    <input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"><a href="#" class=" icon lock"></a>
                </li>
                <div class="p-container">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked><i></i>Remember Me</label>
                        <h6><a href="#">Forgot Password ?</a> </h6>
                            <div class="clear"> </div>
                </div>
                <div class="submit">
                        <input type="submit" onclick="myFunction()" value="SIGN IN" >
                </div>

                    <h5>Don't have an account ?<a href="AdmissionForm.html"> Sign Up </a></h5>
                </form>
        </div>

</div>

Answer 1

如果您的.login-01类中没有任何具有固定宽度的元素，则表单已经响应。请参阅http://codepen.io/panchroma/pen/gbZrKj并更改浏览器宽度。

为了获得最佳效果，您还希望在网页的头部包含以下元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

您可能需要包含CSS重置，例如http://cdnjs.com/libraries/normalize

这最后两个步骤可能会对您的页面布局造成严重破坏，但使整个页面响应是另一个问题。

祝你好运！

如何将此表单更改为响应式

1 个答案: