day07（表单）

布局

    1.默认布局
    2.float布局
    3.层级布局(定位布局)

• 样式
  1内联样式(不用）
  <div style.....>
  2内部样式
  <style>
  *{}
  </style>
  3外部样式
  <link rel="stylesheet" type="text/css" href="base.css"
• 路径: 相对路径
  绝对路径 不要使用
  同级目录 ：<img src="down.jpg" alt="">
  下一级目录 ：<img src="images/location.png" alt="">
• css bug
  1子元素作为父元素的第一个元素,给它margin-top,没用它的元素向下移动
  2如何解决

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

• 表单

• label和input结合使用 要点:label的for的值要和input的id一样
  <form >
  <div><label for="user">用户名</label><input type="text" id="user">
  </div>
  <div> <label for="pwd">密码</label><input type="password" id="pwd">
  </div>
  <div><input type="submit" value="提交">
  </div>

• <技术要点:name值相同 >
  <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>
  <div>

•        < type=checkbox  复合选框 >
        <input type="checkbox">足球
        <input type="checkbox">篮球
        <input type="checkbox">羽毛球
    </div>
    <div>
  

•    < 下拉选框 >
        <select >
            <option value="武昌区">武昌区</option>
            <option value="洪山区" selected>洪山区</option>
            <option value="青山区">青山区</option>
        </select>
    </div>
  

  </form>
  <textarea placeholder="请吐槽" cols="30" rows="10"></textarea>
  
  <div>< ></div>

• input 和button的区别
  input是按钮的形态下,给border,padding不会改变它的width,height

• 横线切过文字

        <fieldset class="border">
        <legend>其他登陆方式</legend>
        </fieldset>
      fieldset{border:none;border-top: 1px solid #333;width:340px;display: inline-block}
  

• 背景长图的处理
  1.用相对定位使其居中对齐

       对总体的a或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;
        对单个定义class
        background-position-x: -84px;
  

  2如果图太大单个定义width相应的margin也要动，保证居中对齐；

        width:23px;
         margin-left: -11.5px;