html--太阳系

为了创建一个太阳系模型，我们可以使用HTML和CSS来实现。以下是一个简单的示例，它使用HTML创建太阳系的结构，并使用CSS来设置样式和布局。

HTML:

<div class="solar-system">
  <div class="sun">太阳</div>
  <div class="planet mercury">金星</div>
  <div class="planet venus">水星</div>
  <div class="planet earth">地球</div>
  <div class="moon">月亮</div>
  <div class="planet mars">火星</div>
  <div class="planet jupiter">木星</div>
  <div class="satellite">卫星</div>
  <div class="planet saturn">土星</div>
  <div class="satellite"></div>
  <div class="planet uranus">天王星</div>
  <div class="satellite"></div>
  <div class="planet neptune">海王星</div>
</div>

CSS:

.solar-system {
  position: relative;
  width: 300px;
  height: 300px;
}
 
.planet {
  position: absolute;
  border-radius: 50%;
  background: #333;
  color: white;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
  padding: 2px;
}
 
.sun {
  width: 50px;
  height: 50px;
  background: #f90;
}
 
.mercury {
  width: 20px;
  height: 20px;
  left: 100px;
  top: 50px;
}
 
.venus {
  width: 25px;
  height: 25px;
  left: 150px;
  top: 40px;
}
 
.earth {
  width: 20px;
  height: 20px;
  left: 200px;
  top: 30px;
}
 
.moon {
  width: 10px;
  height: 10px;
  left: 225px;
  top: 25px;
}
 
.mars {
  width: 25px;
  height: 25px;
  left: 250px;
  top: 20px;
}
 
.jupiter {
  width: 50px;
  height: 50px;
  left: 200px;
  top: 10px;
}
 
.satellite {
  width: 10px;
  height: 10px;
  left: 230px;
  top: 5px;
  background: #aaa;
}
 
.saturn {
  width: 40px;
  height: 40px;
  left: 150px;
  top: 10px;
}
 
.uranus {
  width: 30px;
  height: 30px;
  left: 100px;
  top: 20px;
}
 
.neptune {
  width: 35px;
  height: 35px;
  left: 50px;
  top: 10px;
}

这个示例使用了基本的绝对定位来放置各个行星和月亮。你可以通过调整每个行星和月亮的left和top属性来改变它们在太阳系中的位置。这个模型是非常基础的，你可以通过添加更多细节和动画来进一步丰富模型。