醜陋的毛衣CSS：迴聲基地

發佈於2025-03-23

醜陋的毛衣日是12月的第三個星期五。今年是12月20日。在國慶日曆頁頁面上了解有關醜陋的毛衣日。在過去的幾年中，我製作了樂高毛衣的CSS藝術版本。請參閱上一年的系列鏈接。這件2024年的醜陋毛衣以萊亞（Leia）和《帝國反擊之戰》（Echo Base）的戰鬥為特色。 [2

我從往年的毛衣模板開始。有一個基本的軀幹。這件毛衣的特色角色內部軀幹。角色div內部是戰鬥叛軍和帝國的兩側。這些部門內部是戰鬥的車輛。

。特點 { 顯示：Flex; Jusify-content：中心；準項目：中心；位置：絕對；溢出：可見； } 。地面{ 寬度：100％；身高：2px; 背景：白色； } .rebels { 寬度：550px; 身高：375px; 顯示：Flex; 正當：中間的空間；準項目：中心；位置：相對； } .empire { 寬度：550px; 身高：375px; 顯示：Flex; Jusify-content：中心；準項目：中心；位置：相對；彈性方向：行； } Ugly Sweater CSS: Echo Base

叛軍

叛軍一面具有大砲。就形狀而言，基本上是堆疊矩形。砲塔包含大砲，槍支和底座。







.character {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; 
    overflow: visible;
}

.ground{
    width: 100%;
    height: 2px;
    background: white;
}


.rebels {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.empire {
    width: 550px;
    height: 375px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: row;
}





  
  
  帝國





 






。 at-at {
    顯示：網格；
    Jusify-content：中心；
    準項目：中心；
    位置：相對； 
    背景：var（ - 飾面藍色）;
    保證金頂：145px;
}

.at-at_main {
    顯示：Flex;
    正當：中間的空間；
    準項目：中心；
    位置：相對； 
    位置：絕對；
}






.turret{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;

    margin-right: 40px;
    margin-bottom: -280px;

}

.cannon_lid{
    width: 80px;
    height: 10px;
    border:4px white solid;
    margin-bottom: 32px;
    margin-left: 11px;
        position: absolute;
        z-index: 1;
        background: var(--sweaterblue);
}

.gun{
    width: 60px;
    height: 5px;
    background: white;
    position: absolute;
    margin-bottom: 32px;
    margin-left: 125px;
}

.turret_base{
    width: 30px;
    height: 40px;
    border: 4px white solid;
    border-top: 4px white dotted;
    position: absolute;
    margin-top: 40px;
}


 



腿都從腿級開始，形狀相同。一些大腿獲得了另一個名為彎曲的課程。這使用變換：旋轉以改變腿部形狀。如果腿彎曲，則腿的下部將獲得下彎曲類，這只會向前移動腿的那一部分。



。腿{
    寬度：10px;
    身高：50px;
    背景：var（ - 飾面藍色）;
    邊界：2px固體白色；
}
。彎曲{
    變換：旋轉（45維格）;
    身高：40px;
}

.lowerbent {
    左鍵：-10px;
}













.at-at{
    display: grid;
    justify-content: center;
    align-items: center;
    position: relative; 
    background: var(--sweaterblue);
    margin-top: 145px;
}

.at-at_main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; 
    position: absolute;
}


[2


  
  
  結論



這是一個挑戰。我了解到在博客之前應該刪除我的偽代碼。當我計劃出來時，我標記的腿是“腿”，“上”，“彎曲”。較低的“較低”，“ lowerg”，直截了當。我沒有為所有這些上課。有些已經被他們的父班覆蓋。

謝謝您的閱讀。