Day07

2018-07-17 本文已影响0人雪落殇晨

一.样式

1.1内联样式和常规样式

    div{
            width:100px;
            height:100px;
            background: red;
        }*/
    </style>
</head>
<body>
    <div style=" width:100px; height:100px;background: red;"></div>

常规样式的话，方便调试修改
而内联样式写法不方便修改和调试

二.输入框和表单

1.1.input输入框

style>
        input{
            width:100px;
            height:40px;
            border: 1px solid #333;
        }
        .btn{
         /*   padding:40px;*/
         width:102px;
         height:42px;
}
  </style>
</head>
<body>
    <input type="text"><br>
    <input type="submit" class="btn" value="提交"

input是按钮的形态下，给border padding不会改变它的width height值
input按钮形态------------<input type="submit" class="btn" value="提交">

1.2.表单

 <div>
            <label for="user">用户名</lable> <input type="text" id="user">
        </div>
        <div>
            <label for="pwd">密码</label> <input type="text" id="pwd">
        </div>
        <div>
            <input type="submit" value="提交">
        </div>

label和input的结合使用时，其要点是 label的for值和input的id值必须一致

<div>
  <h4>性别</h4>
            <label for="male">男</label><input type="radio" id="male" name="sex">
            <label for="female">女</label><input type="radio" id="female" name="sex">
</div>

其单选框的name值相同

<div>
    <input type="checkbox">足球
            <input type="checkbox">足球
            <input type="checkbox">足球
        </div>

其为复合选框

<div>
<select>
                <option value="武昌区">武昌区</option>
                <option value="洪山区" selected>洪山区</option>
                <option value="青山区">青山区</option>
            </select>
        </div>

其为下拉选框

 <textarea placeholder="请吐槽" color="30" rows="10"></textarea>

其为文本域

三.样式的问题

1.1.宽高的继承

  .parent{
            width:100px;
            height:100px;
            background: red;
            position:relative;

        }
        .child{
            height: 50px;
            background: green;
            position:absolute;
        }

子元素的绝对定位，不会继承父元素的宽度和高度

1.2.margin的问题

  .parent{
            width:200px;
            height: 200px;
            background: red;

        }
        .child{
            margin-top:50px;
            width:100px;
            height: 100px;
            background: green;
        }

子元素作为父元素的第一个元素，给它margin-top 无效，它的父元素向下移动
解决问题设置一个伪元素，使子元素不作为第一个元素

  .row:after{
            content:"";
            display:table;
        }

四.图片链接做法

1.1

     <fieldset class="footer">
          <legend>
          其他方式登录
          </legend>
        </fieldset>

        <div class="allicon">
            <a href="#"><span class="qq"></span></a>
            <a href="#"><span class="weibo"></span></a>
            <a href="#"><span class="zhifu"></span></a>
            <a href="#"><span class="weixin"></span></a>
        </div>

 fieldset{
            border:none;
        }
        .allicon a{
             display:inline-block;
             width:30px;
             height:30px;
             border-radius:30px;
             position:relative;
             background: #333;
             margin-top: 15px;
        }
        .allicon span{
            position:absolute;
            display:inline-block;
            width:18px;
            height:18px;
            background: url("images/icons_type.png") no-repeat;
            left:50%;
            top:50%;
            margin-left: -9px;margin-top: -9px;
        }
        .allicon .qq{
            background-position-x:-18px;
        }
        .allicon .weibo{
            background-position-x:-36px;
        }
        .allicon zhifu{
            background-position-x:-57px;
            margin-left:-13px;
            width:26px;
        }
        .allicon .weixin{
            background-position-x:-84px;
            margin-left:-11.5px;
            width:23px;
        }

通过一张图片来实现多个链接
向服务器发送请求仅有一次

10.PNG