首页 前端知识 HTML:实现圣诞树代码(附完整源码)

HTML:实现圣诞树代码(附完整源码)

2024-11-04 09:11:34 前端知识 前端哥 975 890 我要收藏

HTML:实现圣诞树代码


以下是一个用HTML实现圣诞树的示例代码:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
     
      background-color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    
    .tree {
     
      color: green;
      text-align: center;
      font-size: 20px;
      line-height: 20px;
      margin: 0 auto;
    }
    
    .tree-top {
     
      color: brown;
      font-size: 40px;
      line-height: 40px;
      margin-bottom: -10px;
    }
    
    .tree-body {
     
      height: 300px;
      position: relative;
    }
    
    .tree-layer {
     
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
    }
    
    .tree-layer:nth-child(1) {
     
      height: 40px;
      background-color: green;
    }
    
    .tree-layer:nth-child(2) {
     
      height: 60px;
      background-color: limegreen;
      margin-bottom:
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19856.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!