DAY6作业

来源：互联网发布：vb mscomctl.ocx 编辑：程序博客网时间：2024/06/05 15:08
忙了一天，终于有时间写了。关于动态的部分搞不懂，先把静态的写了，
<html>    <head>        <title>登录页面</title><!-- 如何使用定位实现登陆框在页面中的位置会随着页面的大小自动调整呢，使用数值定义距离的话，relative和absolute都太死板，不合适，float就更加不合适了。页面变小就会乱飘。解决方法，用百分比表示距离。但定位是根据块左上角定位的，怎么确定块在页面中心呢。这个时候看不见的外边距margin就派上用场了，所以，熟用百分比和margin，padding这些很重要。当框的宽度可变，想给设置个最小宽度时，可以在里面加个塞--一个定义了具体宽度的块。具体如下：-->        <style>                #container {                            width:500px;                            height:530px;                            border:solid 1px gray;                            /*<!--position:absolute;                            top:50%;                            left:50%;                            margin-top:-250px;                            margin-left:-200px-->*/                            margin:0 auto;                            }                #top{                    width:500px;                    height:50px;                    line-height:50px;                    background-color:rgb(247,247,247);                    margin:0px 0px 30px 0px;                    padding:0px;                }                img{                    vertical-align:middle;                    width:30px;                    height:30px;                    margin:0px;                }                p.topp{                    font-size:20px;                    margin:0px;                }                p.secondp{                    font-size:15px;                    margin:0px 15px 0px 0px;                }                #second{                    width:500px;                    height:30px;                    text-align:right;                    line-height:20px;                    margin:20px 0px 0px 0px;                }                #box{                    float:left;                    margin-left:15px;                    margin-bottom:1px;                }                #box1{                    font-size:13px;                    width:200px;                    height:30px;                    float:left;                    margin-left:15px;                    line-height:30px;                }                #box2{                    font-size:13px;                    width:200px;                    height:30px;                    float:right;                    line-height:30px;                    text-align:right;                    margin-right:15px;                }                #buttom{                    width:470px;                    height:100px;                    margin-left:15px;                }                .text1{                        border:solid 2px #ccc;                        width:466px;height:40px;                        background-image:url("zhanghao.jpg");                        background-size:40px 40px;                        background-origin:border-box;                        background-repeat:no-repeat;                        margin-left:15px;                        margin-bottom:7px;                        margin-top:7px;                        }                  .text1 input{                        float:left;                        border:none;                        background:none;                        height:40px;                        line-height:30px;                        width:100%;                         text-indent:40px;                        }                  .text2{                        border:solid 2px #ccc;                        width:466px;height:40px;                        background-image:url("mima.jpg");                        background-size:40px 40px;                        background-origin:border-box;                        background-repeat:no-repeat;                        margin-left:15px;                        margin-bottom:7px;                        margin-top:7px;                        }                  .text2 input{                        float:left;                        border:none;                        background:none;                        height:40px;                        line-height:30px;                        width:100%;                         text-indent:40px;                        }         </style>    </head>    <body>        <div id="container">            <div id="top">                <p class="topp"><img src="baidu.jpg"/>登陆百度账号</p>            </div>            <div id="second">                <p class="secondp"><img src="shouji.jpg" style="width:20px;height:20px;margin-right:5px;vertical-align:top;"/>短信快捷登陆</p>            </div>            <div class="text1">                      <input type="text"/>              </div>              <div class="text2">                      <input type="password"/>              </div>              <div id="box">                <form>                    <!--<input type="text" name="user" style="width:470px;height:40px;">                    <input type ="password" name="password" style="width:470px;height:40px;margin-top:7px;">-->                    <input type="text" name="验证码" style="width:210px;height:40px;margin-top:7px;">                    <input type="text" name="验证码" value="验证码区域" style="width:210px;height:40px;margin-top:7px; margin-left:46px;">                <form>            </div>            <div id="box1">                <form>                    <input type="checkbox" name="下次自动登录" style="vertical-align:text-top;margin-left:0px;">下次自动登录                </form>            </div>            <div id="box2">                <a href="http://www.baidu.com/">登陆遇到问题</a>            </div>            <div style="margin-bottom:0px;margin-top:130px;">                <form style="margin-bottom:8px;">                    <input type="button" value="登陆" style="width:470px;height:40px;margin-left:15px;background-color:rgb(68,144,247);">                </form>            </div>            <div style="text-align:right;font-size:13px;margin-right:15px;margin-bottom:20px;">                <a href="http://www.baidu.com/">立即注册</a>            </div>            <hr/>            <div id="buttom">                <p>可以使用以下方式登陆</p>                <img src="qq.jpg" style="float:left;margin-right:4px;width:25px;">                <img src="weibo.jpg" style="float:left;">            </div>        </div>    </body></html>
页面效果
0 0