Özellikler: Özelleştirme: Kullanım: Ekran görüntüleri: ELinks nereden indirilir, modern bir metin tabanlı web tarayıcısı yaratma girişimidir. Proje Links tarayıcı kodundan başladı. Amacı ilk olarak Linklerde az çok eksik/zayıf bir kaç özelliği uygulamaya çalışmaktı. ELinks'teki E'nin nereden geldiği Deneyseldir. Bu çabaların başarısından sonra “E”, “Genişletilmiş” veya “Geliştirilmiş” olarak anlaşılmaya başlandı. Links tarayıcısı, bazı açılardan o zamanki en gelişmiş web tarayıcısı Lynx'i bazı açılardan geride bırakarak belirli bir tamlık derecesine ulaştığında, daha da geliştirilmesi kendisini bir dönüm noktasında buldu: grafikleri görüntülemeye ve saf metnin ötesine geçmek veya bir metin kullanarak web'de gezinmeyi ilerletmek. ilk başta elde edilenlerin ötesinde kullanıcı arayüzü Lynx ve ardından Bağlantılar - ancak yine de metin modunda. İlk yön, web sayfalarının grafik içeriğini görüntüleyebilen Linkler versiyonunda gerçekleşti - Links2. İkincisi, ELinks web tarayıcısıdır. Lynx, türünün çok olgun bir parçasıydı ve hala öyle. Yazarları, bir metin arabirimi kullanarak web'de gezinmenin birçok sınırlamasının ve dezavantajının üstesinden gelmeye yardımcı olan ve hızla genişleyen grafikten çok farklı bir dünya yaratan özel soyutlamalar ve kurallar ile metin modunda çok karmaşık ve sağlam bir web tarama konsepti tasarladı ve uyguladı. internetin bir parçası. Ancak HTML ve bilgisayarlar daha da gelişti, betik dillerinin yayılması başladı, tüm bilgi sunma, bulma ve tüketme dünyası ilerledi ve değişti. Yeni fırsatlar ortaya çıktı. Bu özelliklerin birçoğu Bağlantılarda uygulandı, ancak web belgelerindeki bilgilerin görsel sunumunda - daha fazla HTML'den daha fazla CSS'ye - aşağıdaki değişiklikler yeni yollar açtı; metin modunda kalırken bile. Ve bunu ELinks'te uygulamaya çalışıyorlar: bu özelliği destekleyen terminal öykünücülerinde renk görüntüleme desteği, CSS kullanarak biraz konumlandırma ve hatta bir tür JavaScript / ECMAScript desteği. Ağ teknolojilerinin teknik yönü (SSL desteği gibi) ve çeşitli metin kodlamaları için destek Links tarayıcısında zaten oldukça sağlamdı, ancak ELinks'te bazı özellikler geliştirildi ve diğerleri daha ayrıntılı hale getirildi. ELinks, konsol web tarayıcısı konseptinde ileri bir adımdır ve ELinks'i uygulamanın en gelişmiş örneği haline getirir. Lynx hala pozisyonunu koruyor olsa da. Metin modunda web'de gezinme kavramı, bir basitleştirme olsa da, grafik tarayıcı ortamı gibi olmaya çalışmaktan ziyade bilgileri sunmaya ve işlemeye yönelik özel bir yaklaşım oldukça iyi çalışıyor. Web belgelerinin uygulanması giderek daha karmaşık hale geliyor ve (Web sayfalarını metin modunda görüntülemenin tüm kaçınılmaz sınırlamaları ile) bunlarla başa çıkmak için belirli bir yolu takip etmek, ana akım, grafiksel tam gibi olma girişimiyle rekabet etmenin bir yoludur. -özellikli masaüstü web tarayıcıları. Bu, küçük ekranlı mobil cihazlar için tarayıcıların ikilemine benzer: büyük ekranlı bilgisayarları simüle etmeye çalışın veya görüntülenen web belgelerini ortamın özelliklerine uyacak şekilde dönüştürün. Metin tarayıcıları çoğunlukla az ya da çok büyük ekranlı bilgisayarlarda kullanılır, bu nedenle daha az boyut kısıtlaması ve daha fazla cazibe vardır: Düşük anahtar kalmak için Lynx, ötesine geçmek için ELinks. Özellikler Metin web tarayıcısı. Linux, diğer * nix sistemleri, Windows, DOS, OS / 2, BeOS ve diğerleri için sürümler. HTML (tablolar ve çerçeveler dahil). Çok sınırlı CSS ve JavaScript (Daha Fazlası). Uyumlu terminal emülatörlerinde/konsollarında 16, 88 veya 256 renk paleti desteği. Sekmeler için destek, indirme tamamlama bildirimi ile arka planda indirmeler. Fare desteği. Harici bir metin düzenleyicide web sayfası formlarındaki metin alanlarını düzenleme. URL'ler için kısayol tuşları. Perl, Lua, Guile, Ruby'deki komut dosyaları için destek.
Imapsync. Posta transferi
imapsync [1] / Linux kullanarak bir IMAP sunucusundan diğerine posta aktarma, komut satırı: imapsync —host1 imap.this.com —user1 [e-posta korumalı]—Passfile1 / home / user / imap / passwordfile1 —ssl1 —host2 imap.another.com —user2 [e-posta korumalı]—Passfile2 / home / user / imap / passwordfile2 —ssl2 —skipsize —allowsizemismatch - example.com ve posta kutumuz var [e-posta korumalı] Bir barındırma şirketinin sunucusunda. IMAP sunucusu: imap.this.com. IMAP sunucusu SSL'yi destekler. - example.com sitesi başka bir barındırıcıya aktarılıyor. Buna göre posta kutusu [e-posta korumalı] tüm içeriğiyle ve klasör yapısını koruyarak. Başka bir barındırma sağlayıcısının IMAP sunucusu: imap.another.com. IMAP sunucusu SSL'yi destekler. 1. Posta kutusu oluşturun [e-posta korumalı] ve transferin gerçekleştiği hosting firmasının sunucusundaki şifresi. 2. / home / user / imap / klasöründe iki metin dosyası oluşturun: birinci IMAP sunucusunda posta kutusu parolasıyla passwordfile1 ve ikinci IMAP sunucusunda posta kutusu parolasıyla passwordfile2. 3. chmod 600 / home / user / imap / passwordfile1 4. chmod 600 / home / user / imap / passwordfile2 5. imapsync'i kurun 6. imapsync'i uygun parametreler ve verilerle çalıştırın Imapsync, imap.this dosyasındaki klasör yapısını koruyarak posta aktarır. imap.another.com'da com. SSL, aktarım sırasında verileri şifrelemek için kullanılır ve parolalar, chmod 600 ayarıyla korunan dosyalarda saklanır.Postaları iki e-posta hizmeti arasında taşımak, ek imapsync seçenekleri [2] gerektirebilir. Örneğin, bir Gmail.com posta kutusunun içeriğini diğerine aktarırken, "—port1" ve "—port2" belirtmeniz gerekir: imapsync —host1 imap.gmail.com —port1 993 —user1 [e-posta korumalı]—Passfile1 / home / user / imap / passwordfile1 —ssl1 —host2 imap.gmail.com —port2 993 —user2 [e-posta korumalı]—Passfile2 / home / user / imap / passwordfile2 —ssl2 —skipsize —allowsizemismatch [1] Basit ve yaygın bir durum: bir e-posta kutusunun içeriği diğerine aktarılır - boş, başka bir sunucuda bulunur. Ancak daha karmaşık durumlar olabilir: Gmail'den Google Apps'a E-posta Taşıma ve imapsync ile Google Apps'a Geçiş. [2] Diğer seçenekler: imapsync ve imapsync (1) - Linux kılavuz sayfası ile postayı bir sunucudan diğerine taşıyın.
Arka plan HTML resmi
Ders 10. CSS. Resmin orta hizalaması
HTML resmi, resmi sayfa koduna ekleyin
Resmi görüntülemekten sorumlu HTML etiketi
- HTML resmi PNG, JPEG ve GIF formatında herhangi bir görüntü olabilir.
- Resmin HTML kodu etiketi ile tanımlanır.
- HTML resmi bir web sayfasının arka planı olabilir.
- HTML resmi bir köprü rolünde belirtilebilir.
- Sayfanın HTML koduna resim ekleme
- Görüntü ve metin arasındaki yatay ve dikey mesafe
- HTML'de bir arka plan resmi tanımlama
- HTML resmi - bağlantı ve tanımlayıcı kodu
- HTML görüntüsünü sayfanın veya bloğun ortasına yerleştirin
Uzantısı olan bir görüntüyü bir klasöre veya dosyanın bulunduğu başka bir yere yerleştirin, örneğin, istediğiniz gibi adlandırın.
Sayfanın HTML koduna resim ekleme:
Etiket eşleştirilmemiş. Kapatma şeklinize dikkat edin.
Özellikler ve değerler
- - gerekli, görüntünün kaynağını belirtir.
- - alternatif bir metin, arama robotunun bir web sayfasının içeriğini analiz ederken okuduğu bir yorum tanımlar. Ayrıca etiketlenmesi gerekiyor.
- - görüntünün genişliğini piksel olarak tanımlar.
- - görüntünün yüksekliğini piksel cinsinden tanımlar.
Orijinal görüntü kalitesini korumak için lütfen gerçek boyutları kullanın.
Web geliştirme için üç resim formatı kullanılabilir: PNG (.png), JPEG (.jpg) ve GIF (.gif). Adobe Photoshop, web siteleri için grafikler oluşturmaya yönelik özel bir araçtır. Bir görüntü biçimini diğerine dönüştürmek için kullanılabilir.
HTML resmi | Yatay ve dikey girintiler
veya arasındaki yatay ve dikey mesaferesim ve metin
Sonucu yeni bir pencerede görüntüleyin: HTML'de arka plan resmi
Nitelikler CSS Öğreticilerinde ele alınmaktadır.
Resim ekleme ve sırası → → buraya bakın.
HTML resmi - bağlantı
Örnek kod:
Sonucu yeni bir pencerede görüntüleyin: Sayfanın ortasındaki HTML görüntüsü
Burada nelere dikkat etmeniz gerekiyor? → İlk olarak, boyutlar belirtilir - bu, görüntünün yüklenmesini hızlandırır. İkinci olarak, nitelikler, alternatif bir metin olmasa bile yapılması oldukça arzu edilen bir şekilde hecelenir. İlk durumda, merkezleme belirlendi HTML parametre ve ikincisinde, basamaklı stil sayfalarını doğrusal olarak dahil ederek.
Yayınlanma tarihi: Ekim 2009 | Güncelleme: Ağustos 2014
Ders 9. HTML arka planı 
HTML resmi Ders 11. HTML Resmi ve Metin
Resmin merkezini div bloğunun merkezine nasıl hizalarım?
Uzun zamandır CSS kullanarak görüntüleri ortalamak için çeşitli yöntemler olmuştur. Bu yöntemlerin uygulanması büyük ölçüde Internet Explorer 5'ten etkilenmiştir. Ancak günümüzde tarayıcının bu sürümü pek ilgi görmemektedir, bu nedenle gereksiz kodlardan kurtulabilirsiniz.
Önceden, IE5 ve IE5.5 kendi kurallarını dikte ediyordu - sayfa öğesini ortalamak için bir CSS özelliği kullanmanız gerekir. Ve örneğin bir resmi ortalamak için, onu ek bir bloğun içine yerleştirmeniz gerekir:
Bu ek blok için ilgili CSS özelliği atanır:
Tüm bunlar gerekliydi çünkü Internet Explorer 5, o sırada var olan ve diğer tarayıcılar tarafından desteklenen, hizalanmış öğenin soluna ve sağına anında aynı mesafeyi otomatik olarak atayan kenar boşlukları özelliğini desteklemez. Yukarıdaki yöntem halen kullanılmaktadır.
Ancak IE5 ve IE5.5 geçmişte kaldı, dolayısıyla HTML daha basit ve daha zarif hale getirilebilir:
Uygun CSS sayesinde gereksiz ekstra blokların olmaması sağlanır:
Özellik, resme blok elemanının özelliğini atar, bu da resim veya çevresinde kullanma ihtiyacını ortadan kaldırır. Ayrıca, beyan, üst ve alt kenar boşluklarına sıfır değerleri ve resmi merkezde hizalayan sol ve sağ kenar boşluklarına otomatik olarak eşit bir değer atar.
Farklı üst ve alt kenar boşlukları atamanız mı gerekiyor? Sorun değil. Kısaltmaları unutmayın:
Ne yazık ki, görüntüleri sol ve sağ kenarlara (ve) hizalama durumlarının aksine, standart yöntemler kullanarak metni ortalanmış bir görüntünün etrafına sarmanın bir yolu yoktur. Tabii ki, eğer çok önemliyse, o zaman yapılabilir.
Ayrıca, resim aynı zamanda bir bağlantıysa, bağlantı alanı, resmin genişliğinden bağımsız olarak bloğun tüm genişliğine kadar uzanır. Bazı durumlarda, bu bir dezavantajdır.
Yukarıdaki hizalama yöntemi, metin içinde (haberler, makaleler) resim kullanan siteler için en uygundur. Fotoğraf galerileri için elbette resimleri hizalamanın daha karmaşık yolları var.
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Görev
Altyazı fotoğrafını web sayfasının yatay ortasına hizalayın.
Çözüm
Metin çizimleri genellikle bir web sayfasında ortalanır ve metin görüntüden önce ve sonra gelir. Bu öğe düzenlemesi, büyük bir metni anlamsal bloklara ayırmanıza ve resimlere dikkat çekmenize olanak tanır.
İlk önce, görüntünün ortalanmasına bakalım. Bunu yapmak için, değer merkeziyle metin hizalama stili özelliğini seçici P'ye ekleyin. Bu durumda, etiket bir paragrafın içine yerleştirilmelidir (etiket
). Sayfadaki tüm paragrafların ortalanmaya başlamasını önlemek için sınıf incirimizi tanıtacağız ve tüm işlemler onunla gerçekleştirilecektir. Örnek 1 bunun nasıl yapılacağını gösterir.
Örnek 1. Metin hizalamayı kullanma
HTML5CSS 2.1IECrOpSaFx
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1.
Pirinç. 1. Web sayfasının ortasına hizalanmış resim
Ayrıca fotoğrafa bir başlık da ekleyebilirsiniz. Metin, görüntünün hemen arkasına yerleştirilmeli ve benzer şekilde merkeze hizalanmalıdır. Burada her şey basit, yine sınıfımızı kullanacağız, ancak zaten onu etikete uygulayacağız.
Örnek 2. Resim yazısı
HTML5CSS 2.1IECrOpSaFx
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 2.
Bir fotoğrafı bir web sayfasının ortasına nasıl hizalarım?
2. Resmin altındaki imza
Fotoğraflı bir blok için etiketi kullanın
CSS merkezli görüntü
pencereler: Internet Explorer 6.0+, Firefox 1.0+, Google Chrome, Opera 5.0+ [1], Safari 3.1+, SeaMonkey 1.0+ [2].
Linux: Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [3], NetSurf 2.6+, Hv3.
CSS kullanarak bir görüntüyü merkeze yatay hizalama. Örnek:
HTML / XHTML. Kod:
<div sınıf = " örnek«>
<resimkaynak=» resim.jpg» alt=» resim» / >
</ div>
.örnek(konum: göreceli; sol: 0 piksel; üst: 0 piksel; yükseklik: otomatik; genişlik: %100; kayan nokta: sol; dolgu: 10 piksel; kenarlık: 1 piksel #ccc katı; arka plan: #fafafa;)
.örnekresim(ekran: blok; kenar boşluğu: 0 otomatik;)
Kabın CSS özellikleri (bu durumda örnek) çok farklı olabilir, görüntünün merkez hizalaması doğrudan görüntüyle ilgili stiller kullanılarak oluşturulur: .örnekresim(ekran: blok; kenar boşluğu: 0 otomatik;).
Aliosque alt yazılar ve tema
CSS merkezli görüntü
CSS kullanarak bir görüntüyü merkeze yatay hizalama. Örnek: HTML / XHTML.
Bir görüntüyü HTML ve CSS'nin ortasına hizalama
Kod:
[1] Ayrıca, CSS özelliklerinin kısaltması kullanılmadığı sürece Opera 4.0+'da. Yani, eğer CSS kodu örnek img biçimindeyse (ekran: blok; sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik;). [2] Ayrıca Netscape 6.01+, Mozilla 0.6+'da. [3] Ayrıca Netscape 6.01+, Mozilla 0.6+'da.
ELinkler. kullanım
Sayfalara gidin: ELinks - Metin veya konsol web tarayıcısı. Açıklama: özellikler, ekran görüntüleri, nereden indirilir. ELinkler. Yapılandırma - ELink'ler nasıl yapılandırılır. Başlatılan ELinks, menüsünü kullanarak yapabileceğiniz hemen hemen her şeyi yapmanızı sağlar. Bu nedenle, aşağıdaki tartışma yalnızca ELinks'in nasıl başlatılacağı ve örneğin birkaç başka şeyin nasıl yapılacağı hakkındadır. 1) ELinks nasıl başlatılır - ELinks, bir GUI ortamında (X Windows, MS Windows, vb.) veya bir komut satırı arayüzü ile başlatılabilir. İlk durumda, önce terminal öykünücüsü / konsolu başlatılmalıdır: xterm, rxvt, Win32 konsolu ve diğerleri: ELinks (Linux) - ELinks'i başlatmak için şu komutu girin: elinks - ELinks'i başlatmak için, İnternet: elinks Web - web belge adresi - ELinks'in yerel klasörleri görüntülemek üzere sabit sürücüye erişmesini başlatmak için: elinks dosyası: /// veya: elinks / - ELinks'i başlatmak için, yerel bir klasör açmak: elinks dosyası: /// home / user1 / veya: elinks / home / user1 / - Yerel bir dosyayı açan ELinks'i başlatmak için: elinks dosyası: ///home/user1/document1.htm veya: elinks /home/user1/document1.htm ELinks (Windows) - İçin ELinks'i başlatın, şu komutu girin: elinks - İnternetten bir web belgesi açan ELinks'i başlatmak için: elinks Bir web belgesinin web adresi - ELinks'in yerel klasörleri görüntülemek üzere sabit diske erişmesini başlatmak için: elinks dosyası: /// - ELinks'i çalıştırın, yerel bir klasör açın: elinks dosyası: // c / home / user1 / - Ne yerel bir dosya açan ELinks'i çalıştırmak için: elinks dosyası: //c/home/user1/document1.htm 2) ELinks menüsüne erişmek için: Klavyede Esc tuşuna basın 3) Halihazırda çalışan bir ELinks'te bir web belgesi açmak için: Klavyede g veya Esc -> Dosya -> URL'ye git -> [Web adresini girin] -> Gir 4) Geri git: Klavyede sol ok tuşu veya Esc -> Dosya -> Geri git 5) Bağlantıyı yeni arka planda aç sekmesi : Shift - t veya Esc -> Link -> Arka planda yeni sekmede aç 6) Sonraki sekmeye gidin: Shift -> veya Esc -> Görünüm -> Sonraki sekme 7) Sekmeyi kapatın: Klavyenizde c veya Esc tuşuna basın -> Görünüm -> Sekmeyi kapat 8) ELinks terminal öykünücüsünde çalışırken URI'yi harici uygulamaya iletin.
tarih: 2010-09-07
Bir html belgesinde görüntüler yatay, dikey ve ortalanmış olarak hizalanır.
Resmin yatay hizalaması
Görüntüyü yatay olarak kontrol etmek için özniteliği kullanın. hizala = "".
Görüntüleri HTML'de merkeze hizalama
Değerinde belirtin sol resmi sayfanın soluna veya değeri hizalamak istiyorsanız sağ- sağ kenarda. Varsayılan olarak, resim her zaman sayfanın soluna hizalanır:
Dikey görüntü hizalama
Aynı özelliği kullanmak hizala = "" görüntünün konumunu ve dikeyi kontrol edebilirsiniz. Bunu yapmak için anlamını yazmanız gerekir. Tepeüst sınıra hizalamak için, orta- ortada ve alt- alt sınır boyunca:
Not: kayıt resimler / fotoğraf.jpg görüntünün bir dizinde değil, görüntüler klasöründe olduğu anlamına gelir.
Resmi sayfanın ortasına hizalama
Ek olarak, görüntü ortalanabilir. Bunu yapmak için resim etiketini bir etiket çiftine sarın
1.1 HTML'ye Giriş
1.2 Html belgesinin yapısı
2.1 html'de paragraf
2.2 html'deki başlıklar
2.3 html'de alıntılar ve yorumlar
2.4 Html'de boşluk ve tireleme etiketleri
3.1 Numaralandırılmış html listesi
3.2 Madde işaretli liste
3.3 İç içe listeler
4.1 HTML metnini vurgulama
4.2 Yazı tipi ve yazı tipi boyutu
4.3 html'de metnin rengini değiştirme
4.4 Sayfa Kenarlıkları ve Arka Plan
5.1 Siteye resim ekleme
Bu yazımızda çeşitli html elemanlarının css özelliklerini kullanarak merkezlenmesi konusuna değineceğiz.
Çoğu zaman, bir div'i merkeze hizalamanız veya içeriğini hizalamanız gerekir. Bunu yapmanın birkaç yolu vardır. Bazı yöntemler metni, resimleri ve diğerlerini hizalamak için uygundur, ancak blokları hizalamak için uygun değildir.
İlk olarak, resimler, metin gibi blokların içeriğini hizalama seçeneklerine bakalım. Bu yöntem hemen hemen tüm öğeler için çalışır.
Bu durumda, her şey basittir - text-align özelliğini ana öğe için ortalayacak şekilde ayarlayın. Metni css kullanarak ortaya hizalamanın bu yolu en basit ve en kullanışlı olanıdır. Daha derin bir anlayış için bir örnek vereceğim. Bu durumda yalnızca içeriğin ortalandığını anlamak önemlidir.
HTML Kodu:
Ana gövde öğesi için merkeze hizalanmış bazı metinler
CSS kodu:
gövde (metin hizalama: merkez;) / * gövde içeriğini merkeze hizala * /
En basit - metin ve resimleri css kullanarak sayfanın ortasına hizalayarak çözdük.
Şimdi blok türü (div, tablo) gibi öğeleri hizalama yollarına geçelim. Bu durumda, içeriği değil, tabloları, blokları, paragrafları ortalayacağız.
Toplamda CSS ile iki seçenek sunuyorum: margin özelliğini kullanma ve konum c left özelliklerini kullanma. Sabit bir eleman genişliğiniz olmadıkça, px, % veya ne olursa olsun, bu yöntemlerin hiçbirinin işe yaramayacağını unutmamak önemlidir.
Bu nedenle, yapacağımız ilk şey, merkeze hizalamak istediğimiz öğenin hangi birimlerde ve genişliğinin ne olacağına karar vermektir.
Kenar boşluğu ile merkez hizalama
Bu genişliği yüzde veya piksel olarak belirtmeniz, marj kullanan yöntem için önemli değildir. Bu yöntemi kullanarak ortalamak için, margin özelliğinin değerleri olarak aşağıdaki 0 auto'yu ayarlamanız gerekir. Daha spesifik olarak, kenar boşluğu otomatik olmalıdır ve üst ve alt herhangi bir kenar boşluğuna ayarlanabilir. Onlar. değerin genişletilmiş versiyonu şu şekilde görünür: 0 auto 0 auto, ya da 10px auto 5% auto.
Böylece, elemanın üstü ve altı için dış kenar boşlukları ayarlayabilirsiniz ve yan kenar boşlukları otomatik olarak ayarlanmalıdır.
Bu, bir div merkezli veya başka herhangi bir öğeye sahip olmanın belki de en çok yönlü ve kullanışlı yoludur.
HTML Kodu:
CSS kodu:
gövde (metin hizalama: merkez;) div (dolgu: 10 piksel; renk: #FFFFFF;) div.centr (arka plan: # 003300; genişlik: 300 piksel; / * piksel olarak sabit genişlik * / kenar boşluğu: 10 piksel otomatik 0 otomatik; / * bloğu merkeze hizalayan ve üstten 10 piksel girintili kenar boşlukları * /) div.centrall (arka plan: # 990000; genişlik: %30; / * yüzdelerle sabit genişlik * / kenar boşluğu: %2 otomatik 0 otomatik; / * kutuyu ortaya hizalayan ve üstten %2 girintili dış dolgu * / text-align: center;)
Konum ve sol kullanarak orta hizalama
Bu seçenek her eleman için uygun değildir.
İlk olarak, genişlik yalnızca yüzde olarak belirtilmelidir; bu, piksellerle çalışmayacaktır. Bunun neden böyle olduğunu yakında anlayacaksınız.
İkinci olarak, üst etiketin, yukarıdakilerden herhangi biri olarak, göreli / mutlak / sabit olarak ayarlanmış bir konum özelliği olmalıdır.
Şimdi, hizalanmakta olan eleman için bu konum özelliği değerlerinden herhangi birini de ayarlamanız gerekiyor. Sonra 100 alın, bu elemanın genişliğini çıkarın ve elde edilen sayıyı 2'ye bölün. Ortaya çıkan değer, sol için belirtilmesi gereken değer olacaktır (bu özelliğin, genellikle olmadığı gibi, sağ ile değiştirilebileceğine dikkat edilmelidir). gerekli). Bu, istenen div veya tabloyu ana öğenin ortasına yerleştirecektir.
O nasıl çalışır? Burada, sol özelliğin, ekran dışı öğede üst öğenin sol sınırından sayılması için konum özelliğine ihtiyaç duyulur, ancak bazen üst öğe için belirli bir konum özelliğinin olmadığı seçenek uygundur. Sonra left özelliğini, sol kenarlık ebeveynin genişliğinin yarısı, eksi kutunun kendisinin genişliği olacak şekilde ayarladık.
Nasıl çalıştığını kendiniz görün.
HTML Kodu:
CSS kodu:
gövde (konum: göreli;) div (dolgu: 10 piksel; renk: #FFFFFF; konum: göreli;) div.centrall (arka plan: # 990000; genişlik: %20; / * yüzdelerle sabit genişlik * / metin hizalama: merkez ; sol: %40; / * üst öğenin sol kenarından dolgu * /)
Bu, yüzde yüz doğrulukla otomatik olarak yapmanızı sağlar herhangi bir nesneyi / katmanı görüntünün merkezine veya kenarlarına hizalayın... Ayrıca görüntüdeki belirli bir alana hizalayabilirsiniz. Bütün bunlar çok basit ve bu makalede tartışılacak.
Kural olarak, yeni başlayanlar bu işlemi gözle yapar, bu hiç gerekli değildir. Bir araç seçin Hareketli ve buna dikkat edin. Bu görevden sorumlu bir dizi ayar vardır ( ekran görüntüsüne bak):
İlk üç düğme dikey hizalamadan sorumludur (soldan sağa): üst, orta, alt.
Sonraki üç düğme yatay hizalamadan sorumludur (soldan sağa): sol, orta, sağ.
Bu nedenle, nesneyi tam olarak merkeze yerleştirmek için dikey ve yatay olarak merkezlemeyi seçmeniz gerekir.
En önemli hizalama kuralı: her şeyden önce, programın kenarları veya ortayı araması gereken alanı Photoshop'a söylemelisiniz. Bunu yapana kadar hizalama düğmeleri etkin olmayacaktır, yani basılamayacaklardır.
Bu, tüm görüntünün veya ayrı parçasının ortasında bir nesnenin nasıl oluşturulacağının sırrıdır.
Yani, eylemlerin sırası aşağıdaki gibidir:
Bu resmi merkeze yerleştirmek istediğinizi varsayalım:
seçenek 1- tüm tuvale göre.
Aşama 1
Programın görüntüyü hizalaması gereken alanı Photoshop'a belirtiyoruz. Bu yaratılarak yapılır.
Katmanlar paletinde arka plan katmanını seçin ve Ctrl + A ( Hepsini seç). Sonuç olarak, bir seçim kutusu görmelisiniz. "Yürüyen karıncalar" arka plan katmanının etrafında. (Kural olarak, arka plan katmanı tuval ile aynı boyuttadır).
Not
Arka plan katmanını başka bir şekilde seçebilirsiniz - tuşunu basılı tutun Ctrl ve arka plan katmanına sol tıklayın. Yöntem, bu katmanın kilidi açıldığında çalışır (bu, kilit simgesiyle gösterilir).
Adım 2
Şimdi bir araç seçmeniz gerekiyor Hareketli... Bir seçim çerçevesine sahip olduğumuzda, hizalama düğmeleri aktif hale gelecektir, bu da kullanılabilecekleri anlamına gelir.
Hizalamak istediğiniz resmin olduğu katmanı seçin ve şimdi bu resmi yerleştirmek istediğiniz yere göre butonlara tıklayın. Örneğin tam ortasına yerleştirelim. O zaman şu düğmelere basmamız gerekiyor:
Başka bir örnek. Diyelim ki bir resmi ortaya, ancak sol kenardan yerleştirmek istiyorsunuz. Ardından, parametreler panelinde aşağıdaki düğmeleri seçin:
seçenek 2- tek bir görüntü parçasında
Diyelim ki görüntüde, içine ideal olarak bir resmi mükemmel şekilde eşit bir şekilde yerleştirmeniz gereken bir parça var. Örneğimde, bir cam kare ekledim. İçinde başka bir resim olsun ( bu arada, böyle bir cam kareyi kendiniz nasıl yapacağınızı öğrenebilirsiniz).
Aşama 1
İlk adım, ilk seçeneğe benzer şekilde, bu parçayı vurgulamaktır. Bu nasıl yapılır?
- Bu parça ayrı bir katmandaysa (ayrı olarak eklediğim karem gibi), tıklamanız gerekir Ctrl ve kilitli değilse katman küçük resmine tıklayın).
- Bu parça görüntünün kendisindeyse, seçim araçlarını seçmeniz gerekir. Dikdörtgen ve Oval bölgeler ve onların yardımıyla parçanın etrafına eşit bir seçim çizin. Bu araçlar nasıl kullanılır. Hareketlive tuşu basılı tutarakVardiya, klavyenizdeki yön oklarına tıklayın. Resim 10 piksellik artışlarla hareket edecektir.
Bu tuşu basılı tutmaz, sadece klavye oklarını kullanırsanız, resim 1 piksellik artışlarla hareket edecektir.
Metinde bir hata bulursanız, onu seçin ve Ctrl + Enter tuşlarına basın. Teşekkürler!
Görev
Altyazı fotoğrafını web sayfasının yatay ortasına hizalayın.
Çözüm
Metin çizimleri genellikle bir web sayfasında ortalanır ve metin görüntüden önce ve sonra gelir. Bu öğe düzenlemesi, büyük bir metni anlamsal bloklara ayırmanıza ve resimlere dikkat çekmenize olanak tanır.
İlk önce, görüntünün ortalanmasına bakalım. Bunu yapmak için, değer merkeziyle metin hizalama stili özelliğini seçici P'ye ekleyin. Bu durumda, etiket bir paragrafın içine yerleştirilmelidir (etiket
). Sayfadaki tüm paragrafların ortalanmaya başlamasını önlemek için sınıf incirimizi tanıtacağız ve tüm işlemler onunla gerçekleştirilecektir. Örnek 1 bunun nasıl yapılacağını gösterir.
Örnek 1. Metin hizalamayı kullanma
HTML5 CSS 2.1 IE Cr Op Sa Fx
Resimden önceki metin
Resimden sonra metin
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1.
Pirinç. 1. Web sayfasının ortasına hizalanmış resim
Ayrıca fotoğrafa bir başlık da ekleyebilirsiniz. Metin, görüntünün hemen arkasına yerleştirilmeli ve benzer şekilde merkeze hizalanmalıdır. Burada her şey basit, yine sınıfımızı kullanacağız, ancak zaten onu etikete uygulayacağız.
Örnek 2. Resim yazısı
HTML5 CSS 2.1 IE Cr Op Sa Fx
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 2.
Pirinç. 2. Resmin altındaki imza
Fotoğraflı bir blok için etiketi kullanın
Son zamanlarda aynı anda birkaç tür görevle karşılaştım:
1. Resmi sayfanın ortasına ortalamak ve tarayıcıyı yeniden boyutlandırırken sıkıştırmak.
Prensip olarak hem birinci hem de ikinci görevler biraz javascript kullanılarak çözülebilir, ancak bunu html + css ile akıllıca yapmak istedim.Kullanılacağı sitenin modern olması ve desteğin ie9 +, FF, Chrome, Safary, Opera ile sınırlı olması da görevi kolaylaştırdı.
2. Tarayıcı penceresinin boyutundan bağımsız olarak görüntünün mutlak merkezlenmesi.
Ama bununla uğraşmam gerekiyordu. Orijinal fikir şuydu:
.wrapper (taşma: gizli; konum: sabit; üst: 0; sağ: 0; alt: 0; sol: 0;) .item (konum: mutlak; üst: %50; sol: %50; görüntü: satır içi blok ;) .item img (marj: -%50 0 0 -%50;)
Fikir şu mantığa dayanıyordu:
- Dış blok, .wrapper tam serbest genişliğine ve yüksekliğine kadar gerilir.
- İç ünite, .kalem, satır içi blok olduğu için içerideki görüntünün genişliğini ve yüksekliğini alır; ve sol üst köşeden ana bloğun ortasına gösterilir.
- Resmi tam olarak merkeze hizalaması gereken eksi kenar boşluğunda kaldırma .wrapper
Buna dönüşümü veya daha doğrusu, nesnenin görüntüsünü değiştiren, ancak olduğu yeri bırakan çevirme işlevini hatırlayarak karar verdim. Ve görüntünün kenar boşluğunu transform: translate (-50%, -50%); sorun hemen çözülür. Ve işte sonunda ortaya çıkan şey:
* (dolgu: 0; kenar boşluğu: 0; dikey hizalama: üst;) html, gövde (genişlik: %100; yükseklik: %100;) .wrapper (taşma: gizli; konum: sabit; üst: 0; sağ: 0 ; alt: 0; sol: 0;) .item (konum: mutlak; üst: %50; sol: %50; görüntüleme: satır içi blok;) .item img (-webkit-transform: çevir (-50%, - %50); -moz-dönüşümü: çevir (-50%, -%50); dönüştür: çevir (-50%, -%50);)
Not: Bunların tek seçenek olup olmadığından emin değilim. Bence bu seçenekler herkes için uygun değil.
Ama eminim ki benim durumumda ortaya çıkarlarsa, görevlerinde çok yardımcı olabilecekleri insanlar olacaktır. Ek olarak, kodu biraz eklerseniz, eski IE için koltuk değneği ekleyebilirsiniz, çok eski tarayıcılar uğruna temiz kodu bozmak istemediğim için eklemedim.
ZY2: Eleştiri ve tavsiyelere açığız. Sonuna kadar okuduğunuz için teşekkür ederiz.
Etiketler: html, css, css3, resim, resim, resim, hizalama, dikey hizalama
Avatarların psikolojideki değeri
Avatarların psikolojideki değeri
MS Word'de bir harf nasıl vurgulanır
Bir kişinin avatarı ne anlama gelir?
Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?