css html左上角一个微信红点的样式

要实现左上角的微信红点样式，可以使用 CSS 中的伪类 `::before` 或 `::after` 来添加一个红色的圆点，同时设置其位置和大小即可。

具体的 CSS 代码如下：

/* 父元素 */
.position {
  position: relative;
}

/* 红点 */
.position::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}

其中，`.position` 是包含红点的父元素，需要设置 `position: relative;`，以便让伪类 `::before` 相对于该元素定位。`::before` 伪类的 `content` 属性用于设置其内容为空，`display` 属性设置为 `block`，以便让其成为一个块级元素，方便设置位置和大小。`position` 属性设置为 `absolute`，以便相对于父元素定位。`top` 和 `left` 属性设置为 `0`，将红点放在父元素的左上角。`width` 和 `height` 属性设置为 `8px`，可以根据需要调整大小。`background-color` 属性设置为红色，`border-radius` 属性设置为 `50%`，使其变为一个圆形。

相关问题

css渐变左上角开始四分之一

您可以使用CSS渐变的background属性来实现左上角开始的四分之一渐变效果。以下是一个示例代码：

div {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom right, red 50%, yellow 50%);
}

在这个示例中，我们使用linear-gradient函数来创建一个线性渐变背景。通过设置`to bottom right`，我们指定渐变从上方开始向右下方延伸。在颜色的定义中，我们将红色和黄色各占50%的位置，以实现四分之一渐变效果。

您可以根据需要调整渐变的颜色和位置来获得您想要的效果。

帮我用vue 和css写一个微信通讯录

好的，以下是一个简单的微信通讯录的代码示例，使用Vue和CSS实现：

HTML部分：

<template>
  <div class="wechat-contact">
    <div class="search-box">
      <i class="iconfont icon-sousuo"></i>
      <input type="text" placeholder="搜索">
    </div>
    <div class="contact-list">
      <div class="group-title">A</div>
      <div class="contact-item">
        <div class="avatar"><img src="./avatar.png"></div>
        <div class="info">
          <div class="name">Anna</div>
          <div class="desc">Hello, I'm Anna.</div>
        </div>
      </div>
      <div class="contact-item">
        <div class="avatar"><img src="./avatar.png"></div>
        <div class="info">
          <div class="name">Alex</div>
          <div class="desc">Hi, I'm Alex.</div>
        </div>
      </div>
      <div class="group-title">B</div>
      <div class="contact-item">
        <div class="avatar"><img src="./avatar.png"></div>
        <div class="info">
          <div class="name">Bob</div>
          <div class="desc">Hey, I'm Bob.</div>
        </div>
      </div>
      <div class="contact-item">
        <div class="avatar"><img src="./avatar.png"></div>
        <div class="info">
          <div class="name">Bill</div>
          <div class="desc">Hello, I'm Bill.</div>
        </div>
      </div>
    </div>
  </div>
</template>

CSS部分：

.wechat-contact {
  padding: 20px;
  background-color: #f5f5f5;
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.search-box input {
  flex: 1;
  border: none;
  outline: none;
  margin-left: 10px;
}
.search-box i {
  font-size: 18px;
  color: #999;
}
.contact-list {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
}
.group-title {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  margin-bottom: 5px;
}
.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info {
  flex: 1;
}
.name {
  font-size: 16px;
  font-weight: bold;
}
.desc {
  font-size: 14px;
  color: #999;
}

在Vue组件中引入上述代码即可实现一个简单的微信通讯录。当然，你可以根据实际需求进行修改和完善，例如从后台获取联系人信息、实现搜索功能等。