25  CSS

25.1 表格

<style>
th {
1    font-weight: normal;
}


2table {
  border-collapse: collapse; /* 合并单元格边框 */
  border: 1px solid #ccc; /* 边框样式 */
}
                                                             
3th, td {
  border: 1px solid #ccc; /* 边框样式 */
  padding: 10px; /* 单元格内边距 */
}


4.inrecord-table th:nth-child(even) {
    width: 30%; /* 设置偶数列的宽度为30% */
  }
                                                            
</style>                                                    

1

取消表头粗体设置

2

设置表格的外边框线。

3

设置表格的内边框线。

4

设置class=inrecord-table表格的偶数列的宽度。th元素的宽度可以决定每列的宽度。整个table的宽度跟单元格的内容有关，目前还没掌握单元格字符不多时，整个表的宽度仍为100%的自动调整的方法。

25.2 图片

25.2.1 普通图片

img {
1  float: left;
}

1

图片向左对齐。

25.2.2 sprite图片

即多个icon放在同一张图片上面，通过设置background-position要显示需要的icon

• scss文件里设置样式

// 定义图标的基本样式
.icon {
  display: inline-block;
  width: 150px; // 图片的宽度，同样决定显示图标的右边缘线，宽度变小时，从右边切图
  height: 52px; // 图片的高度，决定要显示图标的上边缘线，高度变不时，从上边切图
  background-image: url('https://piccache.cnki.net/kdn/index/kns8/nimages/icon-sprite.png');
  background-repeat: no-repeat;
}

// 如果有更多图标，继续定义
.icon-cnki {
  background-position: 5px 69%;   //图片向右偏移0，超出设置的图片宽度的部分从右边切图；向下偏移69%，超出设置的高度时，从下边切图。
  }
  

• html显示icon图片

注意：元素标签是<i>，不能通过<img>元素显示。

<i class="icon icon-cnki"></i> 

25.3 Div

25.3.1 边框

div {
border: 1px solid black;
}