用html和css制作小黄人,微信小程序相关css写小黄人(示例代码)

用HTML和CSS制作小黄人的示例代码：

HTML代码：

<div class="minion">
  <div class="body"></div>
  <div class="eyes">
    <div class="eye"></div>
    <div class="eye"></div>
  </div>
  <div class="mouth"></div>
</div>

CSS代码：

.minion {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: yellow;
  position: relative;
  margin: 50px auto;
}

.body {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  top: 20px;
  left: 20px;
}

.eyes {
  width: 60px;
  height: 40px;
  position: absolute;
  top: 50px;
  left: 70px;
}

.eye {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 10px;
  left: 10px;
}

.mouth {
  width: 80px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 130px;
  left: 60px;
}

微信小程序相关CSS写小黄人的示例代码：

WXML代码：

<view class="minion">
  <view class="body"></view>
  <view class="eyes">
    <view class="eye"></view>
    <view class="eye"></view>
  </view>
  <view class="mouth"></view>
</view>

WXSS代码：

.minion {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background-color: yellow;
  position: relative;
  margin: 50rpx auto;
}

.body {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  top: 20rpx;
  left: 20rpx;
}

.eyes {
  width: 60rpx;
  height: 40rpx;
  position: absolute;
  top: 50rpx;
  left: 70rpx;
}

.eye {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 10rpx;
  left: 10rpx;
}

.mouth {
  width: 80rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 130rpx;
  left: 60rpx;
}