Kaydırma ile div. JQuery ve daha fazlasını kullanarak div'i dikey ve yatay kaydırma yapmanın iki yolu

Yazardan: Konuğumuz Peter Businessmans'ın makalesi. Peter... ön uç geliştirici SCSS'de yazma stillerinden hoşlandığı Audience sitesinde. Bugün bize dürüst bir CSS numarası dediğim şeyi gösterecek. Web'in tamamı dikeydir. Siteyi normal bir kitap gibi okursunuz: soldan sağa, yukarıdan aşağıya. Ancak bazen dikeylikten uzaklaşıp çılgınca bir şey yapmak istersiniz: Yatay bir liste yapın. Veya daha da çılgını, yatay bir site!

Şöyle bir şey yapabilseydik iyi olurdu:

/* sahte kod */ div ( kaydırma yönü: yatay; )

/* sahte kod */ div( kaydırma yönü: yatay;

Maalesef bu gerçekleşmeyecek. Bu CSS'de planlanmamıştır bile.

Bu çok kötü çünkü çalıştığım şirket bunu gerçekten kullanacak. Çok sayıda sunum yapıyoruz ve sunum oldukça yatay bir şey. Tipik olarak slaytların en boy oranı 4:3 veya 16:9'dur. Bu nedenle elimizde sürekli sorun yatay slaytlar ve dikey web teknolojileri ile. “Biz” derken beni kastediyorum. Ama sevdiğim şey zorluklardır.

Başka bir kullanım durumu

Aklıma spesifik bir uygulama yöntemi geldi. Buradaki fikir, müşterilerin tüm ürünleri tek bir slaytta görüntülemesinin uygun olmasıdır. Doğal olarak ürün kataloğu tek bir forma sığmaz. Bu nedenle kataloğu her biri yatay kaydırmalı üç kategoriye ayırmaya karar verdik. Böylece her kategoride en popüler üç ürün görünür, daha az önemli olan ürünler ise açılır. kolay erişim.

JavaScript'siz yöntem

JS'de bunu yapmanın birçok yolu olduğunu hepimiz biliyoruz. yatay kaydırma. CSS-Tricks'te bazı örnekler var. Bu fikrin hayata geçirilip geçirilemeyeceğini merak ediyordum. saf CSS. Çözümün çok basit olduğu ortaya çıktı:

öğeler içeren bir kap oluşturun;

kabı, alt kenarı sağda olacak şekilde saat yönünün tersine 90 derece döndürün;

Kabın içindeki elemanları tekrar yerlerine döndürüyoruz.

Adım 1) bir kap oluşturun

Yaratmak div bloğu birçok alt öğeyle birlikte.

Örneğimizde kaydırılabilir kapsayıcı 300 piksel genişliğinde olacak ve 8 adet 100x100 piksel öğeye sahip olacaktır. Boyutlar isteğe bağlıdır, istediğinizi ayarlayabilirsiniz.

madde 1 madde 2 madde 3 madde 4 madde 5 madde 6 madde 7 madde 8

< div class = "horizontal-scroll-wrapper squares" > < div >madde 1< / div > < div >öğe 2< / div > < div >öğe 3< / div > < div >öğe 4< / div > < div >öğe 5< / div > < div >öğe 6< / div > < div >öğe 7< / div > < div >öğe 8< / div > < / div >

Kabın yüksekliği genişliğe dönüşecek ve bunun tersi de geçerli olacaktır. Aşağıda kabın "genişliği" 300 piksel olacaktır:

Yatay kaydırma sarmalayıcı ( genişlik: 100 piksel; yükseklik: 300 piksel; taşma-y: otomatik; taşma-x: gizli;)

genişlik: 100 piksel; yükseklik: 300 piksel; taşma - y : otomatik ; taşma - x : gizli;

Ve alt öğeler:

Yatay kaydırma sarmalayıcı > div ( genişlik: 100 piksel; yükseklik: 100 piksel; )

Yatay - kaydırma - sarmalayıcı > div ( genişlik: 100 piksel; yükseklik: 100 piksel;

Adım 2) kabı döndürün

Şimdi kabı kullanarak -90 derece döndürmeniz gerekiyor. CSS özellikleri dönüştürmek. Aldık yatay kaydırma yani.

Yatay kaydırma sarmalayıcı ( ... dönüşüm: döndürme (-90 derece); dönüşüm kökeni: sağ üst; }

Yatay - kaydırma - sarmalayıcı ( . . . dönüştürme: döndürme (-90 derece);

Sadece küçük bir sorun var: alt öğeler konteynerle birlikte dönmüş durumda.

Adım 3) alt öğeleri yerlerine geri koyun

Peki elementleri yerlerine nasıl döndürürsünüz? Ne zaman geri çevir CSS yardımı dönüşüm özellikleri

Yatay kaydırma sarmalayıcı > div ( ... transform: döndür(90 derece); transform-origin: sağ üst; )

Yatay - kaydırma - sarmalayıcı > div ( . . . dönüştürme: döndürme (90 derece); transform-orijin: sağ üst;

Adım 4) Sabit Konumlandırma

Her şey iyi görünüyor ama birkaç sorun var.

Bu nedenle kabı döndürdük ve sağ üst köşeyi bağlantı noktası olarak ayarladık. Sol taraftaki konteynerin genişliğine kaydırıldı. Hayal etmesi zorsa parmağınızı sağa koyun üst köşe sayfayı açın ve çevirin. Çıkış: Translate özelliğini kullanarak geri çevirmeniz gerekir.

Zaten daha iyi. Ancak aynı sorun alt öğelerde de gözlendiğinden ilk öğe hala görünmüyor. Bu, ilk alt öğeye genişliğinin değeriyle birlikte bir üst kenar boşluğu verilerek veya tüm öğeler bir kap gibi dönüştürülerek düzeltilebilir. Bulduğum en kolay yol, konteynere alt elemanların genişliğine eşit üst dolgu eklemek, böylece elemanlar için bir tampon bölge yaratmaktır.

Uyumluluk

Kullanabileceğim cihazların uyumluluğunu kontrol ettim.

Masaüstü

Kaydırma çubuğu stili şu anda yalnızca Webkit/Blink tarayıcılarında çalıştığından, Firefox ve IE'de normal bir gri kaydırma çubuğu gösterilir. Bu, JS kullanılarak ve tamamen gizlenerek düzeltilebilir, ancak bu başka bir dersin konusu.

Fare tekerleğiyle kaydırma yapmak masaüstünde harika çalışır. Ancak dizüstü bilgisayarımın bu konuda kendi görüşü var. Dokunmatik ekranlı ve dokunmatik yüzeyli cihazlarda demo, div hiç döndürülmemiş gibi davranır.

Mobil cihazlar

Android'in kabın döndürüldüğünü algıladığını ve sola ve sağa kaydırarak kaydırma yapmanıza izin verdiğini öğrendiğimde çok şaşırdım.

İOS'ta ise tam tersine her şey o kadar düzgün değil. Tarayıcı sanki kap hiç döndürülmemiş gibi davranıyor. Bu nedenle kaydırmak için yukarı ve aşağı kaydırmanız gerekiyor ki bu oldukça garip. Taşma: gizli sorunu çözmez.

Çözüm

Can I Use web sitesine göre, CSS'deki dönüşümler artık kullanıcıların %93'ünden fazlası tarafından desteklenmektedir (bu yazının yazıldığı tarihte, Kasım 2016). Burada bir sorun olmaması gerekiyor.

Her ne kadar bu yöntemi üretimde kullanmamak daha iyi olsa da. Bunu bazı cihazlarda test ettim, ancak hepsinde değil ve o kadar da ayrıntılı değil.

En çok büyük bir problem– sola ve sağa gitmek için yukarı ve aşağı kaydırmanız gereken dokunmatik girişler. Bir çözüm, siteye bir açıklama içeren bir mesaj yazmak olabilir, ancak o zaman kullanıcıların bu mesajı okumasına güvenmek zorunda kalırsınız. Ve o zaman bile sağduyuya aykırı olacaktır. Başka bir çözüm, cihazlarda JS kullanarak dokunmatik girişleri yakalamaktır, ancak bu durumda her şeyi JS'de yazmak ve CSS hack'imizi tamamen bırakmak daha iyidir.

Bazen kendi kaydırma çubuğuna sahip bir sayfada bir blok oluşturmak yeterlidir. Burada tabi ki akla çerçeveler geliyor ama artık kullanım ömrünü doldurmuş oldukları için bize pek uygun değiller. Normal bir div'e kaydırma eklenebilecek bir çözüm istiyorum ve böyle bir çözüm var, sadece bir tane değil, tamamı AJAX özelliklerini kullanıyor.

jScrollPane ile dikey kaydırma Yaygın sözcükler

jScrollPane, favori jQuery kütüphanesi için bir eklentidir. Bir div'e dikey kaydırma eklemenizi sağlar. Kaydırma, görünümü istediğiniz gibi yapılandırılabilir. Eklenti sayfasında ("bilgi" bağlantısı) şunları bulabilirsiniz: çeşitli yollar onun uygulaması. Bunlardan ikisini vurgulayacağım: birincisi - ana yöntemleri ve harici kaydırma türlerini önerir, ikincisi - kayan bir sayfa içinde kaydırmanın uygulanmasını ve tüm sayfayı bu şekilde kaydırmayı gösterir. Eklentiyi resmi web sitesinden indirebilirsiniz, ancak benimkinden de indirebilirsiniz.

Küçük hileler

Eklentiyi pratikte birkaç kez kullandım. Böyle bir örnek görülebilir. Dış görünüş standart değil, bu iyi - kalbinizin arzuladığı her şeyi şekillendirebilirsiniz (ruhunuzu değil, dostum, ama müşteriler, müşteriler için - Editörün Notu).

Bazen bir eklenti, fare tekerleğinin kaydırma için çalışması ve içerik miktarına bağlı olarak kaydırma boyutunun değişmesi için ek eklentilerin yüklenmesini gerektirir. Ancak uygulamanın gösterdiği gibi, her şey onlarsız çalışır. Tabii ki, belki eklentiyi bir araya getirmek için acelem vardı, ancak bu pek olası değil, öyle görünüyor ki resmi olandan indirdim.

Örnek

Kodu ayrıntılı olarak analiz etmeyeceğim, prensip olarak orada karmaşık bir şey yok. Ancak bazı noktalarda duracağım.

HTML dosyası. Kaydırmalı bir bloğun yapısı aşağıdaki gibidir

İçerik

Bir sınıfa sahip bir dış div vardır, tanımlayıcıya ve gerekli kaydırma bölmesi sınıfına sahip bir iç div vardır. Tüm. Fonksiyon çağrısı yapılır Aşağıdaki şekilde:

$(işlev()
{
$("#vnutrenniy).jScrollPane((showArrows:true, ScrollbarWidth: 16, ArrowSize: 16));
});

Aradığınızda belirtin çeşitli parametreler Kaydırma çubuğunun genişliği (scrollbarWidth), oklarının boyutu (arrowSize) vb. gibi. Başlıcaları şunlardır:

ScrollbarWidth [sayı] - kaydırma genişliği (varsayılan 10)

ScrollbarMargin [sayı] - kaydırma çubuğunun solundaki kenar boşluğu (varsayılan 5)

wheelSpeed ​​[sayı] - piksel cinsinden kaydırma tekerleği hızı (varsayılan 18)

showArrows [boolean] - grafik oklarını gösterir veya göstermez (varsayılan yanlış)

arrowSize [sayı] - showArrows=true ise ok yüksekliği (belirtilmemişse CSS aracılığıyla hesaplanır)

dragMinHeight [sayı] - kaydırıcının minimum yüksekliği (varsayılan 0)

dragMaxHeight [sayı] - maksimum yükseklik kaydırıcı (varsayılan 99999!)

ScrollbarOnLeft [boolean] - solda kaydırma çubuğu gerekiyorsa bunu true olarak ayarlayın.

Şimdi jscroll.css dosyasını açalım. Aşağıdaki satırlara bakın.

8-15 satır. İç div'in genişliğini ve yüksekliğini (!), taşmayı (gerekli bir parametre değil gibi görünüyor) ayarladık, dolgu büyük olasılıkla gerekli olacak, gerisi önemli değil.

Satır 17-19. Dış div. Hiçbir durumda bunun için bir yükseklik belirtmemelisiniz ve float: left belirtmelisiniz. Bütün bunlar tek bir amaç için yapılır - böylece Opera 10 kaydırma ile normal şekilde çalışır. Bu dikkate alınmazsa, divanın kaydırılması tarayıcının kaydırılmasıyla senkronize olacak ve sonuç tamamen saçma olacaktır. Hatırla bunu.

Satır 23-57. Görüntü stillerini kaydır

Teorik olarak kalan satırların değiştirilmesi gerekli değildir.

FleXcroll'da dikey ve yatay kaydırma

Bu senaryoya aşina değilim. O olmadan gider jQuery'yi kullanma bu bir artıdır (jQuery her zaman gerekli değildir). İkinci avantaj ise yatay kaydırmanın olmasıdır. Üçüncü avantaj, eklentinin bulunduğu arşivin, büyük saygı duyulan kullanım örnekleri ve iyi, çeşitli örnekler içermesidir.

Projelerde eklentiyle çalışmak zorunda değildim ama ilk tanışma hoş geçti. Göze çarpan tek dezavantaj, fareyi gezdirirken imlecin bir "kaleme" dönüşmemesidir. Bunun bir eksi olduğunu düşünüyorum, çünkü bunun bir parşömen olup olmadığı sezgisel olarak belirsiz. Ancak her şeyi CSS kullanarak düzeltmenin sorun olmayacağını düşünüyorum.

Sonuç olarak

Div'ler için dikey ve yatay kaydırmalar uygulamada sorun değildir, her şey basit ve uygulaması kolaydır. Bu nedenle devam edin, kullanın, yeni bir şey keşfedin. Yorumları, soruları, önerileri duymaktan her zaman memnuniyet duyarım =).

Selamlar, sevgili arkadaşlar. Fark etmiş olabileceğiniz gibi, neredeyse tüm tarayıcılarda web sitelerinde gezinmek çok keskin ve hoş değil. Ve tabii ki sitemin kaydırılmasını daha düzgün hale getirmek isterim; elbette bu yapılabilir ve üstelik çok fazla zorlamadan da yapılabilir. Bu kullanılarak yapılır basit jQuery eklenti ve çeşitli CSS kuralları. Her şeyin nasıl çalıştığını görmek için aşağıdaki demoya göz atmanızı öneririm.

Ι

Neyse şimdi eklentiye geçelim düzgün kaydırma sitemize.

HTML

İlk önce eklememiz gerekecek jQuery kütüphanesi. Zaten eklediyseniz bu adımı atlayın:

Daha sonra düzgün kaydırmamızdan sorumlu olan JQuery eklentisinin kendisini eklememiz gerekiyor ve onunla birlikte ayrı eklentiler de var. CSS kuralları sitedeki kaydırma çubuğunun kendisini değiştiren. Bir sonraki derste kaydırma çubuğu hakkında daha fazla konuşacağız, ancak şimdilik yalnızca düzgün kaydırma. Ve işte kurallar ve eklenti:

Tüm. Artık ilk ve önemli adımı atmış olduk. Şimdi basit bir kural eklememiz gerekiyor CSS stilleri bizim sitemiz.

CSS HTML, gövde(yükseklik: %100; )

Bu, eklentimizin sayfa genişliğinin uzatıldığını ve yüksekliğin %100'ü olduğunu bilmesi için gereklidir. Bu kuralı CSS'nize eklediğinizden emin olun, aksi takdirde kaydırma çalışmayacaktır.

Senaryo

Şimdi demo örneğine daha yakından bakmayı öneriyorum. Ve HTML ile başlayacağız.

Demodaki HTML Site İçeriği için yumuşak kaydırma Merhaba, Bu, sitenizdeki sayfaların düzgün kaydırıldığını gösteren metindir. Gerçekten kötü görünmüyor değil mi :) Bu yazı tekrarlanacak. (function($)( $(window).load(function())( $("body").mCustomScrollbar(( theme:"dark-thin" )); )); ))(jQuery);

Gördüğünüz gibi, burada eklenen tüm komut dosyalarıyla birlikte tamamen standart HTML5 işaretlemesini kullandım ve CSS dosyaları yukarıda bahsettiğimiz şey. Burada anlatılacak bir şey olmadığını düşünüyorum, eğer anlamadığınız bir şey olursa yorumlardan sormayı unutmayın.

Peki şimdi CSS kurallarına bir göz atalım.

Demo @import url'sinden CSS(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); gövde( arka plan rengi: #fff; renk: #555; yazı tipi boyutu: 14 piksel; yazı tipi ailesi: "Kötü Komut Dosyası", el yazısı; kenar boşluğu: 0; dolgu: 0; minimum genişlik: 480 piksel; ) html, gövde( yükseklik: 100%; ) h2( yazı tipi boyutu: 80 piksel; metin hizalama: merkez; yazı tipi ailesi: "Istakoz", el yazısı; yazı tipi ağırlığı: 700; yazı tipi stili: italik; renk: #444; ) hr( yükseklik: 0; kenarlık: yok; kenarlık-alt: 1 piksel katı #eee; kenarlık-top: 1 piksel katı #eee; kenar boşluğu-alt: 50 piksel; temizle: her ikisi de; ) .cont( yazı tipi boyutu: 30 piksel; kenar boşluğu: 0 otomatik ; üst dolgu: 20 piksel; genişlik: %50; maksimum genişlik: %50; ) .text( üst dolgu: 15 piksel; alt dolgu: 20 piksel)

CSS kuralları da çok basit ve çok fazla yok, ayrıca demonun görsel olarak güzel görünmesi için buraya Google yazı tiplerinin eklendiğini de görebilirsiniz.

Merhaba arkadaşlar. Bugün sorunsuz web sitesi kaydırma hakkında konuşacağız. Bu, bir düğmeye veya bağlantıya tıklamakla ilgili değil, bir tekerlek veya kaydırıcıyı kullanırken düzgün kaydırmayla ilgilidir.

Kısa bir not, sitelerden birinde uygulamak zorunda kaldım ve okuyuculardan birinin isteği üzerine daha ciddi bir yazı (indirim widget'ı) hazırlarken blogda yazmaya karar verdim. Artem, sana merhaba. Unutmadım!

Elbette pek çok kişi zaten düzgün kaydırma özelliğine sahip tarayıcılar kullanıyor. özel uzatma tarayıcı için, ancak hepsi değil. Sitenizi ziyaret edecek cihazların çoğunda sorunsuzluk sağlayalım.

Sorunsuz web sitesi kaydırması için eklenti

Bu sorunu çözmek için, birçok özelliğe sahip olduğundan Malihu-özel kaydırma çubuğu eklentisi eklentisini seçtim:

• Dikey ve/veya yatay şerit taslak.
• Özelleştirilebilir kaydırma darbesi.
• Pürüzsüz fare tekerleği kaydırma.
• Kaydırıcıyı kullanarak yumuşak kaydırma.
• Klavye desteği ve okları veya PgUp/PgDn'yi kullanarak düzgün kaydırma.
• Dokunmatik ekran desteği.
• Kullanıma hazır temalar.
• CSS kullanarak manuel özelleştirme.
• Farklı kaydırıcı görüntüleme seçenekleri.
• Düzgün kaydırma ekleme yeteneği çeşitli unsurlar olan sayfada.

Elbette çoğu kişi için bu işlevsellik gereksiz olabilir. Sadece tekerlekle kaydırmayı kolaylaştırmak istiyorsanız, sonunda bu amaçlar için çok basit bir çözüme bakacağız.

"Durun, çeşitli bloklarda düzgün kaydırma yapmak iyi ama geldiğimiz sitenin düzgün kaydırılması nerede?" - diyorsun. Sakinlik. Bunu şimdi yapacağız.

Eklenti bağlantıları

Seçilen çözüm bir jQuery eklentisi olduğu için yapacağımız ilk şey, eğer bağlı değilseniz jQuery'nin kendisini siteye bağlamak olacaktır.

Şimdi sorunsuz kaydırma için eklentiyi yukarıdaki bağlantıdan indirin ve siteye 2 dosya bağlayın.

• jquery.mCustomScrollbar.concat.min.js
• jquery.mCustomScrollbar.min.css

Aşağıdaki yapıyı elde edeceksiniz:

Düzgün kaydırma alan

Hatırlanması gereken en önemli şey, jQuery'ye bağımlı tüm eklentilerin jQuery'den sonra bağlanması gerektiğidir.

Her şey bağlandıktan sonra betiği başlatmanız gerekir:

(function ($) ( $(window).on("load", function () ( $("body").mCustomScrollbar(( theme: "koyu-ince" )); )); )(jQuery);

Ve biraz CSS ekleyin Basit kurallar Belgeye kaydırma uygulamak için. Stil sayfanızın en başına aşağıdaki işaretlemeyi ekleyin:

Gövde, html (yükseklik: %100; taşma: gizli; )

Bu, standart tarayıcı kaydırma çubuğunu kaldıracak ve betiğin anlayabileceği bir yükseklik ayarlayacaktır. Zaten bitmiş bir siteye bağlanırsanız korkmayın. Vakaların %99'unda bu, işaretlemenizi hiçbir şekilde etkilemeyecektir.

İlkiyle tamamen aynı şekilde bağlanır, yalnızca 3 ayarı vardır ve yalnızca 2,6 kilobayt ağırlığındadır:

$(function() ( jQuery.scrollSpeed(100, 800, "easeOutCubic"); ))

İlk sayı kaydırma adımı, ikinci sayı hız, üçüncü sayı ise animasyon türüdür.

Bu kadar. Herkese güle güle.

Bu yazımızda yatay/dikey kaydırma çubuğu eklemenizi veya kaldırmanızı da sağlayan overflow özelliğini tüm değerleriyle detaylı bir şekilde inceleyeceğiz. Başka bir deyişle kaydırma çubuklarının nasıl yapılacağı.

CSS'deki taşma, içeriğin bu bloğun yüksekliğini veya genişliğini aşması durumunda bir bloktaki bilgilerin görüntülenmesinin nasıl görüneceğinden sorumludur. Bu özellik yalnızca aşağıdakiler için geçerlidir: blok elemanları(display : blok; veya başlangıçta blok - div vb. olanlar).

Bu özelliğin alabileceği olası değerler (varsayılan olarak görünür):

• Görünür - Belirtilen yükseklik ve genişliğin ötesinde bile öğenin tüm içeriği görüntülenir.
• Gizli - Yalnızca öğenin içindeki alan görüntülenir, geri kalanı gizlenir.
• Kaydırma - Kaydırma çubukları her zaman eklenir.
• Otomatik - Kaydırma çubukları yalnızca gerektiğinde eklenir.
• Inherit - Üst öğenin değerini devralır.

Çoğu zaman bu özellik, bir öğeye kaydırma çubuklarını kaldırmak veya eklemek için kullanılır. Örneğin çerçeveleri tam boyuta sıkıştırmamak için bu şekilde ele alıyorlar. Veya bazılarını eklemek için büyük Metin böylece yarım sayfayı kaplamaz, rahatça oturur özel blok ve orada kaydırılıp okunabiliyordu. Çoğunlukla mülk, bilgilerin rahat görüntülenmesi sorununu çözmektedir.

Demoda her bir özellik değerinin pratikte nasıl çalıştığını görebilirsiniz:

HTML Kodu

Sayfa görünür gizli

Yoldaşlar! pozisyon oluşturma oyunlarıyla ilgili günlük çalışmanın başlangıcı önemli rol kitlesel katılım sistemlerinin oluşumunda. Bu sorunların önemi o kadar açıktır ki, faaliyetimizin sürekli niceliksel büyümesi ve kapsamı, yeni tekliflerin tanımlanmasını ve açıklığa kavuşturulmasını gerektirmektedir. Dolayısıyla yapının güçlendirilmesi ve geliştirilmesi, geliştirme modelinin test edilmesinde ilginç bir deneyi temsil etmektedir. Kuruluşun görevi, özellikle yeni model organizasyonel faaliyetler büyük ölçüde Acil ihtiyaçları karşılayan personel eğitim sisteminin oluşturulmasını belirler.

Yapıyı güçlendirme ve geliştirme konusundaki çeşitli ve zengin deneyim, ilerici gelişim alanlarının önemini değerlendirmemize olanak sağlar. Böylece Daha fazla gelişme çeşitli formlar etkinlikler, yeni teklifler geliştirmede önemli görevleri gerçekleştirmenize olanak tanır. Günlük uygulamalar, planlanan hedeflerin uygulanmasının, katılımcıların verilen görevlerle ilgili olarak aldıkları pozisyonların oluşumuna geniş bir çevrenin (uzmanların) katılımını sağladığını göstermektedir. Bu sorunların önemi o kadar açıktır ki, yapının güçlendirilmesi ve geliştirilmesi, temel mali ve idari koşulların test edilmesi açısından ilginç bir deneyi temsil etmektedir. Böylece faaliyetimizin sürekli niceliksel büyümesi ve kapsamı, gelişme biçimlerinin önemini değerlendirmemize olanak sağlar. Daha üst düzeydeki ideolojik değerlendirmelerin yanı sıra personel eğitiminin kapsamı ve yeri, katılımcılar tarafından verilen görevlerle ilgili olarak alınan pozisyonların oluşumuna çok çeşitli uzmanların katılmasını sağlar.

taslak

Yoldaşlar! Günlük işlerin bir konum oluşturmayla başlaması, kitlesel katılım sistemlerinin oluşmasında önemli rol oynuyor. Bu sorunların önemi o kadar açıktır ki, faaliyetimizin sürekli niceliksel büyümesi ve kapsamı, yeni tekliflerin tanımlanmasını ve açıklığa kavuşturulmasını gerektirmektedir. Dolayısıyla yapının güçlendirilmesi ve geliştirilmesi, geliştirme modelinin test edilmesinde ilginç bir deneyi temsil etmektedir. Kuruluşun görevi, özellikle yeni örgütsel faaliyet modeli, büyük ölçüde acil ihtiyaçları karşılayan bir personel eğitim sisteminin oluşturulmasını belirler.

Yapıyı güçlendirme ve geliştirme konusundaki çeşitli ve zengin deneyim, ilerici gelişim alanlarının önemini değerlendirmemize olanak sağlar. Böylece, çeşitli faaliyet biçimlerinin daha da geliştirilmesi, yeni tekliflerin geliştirilmesinde önemli görevleri yerine getirmemize olanak sağlar. Günlük uygulamalar, planlanan hedeflerin uygulanmasının, katılımcıların verilen görevlerle ilgili olarak aldıkları pozisyonların oluşumuna geniş bir çevrenin (uzmanların) katılımını sağladığını göstermektedir. Bu sorunların önemi o kadar açıktır ki, yapının güçlendirilmesi ve geliştirilmesi, temel mali ve idari koşulların test edilmesi açısından ilginç bir deneyi temsil etmektedir. Böylece faaliyetimizin sürekli niceliksel büyümesi ve kapsamı, gelişme biçimlerinin önemini değerlendirmemize olanak sağlar. Daha üst düzeydeki ideolojik değerlendirmelerin yanı sıra personel eğitiminin kapsamı ve yeri, katılımcılar tarafından verilen görevlerle ilgili olarak alınan pozisyonların oluşumuna çok çeşitli uzmanların katılmasını sağlar.

Oto

Yoldaşlar! Günlük işlerin bir konum oluşturmayla başlaması, kitlesel katılım sistemlerinin oluşmasında önemli rol oynuyor. Bu sorunların önemi o kadar açıktır ki, faaliyetimizin sürekli niceliksel büyümesi ve kapsamı, yeni tekliflerin tanımlanmasını ve açıklığa kavuşturulmasını gerektirmektedir. Dolayısıyla yapının güçlendirilmesi ve geliştirilmesi, geliştirme modelinin test edilmesinde ilginç bir deneyi temsil etmektedir. Kuruluşun görevi, özellikle yeni örgütsel faaliyet modeli, büyük ölçüde acil ihtiyaçları karşılayan bir personel eğitim sisteminin oluşturulmasını belirler.

Yapıyı güçlendirme ve geliştirme konusundaki çeşitli ve zengin deneyim, ilerici gelişim alanlarının önemini değerlendirmemize olanak sağlar. Böylece, çeşitli faaliyet biçimlerinin daha da geliştirilmesi, yeni tekliflerin geliştirilmesinde önemli görevleri yerine getirmemize olanak sağlar. Günlük uygulamalar, planlanan hedeflerin uygulanmasının, katılımcıların verilen görevlerle ilgili olarak aldıkları pozisyonların oluşumuna geniş bir çevrenin (uzmanların) katılımını sağladığını göstermektedir. Bu sorunların önemi o kadar açıktır ki, yapının güçlendirilmesi ve geliştirilmesi, temel mali ve idari koşulların test edilmesi açısından ilginç bir deneyi temsil etmektedir. Böylece faaliyetimizin sürekli niceliksel büyümesi ve kapsamı, gelişme biçimlerinin önemini değerlendirmemize olanak sağlar. Daha üst düzeydeki ideolojik değerlendirmelerin yanı sıra personel eğitiminin kapsamı ve yeri, katılımcılar tarafından verilen görevlerle ilgili olarak alınan pozisyonların oluşumuna çok çeşitli uzmanların katılmasını sağlar.

body (margin:0 0 0 0; padding:0 0 60px 0; yazı tipi boyutu:16px;) h2 (renk:#CC0033;) div ( genişlik:200px; /* sabit genişlik */ yükseklik:300px; /* sabit yükseklik */ border:1px katı #555; dolgu:4px; kenar boşluğu:4px; kayan nokta:sol; ) .VisibleDiv (taşma:görünür;) .HiddenDiv (taşma:gizli;) .ScrollDiv (taşma:kaydırma;) .AutoDiv ( taşma:otomatik;)

Bu konuda şu gerçeğe dikkat etmekte fayda var özel durum Belirli bir sabit yükseklik ve genişliğe sahip bloklar. Bu önemlidir; örneğin, blok yüksekliğinin auto olarak ayarlandığı seçeneği göz önünde bulundurun:

Etkin olmayan kaydırma çubuklarının göründüğü kaydırma durumundaki küçük rahatsızlık dışında, metnin her durumda bloğun içinde doğru şekilde görüntülendiğini görüyoruz.

Ancak bu durumda, birçoğunun neden ortaya çıktığını ve nasıl düzeltileceğini anlamadığı küçük bir tehlike var. Gerçek şu ki, taşma olan bir blok: görünürse; yani, varsayılan değer ve içeriği, none dışında herhangi bir kayan değere sahip öğelere sahipse, bunların tümü yanlış görüntülenecektir. Bu durumun ne olduğunu anlamak için bir örnek düşünün:

Sayfa VisibleDiv bloğunun altında başka bir görünür blok daha var

Yoldaşlar! Günlük işlerin bir konum oluşturmayla başlaması, kitlesel katılım sistemlerinin oluşmasında önemli rol oynuyor. Bu sorunların önemi o kadar açıktır ki, faaliyetimizin sürekli niceliksel büyümesi ve kapsamı, yeni tekliflerin tanımlanmasını ve açıklığa kavuşturulmasını gerektirmektedir. Dolayısıyla yapının güçlendirilmesi ve geliştirilmesi, geliştirme modelinin test edilmesinde ilginç bir deneyi temsil etmektedir. Kuruluşun görevi, özellikle yeni örgütsel faaliyet modeli, büyük ölçüde acil ihtiyaçları karşılayan bir personel eğitim sisteminin oluşturulmasını belirler.

overflow:visible (varsayılan değer) ile div'den hemen sonra gider VisibleDiv bloğunun altında görünür hiçbir şey yoktur

Yoldaşlar! Günlük işlerin bir konum oluşturmayla başlaması, kitlesel katılım sistemlerinin oluşmasında önemli rol oynuyor. Bu sorunların önemi o kadar açıktır ki, faaliyetimizin sürekli niceliksel büyümesi ve kapsamı, yeni tekliflerin tanımlanmasını ve açıklığa kavuşturulmasını gerektirmektedir. Dolayısıyla yapının güçlendirilmesi ve geliştirilmesi, geliştirme modelinin test edilmesinde ilginç bir deneyi temsil etmektedir. Kuruluşun görevi, özellikle yeni örgütsel faaliyet modeli, büyük ölçüde acil ihtiyaçları karşılayan bir personel eğitim sisteminin oluşturulmasını belirler.

gövde (kenar boşluğu:0 0 0 0; dolgu:0 0 60 piksel 0; yazı tipi boyutu: 16 piksel;) h2 (renk:#CC0033;) p (float:left;) div ( genişlik:500 piksel; yükseklik:otomatik; kenarlık: 1 piksel katı #555; dolgu: 4 piksel; kenar boşluğu: 4 piksel; ) .VisibleDiv (taşma: görünür; arka plan: rgba(0,255,0,0.1);) .ignor (arka plan: rgba(0,255,0,0.6); renk:# FFFFFF;yazı tipi ağırlığı:kalın;)

İlk durumda, float özelliğine sahip içeriğin bloğun dışına taşındığı ve bloğun yüksekliğini belirlerken dikkate alınmadığı açıktır, ikinci durumda overflow: görünür; Başka bir blok özel olarak yerleştirilip farklı bir renge boyanır. Bunlar, bu tür blokların bir sayfada nasıl davranabileceğinin tek örnekleri değildir (overflow: görünür ve yükseklik: auto; ile). Bu durum görünür değerin gizli değeriyle değiştirilmesiyle düzeltilebilir; bu özelliğin yalnızca yüksekliği: auto; olan bloklar için belirtilmesi gerektiğini unutmayın. , sabit bir yükseklik varsa, içeriğin belirtilen yükseklikten büyük olması durumunda gizlenme olasılığı yüksektir.

Düzeltilmiş sürüm şu şekilde görünecektir:

Ayrıca blokta taşma: görünür varsa böyle bir sorun yaşamazsınız; ve yükseklik: otomatik; bazı değerler de belirtildi şamandıra özellikleri. Genel olarak birçok durumda öğelerin görüntülenmesi bireysel özelliklerden ziyade bir dizi özelliğe bağlıdır.