发表于: 2016-06-19 21:01:42

1 1273


  • 今天完成的事情:完成task4的切图,完成task4

    明天计划的事情:看后面的任务

    遇到的问题:div的定位差不多熟练了,

    收获:了解position:fixed,inhert,static,relative,absolute属性。

  • http://www.w3school.com.cn/cssref/pr_class_display.asp。

  • 学习了float和clear使用方法

  • display:inline; 内联元素,简单来说就是在同一行显示。
    display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
    display:inline-block; 就是在同一行内的块级元素。

     html---------------------------------                                
  • <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link href="../../public.css/task-4.css" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
     <title>登陆</title>
    </head>
    <body class="body">
    <img src="images/2_01.jpg" width="100%">
    <div class="head">
     <div class="head-left">关闭</div>
     <div class="head-center">登陆</div>
     <div class="head-right">注册</div>
    </div>
    <div class="input">
    <div class="div1" >
    <img class="image1" src="images/2_02.png"><input class="input1" type="" name="" value="请输入手机号">
    </div>
    <div class="div2">
    <img class="image2" src="images/2_05.png"><input class="input2" type="" name="" value="请输入密码">
    </div>
    </div>
     <input class="button1"type="button" name="" value="登录">
    <div class="p1">忘记密码?</div>
    </body>
    </html>
  • css------------------------------------
  • @charset "utf-8";
    /* CSS Document */
    .body{
     background-color:#eff0f4;
    }
    .head{
     font-size:4vw;
     height:5vw;
     background-color:#5AC2CD;
     margin:-0.3rem 0 0 0 ;
     text-align:center;
    }
    .head-left{
     float: left;
     color: white;
     font-size: 3vw;
     margin:0 0 0 5%;
    }
    .head-center{
     float: left;
     color: white;
     font-size: 3vw;
        margin: 0 0 0 35%; 
    }
    .head-right{
     font-size: 3vw;
     color: white;
     float: right;
     margin: 0 5% 0 0;
    }
    .input
    {
     width: 100%;
     height: 25VW;
     background-color: #eff0f4;
     padding: 0;
     position: relative;
     
    }
    .div1,.div2{
     width: 100%;
     background-color: white;
     margin:1% 0 1% 0;
     position: absolute;
     height: 9vw;
    }
    .div2{
     margin: 11% 0 0 0;
    }
    .input1,.input2{
     vertical-align: middle;
     width: 30%;
     height: 4vw;
     border: none;
     border-width: 0;
     margin: 2.75vw 0 0 0;
      float: left;
        position: relative;
        font-family: Microsoft YaHei,serif;
        font-size: 100%;

    }
    .image1,.image2{
     float: left;
     position: relative;
     width:10vw;
    }
    .button1{width: 100%;
     height: 10vw;
     background-color: #5AC2CD;
     
     padding: 0 15% 0 15%;
     font-size: 8vw;
     border: none;
     border: 0 0 0 0;
      color: white;
     float: none;
     background-color: none;
    }
    .p1{
     float: right;
     margin: 2% 0 0 0;
     
     color: #5AC2CD;
     font-size: 4.45vw;
     font-weight: bolder;
    }

返回列表 返回列表
评论

    分享到