圣诞节制作一颗HTML的圣诞树

当前位置：电视猫 > HTML/Xhtml>
电视猫时间： 2024-07-13 09:27:39
　　圣诞节制作一颗HTML的圣诞树
Sure, here is an example of how to create a simple Christmas tree using HTML and CSS:
HTML
<!DOCTYPE html>
<html>
<head>
  <title>HTML Christmas Tree</title>
  <style>
    body {
      background-color: #222;
      color: #fff;
      font-family: sans-serif;
      text-align: center;
    }

    .tree {
      display: block;
      position: relative;
      width: 300px; /* Adjust width as desired */
      height: 500px; /* Adjust height as desired */
      margin: 0 auto;
    }

    .tree-branch {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid #32CD32; /* Adjust color as desired */
    }

    .tree-trunk {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 100px;
      background-color: #6B2424; /* Adjust color as desired */
      border-radius: 50%;
    }

    .ornament {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #F0F0F0; /* Adjust color as desired */
      border-radius: 50%;
      random: 100%;
    }
  </style>
</head>
<body>
  <div class="tree">
    <div class="tree-branch" style="top: 0;"></div>

    <div class="tree-branch" style="top: 80px;"></div>
    <div class="ornament" style="top: 50px; left: 80px;"></div>
    <div class="ornament" style="top: 50px; right: 80px;"></div>

    <div class="tree-branch" style="top: 160px;"></div>
    <div class="ornament" style="top: 130px; left: 50px;"></div>
    <div class="ornament" style="top: 130px; right: 50px;"></div>
    <div class="ornament" style="top: 100px; left: 120px;"></div>
    <div class="ornament" style="top: 100px; right: 120px;"></div>

    <div class="tree-branch" style="top: 240px;"></div>
    <div class="ornament" style="top: 210px; left: 30px;"></div>
    <div class="ornament" style="top: 210px; right: 30px;"></div>
    <div class="ornament" style="top: 180px; left: 80px;"></div>
    <div class="ornament" style="top: 180px; right: 80px;"></div>
    <div class="ornament" style="top: 150px; left: 120px;"></div>
    <div class="ornament" style="top: 150px; right: 120px;"></div>

    <div class="tree-branch" style="top: 320px;"></div>
    <div class="ornament" style="top: 290px; left: 20px;"></div>
    <div class="ornament" style="top: 290px; right: 20px;"></div>
    <div class="ornament" style="top: 260px; left: 50px;"></div>
    <div class="ornament" style="top: 260px; right: 50px;"></div>
    <div class="ornament" style="top: