Visual Studio Code'da tablo nasıl yapılır?

rauzy

rauzy

Decapat
Katılım
17 Nisan 2022
Mesajlar
222
Daha fazla  
Cinsiyet
Erkek
Bu tabloyu yapacagım Visual Studio Code’da nasıl yapabılırım? Yeniyim.
 

Dosya Ekleri

  • 1699191803390.png
    1699191803390.png
    208,6 KB · Görüntüleme: 58
Şöyle bir şeyler yaptım. (backend developerım) Edit fiddle - JSFiddle - Code Playground
HTML: 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>delikarga</title>
</head>
<body>
  <div class="container">
    <div class="first-section">
    <div class="first-box"></div>
    <div class="second-box"></div>
  </div>
  <section class="second-section"></section>
  <section class="third-section">
    <div class="first-box"></div>
    <div class="second-box"></div>
  </section>
  <footer></footer>
  </div>
</body>
</html>
CSS: 
.container {
  margin: 0 20%;
}

.first-section {
  display:flex;
  gap:10px;
  background-color:orange;
  padding:20px;
}

.first-section > .first-box {
  flex:1;
  height:200px;
  background-color:green;
}
.first-section > .second-box {
  flex:2;
  height:200px;
  background-color:purple;
}

.second-section {
  background-color: purple;
  margin:10px 0;
  height:40px;
}

.third-section{
  display:flex;
  gap:10px;
  background-color:purple;
  padding:20px;
}

.third-section > div{
  border-radius:9px;
  background-color:green;
  height:200px;
}

.third-section > .first-box {
  flex:1;
}

.third-section > .second-box {
  flex:2;
}

footer {
  height:40px;
  margin-top:10px;
  background-color:orange;
}
 
delikarga dedi:
Şöyle bir şeyler yaptım. (backend developerım) Edit fiddle - JSFiddle - Code Playground
HTML: 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>delikarga</title>
</head>
<body>
 <div class="container">
 <div class="first-section">
 <div class="first-box"></div>
 <div class="second-box"></div>
 </div>
 <section class="second-section"></section>
 <section class="third-section">
 <div class="first-box"></div>
 <div class="second-box"></div>
 </section>
 <footer></footer>
 </div>
</body>
</html>
CSS: 
.container {
 margin: 0 20%;
}

.first-section {
 display:flex;
 gap:10px;
 background-color:orange;
 padding:20px;
}

.first-section > .first-box {
 flex:1;
 height:200px;
 background-color:green;
}
.first-section > .second-box {
 flex:2;
 height:200px;
 background-color:purple;
}

.second-section {
 background-color: purple;
 margin:10px 0;
 height:40px;
}

.third-section{
 display:flex;
 gap:10px;
 background-color:purple;
 padding:20px;
}

.third-section > div{
 border-radius:9px;
 background-color:green;
 height:200px;
}

.third-section > .first-box {
 flex:1;
}

.third-section > .second-box {
 flex:2;
}

footer {
 height:40px;
 margin-top:10px;
 background-color:orange;
}
Genişletmek için tıkla...

Bir şey cıkmıyor bomboş sayfa
 

Benzer konular

SS Joachim Peiper
Visual Studio Code'da yazdığım kodu tarayıcıda görüntüleyemiyorum
Mesaj
3
Görüntüleme
389
Keirnegn
K
Police
Visual Studio Code'da yazılan kod Localehost'ta görünmüyor
Mesaj
9
Görüntüleme
1B
Police
Police
TylerDurdenAynıBen
Visual Studio Community vs Visual Studio Code
Mesaj
5
Görüntüleme
779
Rosalind
Rosalind
rauzy
HTML tablo tasarımı nasıl yapılır?
2
Mesaj
11
Görüntüleme
505
TheAny
TheAny
AdrogosTR
Visual Studio derleme hatası
Mesaj
5
Görüntüleme
558
Y. Hayalet
Y. Hayalet

Yeni konular

Yeni mesajlar

Geri
Yukarı