HTML ve CSS ile resimdeki gibi bir panel oluşturulabilir mi?

herchell

herchell

Hectopat
Katılım
12 Ekim 2019
Mesajlar
182
Çözümler
1
Daha fazla  
Cinsiyet
Kadın
HTML ve CSS ile resimdeki gibi bir panel oluşturulabilir mi?
 

Dosya Ekleri

  • der.png
    der.png
    77,5 KB · Görüntüleme: 81
Buyrun hocam. Renkleri ve listenin styleını sen değiştirirsin basit zaten. JSFiddle test

HTML: 
<html lang="tr">
<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>Created by delikarga</title>
<style>
.container {
  display:flex;
  gap:15px;
  width:100%;
  height:400px;
}

.box {
  display:flex;
  flex-direction:column;
  width:100%;
  height:400px;
}

.box .header{
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:24px;
  font-weight:500;
  font-family: sans-serif;
  color:#fff;
  width:100%;
  height:60px;
  background-color:#ff9393;
  border-bottom-right-radius: 20px;
  margin-bottom:10px;
}

.box .list-items li {
  border-bottom: 1px solid #e5e5e5;
  color:#777;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 500;
}
</style>
</head>
<body>
  <div class="container">
    <div class="box">
      <div class="header">HABERLER</div>
      <ul class="list-items">
        <li>Ayın öğrencileri</li>
        <li>bilmemne</li>
      </ul>
    </div>
    <div class="box">
      <div class="header">DUYURULAR</div>
      <ul class="list-items">
        <li>delikarga</li>
      </ul>
    </div>
    <div class="box">
      <div class="header">İŞLEMLER</div>
      <ul class="list-items">
        <li>technopat</li>
      </ul>
    </div>
  </div>
</body>
</html>
 
AriceN dedi:
Rica ederim. Bir sorun olursa etiketleyin yardımcı olmaya çalışırım.
Genişletmek için tıkla...
Hocam şimdi bir tablo oluşturdum.Css'te sayfaya ortalamak istedim fakat çakışıyor sanırsam ortaya gelmedi margin ayarıyla da denedim olmadı.Acaba html dosyasına nbsp diye boşluk bıraktırıp öyle mi ortalasam?

delikarga dedi:
Buyrun hocam. Renkleri ve listenin styleını sen değiştirirsin basit zaten. JSFiddle test

HTML: 
<html lang="tr">
<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>Created by delikarga</title>
<style>
.container {
  display:flex;
  gap:15px;
  width:100%;
  height:400px;
}

.box {
  display:flex;
  flex-direction:column;
  width:100%;
  height:400px;
}

.box .header{
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:24px;
  font-weight:500;
  font-family: sans-serif;
  color:#fff;
  width:100%;
  height:60px;
  background-color:#ff9393;
  border-bottom-right-radius: 20px;
  margin-bottom:10px;
}

.box .list-items li {
  border-bottom: 1px solid #e5e5e5;
  color:#777;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 500;
}
</style>
</head>
<body>
  <div class="container">
    <div class="box">
      <div class="header">HABERLER</div>
      <ul class="list-items">
        <li>Ayın öğrencileri</li>
        <li>bilmemne</li>
      </ul>
    </div>
    <div class="box">
      <div class="header">DUYURULAR</div>
      <ul class="list-items">
        <li>delikarga</li>
      </ul>
    </div>
    <div class="box">
      <div class="header">İŞLEMLER</div>
      <ul class="list-items">
        <li>technopat</li>
      </ul>
    </div>
  </div>
</body>
</html>
Genişletmek için tıkla...
hocam box header kısmında css için söylüyorum
background-color:#ff9393;
Genişletmek için tıkla...
demişiz ya ben 3 kutucuğu farklı renk yapmak istiyorum nasıl yapabilirim?
 
Son düzenleme:
herchell dedi:
Hocam şimdi bir tablo oluşturdum.Css'te sayfaya ortalamak istedim fakat çakışıyor sanırsam ortaya gelmedi margin ayarıyla da denedim olmadı.Acaba html dosyasına nbsp diye boşluk bıraktırıp öyle mi ortalasam?


hocam box header kısmında css için söylüyorum

demişiz ya ben 3 kutucuğu farklı renk yapmak istiyorum nasıl yapabilirim?
Genişletmek için tıkla...
Renklerini değiştirebilirsin. Örneğin 3 class oluşturup header1 header2 header3 diye bunların classlarına background-color değerini istediği şekilde ver. Classları istediğin headerların yanına ekle div class="header headerx" gibi. Ya da div class="header" style="background-color:#renk" şeklinde. Bir çok farklı yöntemle yapılabilir.
 

Benzer konular

herchell
  • Çözüldü
Çözüldü  CSS olmadan HTML sayfasında dikey çizgi oluşturulabilir mi?
Mesaj
6
Görüntüleme
421
xScpit
xScpit
L
  • Soru
HTML ve CSS ile butonda yer ayarlanmıyor
Mesaj
5
Görüntüleme
415
BreaKSooN05
B
Spawrain
  • Çözüldü
Çözüldü  HTML ve CSS ile Bookmark Nasıl Oluşturulur?
Mesaj
3
Görüntüleme
1B
ahevr
ahevr
R
HTML ve CSS ile Tasarladığım Film Şablonu
Mesaj
0
Görüntüleme
2B
Rufiq Cavadov
R
D
HTML ve CSS ile İşaretleme ve İzlendi Butonu
Mesaj
2
Görüntüleme
2B
Fatalis
Fatalis

Yeni konular

Yeni mesajlar

Geri
Yukarı