css 注意

最新推荐文章于 2025-01-02 11:47:20 发布

原创最新推荐文章于 2025-01-02 11:47:20 发布 · 758 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了三种实用的CSS技巧：如何为并列div设置最后一个div的样式；如何利用伪元素实现div后的气泡小三角效果；以及如何正确设置position属性来实现特定布局。这些技巧对于前端开发者来说非常实用。

1、并列div的最后一个div样式设置

div:last-of-type{}

2、div后气泡小三角实现

.class {
  width: 23%;
  background: #04A55F;
  border-radius: 3px;
  position: relative;
  float: right;
  margin-right: 23%;
  padding: 8px;
  margin-top: 6%;
}

.class:after {
  content: "";
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 16px solid #04A55F;
  margin: 0% 43%;
}

3、position的设置（来自w3school）