Rumah >hujung hadapan web >html tutorial >Cipta bendera India menggunakan HTML dan CSS

Cipta bendera India menggunakan HTML dan CSS

WBOYke hadapan: 2023-08-28 10:25:031098semak imbas

Kami tahu HTML dan CSS ialah bahasa yang digunakan untuk web dan reka bentuk, tetapi kami boleh melakukan lebih daripada sekadar membuat apl web. Sebagai contoh, kita juga boleh menggunakannya untuk membuat projek yang menarik, yang memerlukan pengetahuan mendalam tentang kedua-dua bahasa.

Jadi, tugas kami ialah mencipta bendera India menggunakan HTML dan CSS. Tidak kira apa jenis bendera yang kita ingin buat, akan ada dua bahagian: yang pertama ialah tiang bendera, dan yang kedua ialah bendera itu sendiri. Seperti yang kita tahu, sebenarnya agak mudah untuk kita menambah warna pada DIV segi empat tepat dan membuat bahagian tiga warna bendera, bahagian yang sukar ialah membuat roda.

Jadi pendekatannya ialah menggunakan elemen bekas untuk memegang keseluruhan logo. Ini akan menjadi dua bahagian: tiang dan bendera. Bahagian logo akan mengandungi tiga elemen, setiap satu mewakili warna masing-masing dari atas ke bawah. Elemen tengah di antara ketiga-tiga elemen ini akan bertindak sebagai elemen bekas untuk roda.

Mari kita terus mencipta logo.

Bekas luar

Seperti yang kita bincangkan, bekas luar akan memuatkan keseluruhan bendera (bahagian bendera dan tiang). Kami akan menggunakan tag div dan memberikannya kelas "bekas". Akan ada dua div bersarang dalam teg div ini, satu untuk tiang dan satu untuk bendera.

Masalahnya sekarang ialah kami mahu kedua-dua elemen div berada dalam baris, jadi kami akan menggunakan atribut display:flex untuk mencapai ini. Selepas itu, kami akan menentukan lebar, ketinggian, dan warna elemen.

Bahagian html kod kelihatan seperti -

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

Bahagian CSS akan menjadi -

.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;
}

Tambah tiga warna

Sekarang kita akan mula menambah tiga warna tiga warna. Untuk melakukan ini, kami akan menggunakan tiga div bersarang di dalam flagPart. Kami kemudiannya akan memberikan mereka lebar dan ketinggian yang sesuai, semuanya sama antara satu sama lain, dan kemudian memberikan mereka warna latar belakang masing-masing. Div pertama mempunyai warna latar belakang kunyit, div tengah mempunyai warna latar belakang putih, dan div bawah mempunyai warna latar belakang hijau.

Bahagian HTML−

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

Bahagian CSS−

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

Sila ambil perhatian bahawa kami tidak perlu menentukan lebar div dalam kerana kami mahu ia memanjangkan kepada saiz div induk, iaitu div dengan kelas middleColor.

Tambah roda

Sekarang kita akan tambah roda di bahagian tengah, kita tahu terdapat 24 jejari dalam roda, sebab itu kita akan menggunakan 12 garisan dan memiringkannya menggunakan CSS supaya ia membentuk bulatan.

Sila ambil perhatian bahawa ini hanya akan membentuk jejari, untuk bahagian bulat roda kami akan menggunakan sifat "jejari sempadan" bekas roda.

Bahagian 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>

Bahagian 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)
}

Kami menggunakan kelas pseudo anak ke-n untuk memutar setiap baris 15 darjah, kerana 12 baris diputar 15 darjah dari tengah akan membentuk 24 jejari. Kelas pseudo anak ke-n digunakan untuk memadankan bilangan elemen anak bagi bekas yang dinyatakan dalam pendakap kerinting.

Apa yang kami cipta hanyalah bendera yang ringkas, tetapi dengan pengetahuan lanjutan tentang CSS kami boleh melakukan lebih banyak lagi. Menggunakan animasi, kita boleh membuat bendera kelihatan seperti ia berkepak ditiup angin atau bergerak di atas roda, tetapi kita tidak akan membincangkannya dalam artikel ini.

Contoh

Berikut ialah contoh kerja lengkap di atas -

<!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>

Kesimpulan

Dalam artikel ini, kami melihat cara mencipta bendera India, tiga warna, menggunakan HTML dan CSS. Kami melihat bahawa kami boleh menggunakan sifat dalam CSS seperti warna latar belakang, sempadan, jejari sempadan, transformasi, dll. untuk mencipta bendera yang cantik.

Atas ialah kandungan terperinci Cipta bendera India menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html display border 伪类 background transform flex

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk mencipta animasi bola melekit menggunakan HTML dan CSS?Artikel seterusnya：Bagaimana untuk mencipta animasi bola melekit menggunakan HTML dan CSS?

Artikel berkaitan

Lihat lagi