Issue #10 css实例03热搜榜

[joey123456y]

表格布局 == th(=span+a)+tr(=td+td(=span+a)+..)

[joey123456y]

a { - 选择a标签 - 去除默认下划线样式 - text-decoration：none； a：hover { - 设置指针悬停样式

text-align : - 在td内居右/中/左 width：- td的宽(长)占比

图片置于一个单独的盒子 - 行内块级元素span ：编辑span盒子样式

• background-image：url - 盒子背景取值为图片路径
• width、heigh - 盒子大小
• background-size：- 设置图片缩放填满盒子
• dispaly：inline-block - 作为行内块级元素 - 块级元素可以编辑样式
• vertical-align：- 设置块级元素在行内的垂直布局

[joey123456y]

选中tr下的td会渲染边框、布局比如行高等样式 - h1、p、a、th、td、div、span作为容器 选中span设置背景颜色仅覆盖其包含的文本区域 同理，选中p设置背景颜色会覆盖整个段落的区域 - 因此根据实际需求一般使用span

• line-height : - 编辑内容行高

• cellspacing="0px"消除单元格间距 - 选择table即可作用于全表

[joey123456y]

a标签去默认 - 不纠结起名 - 直接去 - a{ a:hover - 去掉默认的下划线文本装饰

[joey123456y]

左侧单元格的内容居左 右侧单元格的内容居右 因此可以写样式col-1 col-2 - 每一行的左侧单元格都遵循col-1布局样式

[joey123456y]

span是内联元素，因此如若要设置span方块宽高，必须把它dispaly为内联块元素 (inline-block) 在span方块里添加图片作为背景时，必须要设置缩放尺寸background-size: 100% 100%;不然可能不会显示图片

[joey123456y]

你可以把你的默认样式写在.num样式里 虽然元素使用.num样式，但他如果同时使用num和first样式，冲突的样式会被first样式覆盖