day07（表单）

布局

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

• 样式
  1内联样式(不用）
  
  
  2内部样式
  
  3外部样式
  
• 路径: 相对路径
  绝对路径 不要使用
  同级目录 ：
  下一级目录 ：
• css bug
  1子元素作为父元素的第一个元素,给它margin-top,没用它的元素向下移动
  2如何解决

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

• 表单

• label和input结合使用 要点:label的for的值要和input的id一样
  

  
  

  用户名
  

  
  

  密码
  

  
  

  
  

• <技术要点:name值相同 >
  

  
  

  性别

  
  男
  女
  
  
  

•        < type=checkbox  复合选框 >
        足球
        篮球
        羽毛球
    

   < 下拉选框 >
      
          武昌区
          洪山区
          青山区
      
  

< >

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

横线切过文字

      

      
其他登陆方式
      
    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;