Şu anda orta düzey sayılabilecek bir JavaScript bilgim var ve React öğreniyorum hocamHeee front-end ulan front-end'cliler iki dizayn yapıyonuz paranın belini kırıyonuz ya.
Eki Görüntüle 1671337
<h1 style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">I am X</h1>
<p style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">My Instagram account</p>
<p style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">My YouTube account</p>
<p style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">My Biography</p>Öncelikle tavsiyem CSS kodlarını farklı bir dosyada barındırmanız olacaktır. Böylece daha kolay çalışabilirsiniz ve DRY prensipleri içinde kalırsınız. Bu da daha optimize, hafif ve okunması/düzenlenmesi kolay kodlar yazmanızı sağlar. Sorunuzun cevabına gelelim: p etiketlerinin display değerlerini inline olarak düzeltirseniz istediğinize ulaşırsınız.@EQUARIA hocam, aşağıdaki border radiuslar sayfanın bir ucundan diğer ucuna uzanıyor, sadece yazının yakın çevresinde olmasını istiyorum. Nasıl yapabilirim?
HTML:<h1 style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">I am X</h1> <p style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">My Instagram account</p> <p style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">My YouTube account</p> <p style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">My Biography</p>
Bunun için width komutu ile istediğin piksel sayısını verirseniz kutuyu küçültebilirsiniz.@EQUARIA hocam, aşağıdaki border radiuslar sayfanın bir ucundan diğer ucuna uzanıyor, sadece yazının yakın çevresinde olmasını istiyorum. Nasıl yapabilirim?
HTML:<h1 style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">I am X</h1> <p style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">My Instagram account</p> <p style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">My YouTube account</p> <p style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center;">My Biography</p>
<p><h1 style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center; position: relative; top: 5px; left: 700px; right: 132px; margin-left: 0px; margin-right: 0px; width: 100px; ">I am X</h1>Bunun için width komutu ile istediğin piksel sayısını verirseniz kutuyu küçültebilirsiniz.
Kodunuzubu şekilde düzeltirseniz istediğiniz gibi ayarlayabilirsiniz. Position sonrasında yazan left ve right komutlarını düzenleyerek ortalama yapabilirsiniz. Ayrıca kodunuza display: İnline; komutunu ekleyerek width haricinde kutuları yazınız çerçevesinde küçültebilirsiniz. Inline komutunu kullandığınızda kutu sola doğru yaslanacaktır. Sonrasında yine position komutu ile bulunacağı yeri ayarlaybilirsiniz.Kod:<p><h1 style="border: 2px solid rgb(0, 255, 255); padding: 10px; border-radius: 25px; text-align: center; position: relative; top: 5px; left: 700px; right: 132px; margin-left: 0px; margin-right: 0px; width: 100px; ">I am X</h1>
Şimdi gelelim önerilerime. Öncelikle CSS dosyasını ayırın ve HTML dosyasına atayın. Ondan sonra yazdığınız yazılara <div class="classın adını istediğiniz gibi vererek CSS üzerinden düzenleme yapacaksınız. "> komutuyla sınıf atayın. Ardından CSS dosyasında .classın adı olarak düzenlerseniz her satırdaki yazı için kodları tekrarlamadan tek komut dosyasıyla hepsinin düzenlemesini yapabilirsiniz. Ayrıca kutu dizayn etmek için Flex ve flexbox öneririm.
Sipariş formunda bazı önemli yerler olduğundan karaladım. Scriptler ile telefon numarası ve ülke kısmındaki boxları internetten alabilirsiniz. Flexbox sayesinde kutucukları ortalayabiliyorsunuz ve yan yana koyabiliyorsunuz. Kutucukların içinde soluk şekilde yazılmış yazıları "placeholder" komutuyla yapabilirsiniz. Eğer "required placeholder" yaparsanız da kutucuklara bilgi girilmeden formu göndermenize müsaade etmiyor. Bu arada VS Code kullanıyorsanız Live server extension indirip yazdığınız komutları benim yaptığım gibi tarayıcınız üzerinden inceleyebilirsiniz. Bu sayede domain kullanmanıza gerek yok.
Öncelikle tavsiyem CSS kodlarını farklı bir dosyada barındırmanız olacaktır. Böylece daha kolay çalışabilirsiniz ve dry prensipleri içinde kalırsınız. Bu da daha optimize, hafif ve okunması/düzenlenmesi kolay kodlar yazmanızı sağlar. Sorunuzun cevabına gelelim: P etiketlerinin display değerlerini inline olarak düzeltirseniz istediğinize ulaşırsınız.
Teşekkür ederim hocam. CSS kodlarını farklı dosyada yazdığım zaman çalışmamıştı, o yüzden HTML'in içine yazdım.
Ekranın ortasına almayı yazdığım kodda belirttim.Çok teşekkür ederim hocam.
Teşekkür ederim hocam. CSS kodlarını farklı dosyada yazdığım zaman çalışmamıştı, o yüzden HTML'in içine yazdım.
Dediğiniz gibi yaptığımda kutucuk sola bitişik oluyor hocam. Tekrar ekranın ortasına nasıl alabilirim?
CSS dosyasının çalışması için HTML içinde bağlantı vermeniz gerekiyor. Head etiketi içine aşağıdaki kodu yerleştirirseniz çalışacaktır.Teşekkür ederim hocam. CSS kodlarını farklı dosyada yazdığım zaman çalışmamıştı, o yüzden HTML'in içine yazdım.
<link rel="stylesheet" href="style.css">Yapıştırdığımda ekranın ortasında değil de, sol tarafta oluyor hocam.Ekranın ortasına almayı yazdığım kodda belirttim.
Ardından .css uzantılı dosyanın adını sizin css dosyanızın adı olarak belirleyin. Örneğin dosyanızın adı x.css ise About.css yazan yere x.css yazın. Bu arada kodu HTML dosyasında <head> </head> etiketinin içine yazın.