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

首頁

web前端

html教學

使用HTML和CSS建立印度國旗

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 28, 2023 am 10:25 AM

csshtml國旗設計

使用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>

結論

在本文中，我們看到如何利用HTML和CSS來創建印度國旗，三色旗。我們看到可以使用CSS中的屬性，例如background-color、border、border-radius、transform等來創造一個美觀的國旗。

以上是使用HTML和CSS建立印度國旗的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles