#前端学习笔记#day9_1 电影卡片 表格 表单

• 实例 电影卡片
  
  • box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    
    • 设置阴影，0 0 表示偏移量，10px是模糊半径
      
  • vertical-align: bottom; 不要让图片基线对齐
    
  • padding:0 18px; 上下不要边距，左右18像素
    
  • margin: 13px 0 15px 0; 上右下左
    
  • line-height: 20px; 行距=字体大小+行间距=14+6
    
  • 这边设置line-height为了使得图标居中
    
• 表格
  
  • 现实生活中，经常需要用表格来表示一些格式化的数据：
    
    • 课程表、人名单、成绩单......
      
  • 同样 在网页中我们也需要使用表格，我们通过table标签来创建一个表格
    
  • 在table里tr表示表格中的一行，有几个tr表示几行
    
  • tr中使用td表示一个单元格，有几个td就有几个单元格
    
    • <td colspan=’2‘>表示横向合并两个单元格
      
    • <td rowspan=’2‘>表示纵向合并两个单元格
      
  • th可以替换td
    
• 可以将表格分为三个部分：
  
  • 头部 thead
    
  • 主体 tbody
    
  • 底部 tfoot
    
• align可以设置表格居中 <table border="1" width='50%' align="center">
  
• table也属于块元素
  
• 表格的样式
  
  • border-spacing: 5px;指定边框之间的距离
    
  • border-collapse: collapse;设置边框的合并
    
  • width: 50%;
    
  • 希望一行一个颜色，应该给tr设置
    
  • 如果希望偶数行和奇数行颜色不一样，可以设置nth-child(2n) 或者把2n换为odd
    
  • 如果表格没有使用tbody，而是直接使用tr，那么浏览器会自动创建一个tbody,并且把所有的tr放到tbody里
    
  • tr不是table的子元素
    
  • 默认情况下，元素在td里面是垂直居中的，可以通过vertical-align: ;来设置（top bottom middle...）
    
  • text-align: ;可以设置文字位置
    
• display: table-cell; 将文字设置成为单元格td
  
  • 然后我们就可以使用vertical-align
    
• 表单
  
  • 现实生活中表单用于提交数据
    
  • 网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
    
  • 使用form标签创建一个表单
    
    • form的属性
      
      • action 表单要提交的服务器的地址
        
      • 文本框 input <input type="text" > 数据要提交到服务器，必须要为元素指定一个name属性，username\keyword等
        
      • 提交按钮 input <input type="submit">
        
      • 密码框 <input type="password"> 打字出来会是隐藏的状态
        
      • 单选按钮，设置name属性，如果name属性一样那么就是一组<input type="radio" name='hello'>
        
      • 像这种选择框，一定要指定一个value属性，value属性最终会作为用户的填写值，传递给服务器
        
        • checked可以将单选按钮设置为默认选中
          
      • 多选框
        
        • type="checkbox"
          
        • 指定一个name值
          
      • 下拉列表
        
        • select，里面需要嵌套option
          
    • 表单补充
      
    • <input type="button" value="按钮"> 普通按钮
      
    • <input type="reset"> 重置按钮
      
    • button和input是一样的，button用的更多，input自结束
      
    • <input type="email">可以输入电子邮件
      
    • autocomplete自动补全
      
    • readonly 将表单项设置为只读
      
    • disabled将表单项禁用
      
    • autofocus自动获取焦点