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

rauzy · 5 Kasım 2023

Bu tabloyu yapacagım Visual Studio Code’da nasıl yapabılırım? Yeniyim.

706111 · 5 Kasım 2023

Hepsi <div> içinde <div>.

Vavien. · 5 Kasım 2023

İşlevine göre uygun tag'leri belirler. İlgili olanları iç içe koyarak yaparsınız. Biraz da CSS.

rauzy · 5 Kasım 2023

706111 dedi:
Hepsi <div> içinde <div>.

bana dırekt 1 tanesının kodu lazım diğerini ben yaparım

delikarga · 5 Kasım 2023

Şö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;
}

rauzy · 5 Kasım 2023

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

Bir şey cıkmıyor bomboş sayfa

delikarga · 5 Kasım 2023

rauzy dedi:
Bir şey cıkmıyor bomboş sayfa

Css dosyasını import ettiniz mi?

rauzy · 5 Kasım 2023

delikarga dedi:
Css dosyasını import ettiniz mi?

css deıl htmlde lazım

delikarga · 6 Kasım 2023

rauzy dedi:
css deıl htmlde lazım

head tagının içine <link rel="stylesheet" href="css_dosyasi_adi.css" /> şeklinde eklersen olur. Ya da style tagı içine css kodlarını yazıcaksın.

rauzy · 6 Kasım 2023

delikarga dedi:
head tagının içine <link rel="stylesheet" href="css_dosyasi_adi.css" /> şeklinde eklersen olur. Ya da style tagı içine css kodlarını yazıcaksın.

herhangi birşey cıkmıyor ekranda

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

rauzy

Hectopat

Dosya Ekleri

706111

Hectopat

Vavien.

Zettapat

rauzy

Hectopat

delikarga

Kilopat

rauzy

Hectopat

delikarga

Kilopat

rauzy

Hectopat

delikarga

Kilopat

rauzy

Hectopat