#前端学习笔记#day9_1 电影卡片 表格 表单
- 实例 电影卡片
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
- 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就有几个单元格
表示横向合并两个单元格
表示纵向合并两个单元格
- 可以将表格分为三个部分：
- align可以设置表格居中
width='50%' align="center">
- table也属于块元素
- 表格的样式
- border-spacing: 5px;指定边框之间的距离
- border-collapse: collapse;设置边框的合并
- 如果希望偶数行和奇数行颜色不一样，可以设置nth-child(2n) 或者把2n换为odd
- 如果表格没有使用tbody，而是直接使用tr，那么浏览器会自动创建一个tbody,并且把所有的tr放到tbody里
- 默认情况下，元素在td里面是垂直居中的，可以通过vertical-align: ;来设置（top bottom middle...）
- display: table-cell; 将文字设置成为单元格td
- 表单
- 网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
- 使用form标签创建一个表单
- form的属性
- 像这种选择框，一定要指定一个value属性，value属性最终会作为用户的填写值，传递给服务器
- 下拉列表
- select，里面需要嵌套option
- button和input是一样的，button用的更多，input自结束
| |