圣诞节制作一颗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: