App下載

3.12植樹節(jié)，前端程序員如何用代碼來種樹

編程獅（w3cschool.cn） 2025-03-12 15:43:14 瀏覽數(shù) (68)
反饋

公歷每年的 3 月 12 日是一年一度的植樹節(jié)。旨在宣傳保護森林，并動員群眾參加植樹造林活動。作為程序員，也有自己獨特的種樹方式！下面隨編程獅以前端 HTML+CSS 為例，一步一步在網(wǎng)頁上“種出一棵樹”。

效果預覽 程序員312植樹節(jié)《森林的布爾值》網(wǎng)頁效果截圖

前期準備：

1、首先你要具備一些基礎(chǔ)前端知識，學個入門就夠了

2、其次要有一個編輯器，VScode、WebStrom、HbuilderX等，甚至系統(tǒng)自帶的“記事本、Notepad、文本編輯”就夠了

一、頁面框架搭建

新建一個index.html的文件（注意是.html格式），用你的編輯器打開它：

  1. 使用<!DOCTYPE html>聲明文檔類型
  2. 設(shè)置中文字符集<meta charset="UTF-8">
  3. 標題使用<title>標簽設(shè)置為"程序員的3.12植樹節(jié) | 編程獅（w3cschool.cn）"

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>程序員的3.12植樹節(jié) | 編程獅（w3cschool.cn）</title>

二、CSS樣式設(shè)計

  1. 背景設(shè)計：

    body {
background: #1a2f38; /* 深藍綠色背景 */
display: flex; /* 彈性布局 */
flex-direction: column; /* 垂直排列 */
align-items: center; /* 水平居中 */
}

  2. 代碼樹繪制技巧：

    • 樹干使用矩形+圓角： 
      .trunk {
width: 20px;
height: 150px;
border-radius: 5px;
}

    • 樹冠使用橢圓+內(nèi)陰影： 
      .canopy {
border-radius: 50px;
box-shadow: 
0 0 10px #3c887e, /* 外發(fā)光 */
inset 0 0 20px #1d4037; /* 內(nèi)陰影 */
}

  3. 代碼裝飾實現(xiàn)： 
    .code::before {
content: "http:// "; /* 偽元素添加注釋符號 */
color: #4d7069;
}

三、詩歌排版技巧

再配上一首專屬詩歌更有意境

《森林的布爾值》
by 編程獅（w3cschool.cn）


鍵盤叩擊的間隙
一粒粒字符正在發(fā)芽
我調(diào)試著循環(huán)里的年輪
直到指針在樹冠間溢出月光


bug是誤入的甲蟲
蜷縮在某個葉片的背面
而我的注釋如護林員
用括號加固每截脆弱的枝干


當風穿過if-else的縫隙
整片森林沙沙作響
光標閃爍的鐵鍬下
新綠正以十六進制生長


最后一次commit時
露珠從枝頭滾落
整個春天突然return了
一行濕潤的true

  1. 使用pre標簽保留換行格式
  2. 左側(cè)裝飾線： 
    .poem {
border-left: 3px solid #3c887e;
padding-left: 20px;
}

四、程序員元素融合

  1. 在樹冠周圍添加代碼片段注釋
  2. 使用等寬字體font-family: 'Courier New'
  3. 顏色選擇藍綠色系，模擬代碼編輯器主題
  4. 詩中融入編程術(shù)語：commit、return、十六進制等

五、布局技巧

  1. 使用position: absolute進行圖層疊加

  2. 通過transform實現(xiàn)水平居中：

    transform: translateX(-50%);

  3. 彈性布局保持整體垂直排列

完整代碼展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>程序員的3.12植樹節(jié) | 編程獅（w3cschool.cn）</title>
    <style>
        /* 全局樣式 */
        body {
            background: #1a2f38;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Courier New', monospace;
        }


        /* 詩歌容器 */
        .poem {
            color: #c3d8df;
            max-width: 600px;
            margin: 40px;
            line-height: 1.8;
            border-left: 3px solid #3c887e;
            padding-left: 20px;
        }


        /* 代碼樹 */
        .code-tree {
            position: relative;
            margin: 50px;
            height: 300px;
        }


        /* 樹干 */
        .trunk {
            position: absolute;
            width: 20px;
            height: 150px;
            background: #785549;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 5px;
        }


        /* 樹冠 */
        .canopy {
            position: absolute;
            width: 120px;
            height: 100px;
            background: #2c5a47;
            bottom: 140px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50px;
            box-shadow: 
                0 0 10px #3c887e,
                inset 0 0 20px #1d4037;
        }


        /* 代碼裝飾 */
        .code {
            position: absolute;
            color: #6ba08a;
            font-size: 12px;
            white-space: nowrap;
        }


        .code::before {
            content: "http:// ";
            color: #4d7069;
        }
    </style>
</head>
<body>
    <div class="code-tree">
        <div class="trunk"></div>
        <div class="canopy"></div>
        <div class="code" style="top:30px; left:-40px;">if (tree.isGrowing()) {</div>
        <div class="code" style="top:80px; right:-50px;">branch++;</div>
        <div class="code" style="top:150px; left:10px;">// 年輪.add()</div>
    </div>


    <div class="poem">
        <h2>《森林的布爾值》</h2>
        <p>by 編程獅（w3cschool.cn）</p>
        <pre>
鍵盤叩擊的間隙
一粒粒字符正在發(fā)芽
我調(diào)試著循環(huán)里的年輪
直到指針在樹冠間溢出月光


bug是誤入的甲蟲
蜷縮在某個葉片的背面
而我的注釋如護林員
用括號加固每截脆弱的枝干


當風穿過if-else的縫隙
整片森林沙沙作響
光標閃爍的鐵鍬下
新綠正以十六進制生長


最后一次commit時
露珠從枝頭滾落
整個春天突然return了
一行濕潤的true
        </pre>
    </div>
</body>
</html>

保存你的index.html文件，用瀏覽器打開就能看到網(wǎng)頁效果啦??

編程獅的這個作品通過將編程元素與自然意象結(jié)合，用CSS繪制出獨特的"代碼之樹"，詩歌排版采用類代碼的顯示風格，展現(xiàn)了程序員在植樹節(jié)的特殊慶祝方式。你們也快來試試吧~

HTML CSS 前端

1 人點贊