使用HTML和CSS建立印度國旗-html教學-PHP中文網

使用HTML和CSS建立印度國旗

我們知道HTML和CSS是用於網頁和設計的語言，但我們可以做的遠不止於製作網頁應用程式。例如，我們還可以使用它們製作一個有趣的項目，這將需要對這兩種語言的深入了解。

所以，我們手邊的任務是使用HTML和CSS來創建印度國旗。無論我們想要創建什麼類型的國旗，都會有兩個部分：第一個是旗桿，第二個是旗幟本身。正如我們所知，對於我們來說，向矩形DIV添加顏色並製作國旗的三色部分實際上相當簡單，棘手的部分將是製作輪子。

因此，方法是使用一個容器元素來保存整個標誌。這將分為兩部分：一根桿子和旗幟。標誌部分將包含三個元素，每個元素從上到下代表各自的顏色。這三個元素中的中間元素將充當輪子的容器元素。

讓我們繼續創建標誌。

外部容器

正如我們所討論的，外部容器將容納整個旗幟（旗幟和桿部分）。我們將使用 div 標籤並給它一個「容器」類別。此 div 標籤中將嵌套兩個 div，一個用於桿子，一個用於旗幟。

現在的問題是我們希望這兩個div元素都是內聯的，所以我們將使用display:flex屬性來實現。之後，我們將指定元素的寬度、高度和顏色。

程式碼的 html 部分看起來像 -

<div class="container">
   <div class="polePart"></div>
   <div class="flagPart"></div>
</div>

登入後複製

CSS 部分將會是 -

.container {
   display: flex;
}
.polePart {
   height: 800px;
   width: 11.111px;
   background: brown;
   border-top-left-radius: 12px;
}
.flagPart {
   width: 450px;
   height: 300px;
   box-shadow: 0px 0px 90px 1px rgb(129, 115, 129);
   background-color: transparent;
   position: relative;
}

登入後複製

新增三種顏色

現在我們將開始加入三色的三種顏色。為此，我們將在 flagPart 中使用三個巢狀的 div。然後，我們將首先給它們適當的寬度和高度，所有這些都彼此相等，然後為它們分配各自的背景顏色。第一款 div 的背景色為藏紅色花色，中間的 div 的背景色為白色，底部的 div 的背景色為綠色。

HTML 部分−

<body>
   <div class="topColor"></div>
   <div class="middleColor"></div>
   <div class="bottomColor"></div>
</body>

登入後複製

CSS 部分−

.topColor {
   height: 100px;
   background-color: #ff9933
}
.middleColor {
   height: 100px;
   background-color: white
}
.bottomColor {
   height: 100px;
   background-color: green
}

登入後複製

請注意，我們不需要指定內部div的寬度，因為我們希望它們延伸到父div的大小，即具有middleColor類別的div。

新增輪子

現在我們將在中間部分添加輪子，我們知道輪子中有 24 個輻條，這就是為什麼我們將使用 12 條線並使用 CSS 將它們旋轉角度，使它們形成一個圓圈。

請注意，這只會形成輻條，對於輪子的圓形部分，我們將使用輪子容器的「border-radius」屬性。

HTML 部分 −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <div class="wheelPart">
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
      <span class="spokeLine"></span>
   </div>
</body>
</html>

登入後複製

CSS 部分 −

.wheelPart {
   height: 99px;
   width: 99px;
   border: 1px solid darkblue;
   border
   -radius: 100px;
   position: relative;
   margin: 0 auto
}
.wheelPart .spokeLine {
   height: 100%;
   width: 1px;
   display: inline
   -block;
   position: absolute;
   left: 50%;
   background: darkblue;
}
.spokeLine:nth
-child(1) {
   transform: rotate(15deg)
}
.spokeLine:nth
-child(2) {
   transform: rotate(30deg)
}
.spokeLine:nth
-child(3) {
   transform: rotate(45deg)
}
.spokeLine:nth
-child(4) {
   transform: rotate(60deg)
}
.spokeLine:nth
-child(5) {
   transform: rotate(75deg)
}
.spokeLine:nth
-child(6) {
   transform: rotate(90deg)
}
.spokeLine:nth-child(7) {
   transform: rotate(105deg)
}
.spokeLine:nth-child(8) {
   transform: rotate(120deg)
}
.spokeLine:nth-child(9) {
   transform: rotate(135deg)
}
.spokeLine:nth-child(10) {
   transform: rotate(150deg)
}
.spokeLine:nth-child(11) {
   transform: rotate(165deg)
}
.spokeLine:nth-child(12) {
   transform: rotate(180deg)
}

登入後複製

我們使用了nth-child偽類來將每一行旋轉15度，因為從中心旋轉15度的12行將形成24個輻條。 nth child偽類別用於匹配在大括號中指定的容器的子元素的編號。

我們所創建的只是一個簡單的旗幟，但利用CSS的高級知識，我們可以做得更多。使用動畫，我們可以讓旗幟看起來像在風中飄動或移動輪子，但是在本文中我們不會深入討論這些。

範例

以下是上述的完整工作範例 -

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
      .container {
         display: flex;
      }
      .polePart {
         height: 800px;
         width: 11.111px;
         background: brown;
         border-top-left-radius: 12px;
      }
      .flagPart {
         width: 450px;
         height: 300px;
         box-shadow: 0px 0px 90px 1px rgb(129, 115, 129);
         background-color: transparent;
         position: relative;
      }
      .topColor {
         height: 100px;
         background-color: #ff9933
      }
      .middleColor {
         height: 100px;
         background-color: white
      }
      .bottomColor {
         height: 100px;
         background-color: green
      }
      .wheelPart {
         height: 99px;
         width: 99px;
         border: 1px solid darkblue;
         border-radius: 100px;
         position: relative;
         margin: 0 auto;
      }
      .wheelPart .spokeLine {
         height: 100%;
         width: 1px;
         display: inline-block;
         position: absolute;
         left: 50%;
         background: darkblue;
      }
      .spokeLine:nth
      -child(1) {
         transform: rotate(15deg)
      }
      .spokeLine:nth
      -child(2) {
         transform: rotate(30deg)
      }
      .spokeLine:nth
      -child(3) {
         transform: rotate(45deg)
      }
      .spokeLine:nth
      -child(4) {
          transform: rotate(60deg)
      }
      .spokeLine:nth
      -child(5) {
         transform: rotate(75deg)
      }
      .spokeLine:nth
      -child(6) {
         transform: rotate(90deg)
      }
      .spokeLine:nth
      -child(7) {
         transform: rotate(105deg)
      }
     .spokeLine:nth
      -child(8) {
         transform: rotate(120deg)
      }
      .spokeLine:nth
      -child(9) {
         transform: rotate(135deg)
      }
      .spokeLine:nth-child(10) {
         transform: rotate(150deg)
      }
      .spokeLine:nth-child(11) {
         transform: rotate(165deg)
      }
      .spokeLine:nth-child(12) {
         transform: rotate(180deg)
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="polePart"></div>
         <div class="flagPart">
         <div class="topColor"></div>
         <div class="middleColor">
            <div class="wheelPart">
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
               <span class="spokeLine"></span>
            </div>
         </div>
         <div class="bottomColor"></div>
      </div>
   </div>
</body>
</html>

登入後複製