[分享]css中序号和图片定位

CSS中的序号和图片定位是网页设计中非常重要的两个方面。序号可以使网页文本在视觉上更加清晰明了，而图片定位则可以将图片放在网页的指定位置上，使整个页面更加美观。ol { counterreset: s...

CSS中的序号和图片定位是网页设计中非常重要的两个方面。序号可以使网页文本在视觉上更加清晰明了，而图片定位则可以将图片放在网页的指定位置上，使整个页面更加美观。

ol {
  counter-reset: section;
}

li:before {
  counter-increment: section;
  content: counter(section) ". ";
} 

在CSS中，序号可以通过使用计数器实现。使用counter-reset可以将计数器的值重置，而counter-increment可以将计数器的值增加，最后在content中通过counter()函数调用计数器的值，并添加序号后输出。

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

而图片的定位则可以通过使用position属性，设置为absolute来实现。然后可以通过top和left属性分别设置图片相对于父元素的顶部和左侧的距离来定位图片。使用transform属性中的translate()函数可以将图片向上和向左移动其自身宽高的一半，使其位置在父元素的中心。