Apabila meletakkan projek seterusnya (atau hanya mereka bentuk grid susun atur), ramai yang menghadapi dilema - untuk menggunakan lebar susun atur tetap atau grid "getah" yang menyesuaikan diri dengan saiz tetingkap penyemak imbas.
Setiap penyelesaian ini mempunyai kebaikan dan keburukan sendiri; Saya ingin memberi tumpuan kepada keburukan, kerana biasanya ia adalah tepat dalam mencerminkan kelemahan keputusan ini bahawa seseorang perlu memilih antara dua kejahatan.
Lebar tetap grid reka letak Reka letak dipaksa ke dalam dimensi mendatar 960-980 piksel (supaya semuanya disertakan pada kebanyakan peranti dalam kebanyakan resolusi), yang dengan saiz tetingkap mendatar yang besar kelihatan sejuk - jalur menegak nipis halaman berguna kandungan dan medan besar yang tidak berguna bagi ruang yang tidak digunakan merentasi grid susun atur "Getah" di seluruh lebar tetingkap Sekali lagi, dengan saiz tetingkap mendatar yang besar, terdapat satu lagi masalah: baris teks menjadi sangat panjang, dan membacanya langsung tidak selesa seperti yang kita mahukan.Satu lagi masalah biasa dengan penyelesaian ini ialah jidar sisi dengan saiz tetingkap mendatar yang besar tidak lagi konsisten secara visual dengan dimensi mendatar elemen, yang juga tidak menambah keselesaan apabila melihat susun atur.
Saya ingin mencadangkan penyelesaian mudah - hadkan saiz mendatar minimum kepada nilai tetap dalam piksel, dan jadikan relatif maksimum sebagai peratusan lebar tetingkap. Ini adalah penyelesaian yang sangat remeh dengan cara yang mudah 2 lagi versi spesifikasi CSS.
Kemas kini: Saya ingin membuat tempahan bahawa kita tidak bercakap tentang kesan getah klasik dan penyesuaian sepenuhnya kepada semua resolusi, tetapi hanya mengenai julat resolusi munasabah tertentu yang reka letak susun aturnya. Dalam contoh di bawah, ini ialah julat resolusi desktop klasik dengan saiz resolusi mendatar 1024 piksel.Biar saya tekankan sekali lagi: Siaran itu tidak bercakap tentang penyelesaian untuk semua jenis peranti dan semua julat resolusi. Masalah ini tidak dapat diselesaikan secara prinsip dalam rangka satu susun atur., untuk menyelesaikannya satu cara atau yang lain akan memerlukan beberapa susun atur. Terbang secara berasingan, potong secara berasingan.
Buat bekas susun atur:
... ...
Kami menghiasinya dengan kod gaya mudah:
div.page-container ( min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; )
Walau bagaimanapun, penyelesaian ini mungkin kelihatan tidak mencukupi bagi sesetengah orang kerana hakikat bahawa dengan saiz tetingkap mendatar yang sangat besar, masalah dengan panjang talian muncul semula. Ini boleh diselesaikan dengan teknik tambahan yang sama mudah: mencipta bekas luar tambahan di dalam bekas yang telah diterangkan dan mengehadkan lebar maksimumnya kepada nilai tetap (secara subjektif, nampaknya saya nilai dalam julat 1400-1600 piksel adalah paling sesuai). Sekali lagi kami hanya menggunakan Alat CSS 2.0. Penyelesaian ini bukannya yang dicadangkan dalam ulasan pertama penambahan mudah lebar sebagai peratusan untuk bekas asal juga akan berfungsi dalam IE, yang sehingga versi 9 tidak memahami petunjuk nilai serentak.
Menambah HTML:
...
...
Dan tukar CSS sedikit:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 auto;
Seperti yang anda lihat, penyelesaiannya sangat mudah dan agak universal; ia boleh digunakan untuk sebarang elemen blok.
Apabila meletakkan projek seterusnya (atau hanya mereka bentuk grid susun atur), ramai yang menghadapi dilema - untuk menggunakan lebar susun atur tetap atau grid "getah" yang menyesuaikan diri dengan saiz tetingkap penyemak imbas.
Setiap penyelesaian ini mempunyai kebaikan dan keburukan sendiri; Saya ingin memberi tumpuan kepada keburukan, kerana biasanya ia adalah tepat dalam mencerminkan kelemahan keputusan ini bahawa seseorang perlu memilih antara dua kejahatan.
Lebar tetap grid reka letak Reka letak dipaksa ke dalam dimensi mendatar 960-980 piksel (supaya semuanya disertakan pada kebanyakan peranti dalam kebanyakan resolusi), yang dengan saiz tetingkap mendatar yang besar kelihatan sejuk - jalur menegak nipis halaman berguna kandungan dan medan besar yang tidak berguna bagi ruang yang tidak digunakan merentasi grid susun atur "Getah" di seluruh lebar tetingkap Sekali lagi, dengan saiz tetingkap mendatar yang besar, terdapat satu lagi masalah: baris teks menjadi sangat panjang, dan membacanya langsung tidak selesa seperti yang kita mahukan.Satu lagi masalah biasa dengan penyelesaian ini ialah jidar sisi dengan saiz tetingkap mendatar yang besar tidak lagi konsisten secara visual dengan dimensi mendatar elemen, yang juga tidak menambah keselesaan apabila melihat susun atur.
Saya ingin mencadangkan penyelesaian mudah - hadkan saiz mendatar minimum kepada nilai tetap dalam piksel, dan jadikan relatif maksimum sebagai peratusan lebar tetingkap. Ini diselesaikan secara remeh dengan cara mudah 2 lagi versi spesifikasi CSS.
Kemas kini: Saya ingin membuat tempahan bahawa kita tidak bercakap tentang kesan getah klasik dan penyesuaian sepenuhnya kepada semua resolusi, tetapi hanya mengenai julat resolusi munasabah tertentu yang reka letak susun aturnya. Dalam contoh di bawah, ini ialah julat resolusi desktop klasik dengan saiz resolusi mendatar 1024 piksel.Biar saya tekankan sekali lagi: Siaran itu tidak bercakap tentang penyelesaian untuk semua jenis peranti dan semua julat resolusi. Masalah ini tidak dapat diselesaikan secara prinsip dalam rangka satu susun atur., untuk menyelesaikannya satu cara atau yang lain akan memerlukan beberapa susun atur. Terbang secara berasingan, potong secara berasingan.
Buat bekas susun atur:
... ...
Kami menghiasinya dengan kod gaya mudah:
div.page-container ( min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; )
Walau bagaimanapun, penyelesaian ini mungkin kelihatan tidak mencukupi bagi sesetengah orang kerana hakikat bahawa dengan saiz tetingkap mendatar yang sangat besar, masalah dengan panjang talian muncul semula. Ini boleh diselesaikan dengan teknik tambahan yang sama mudah: mencipta bekas luar tambahan di dalam bekas yang telah diterangkan dan mengehadkan lebar maksimumnya kepada nilai tetap (secara subjektif, nampaknya saya nilai dalam julat 1400-1600 piksel adalah paling sesuai). Sekali lagi, kami hanya menggunakan alat CSS 2.0. Penyelesaian ini, bukannya hanya menambah lebar sebagai peratusan untuk bekas asal seperti yang dicadangkan dalam ulasan pertama, juga akan berfungsi dalam IE, yang, sehingga versi 9, tidak memahami petunjuk nilai serentak.
Menambah HTML:
...
...
Dan tukar CSS sedikit:
div.page-container ( max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 auto;
Seperti yang anda lihat, penyelesaiannya sangat mudah dan agak universal; ia boleh digunakan untuk sebarang elemen blok.
Dari pengarang: salam pembaca blog saya yang dikasihi! Pasti ramai di antara anda telah mendengar legenda tentang naga, Santa Claus dan binatang yang tidak dapat difahami yang dipanggil reka bentuk web getah, yang mampu mengubah bentuknya. Manuskrip John Tolkien akan memberitahu anda tentang watak pertama, ibu bapa akan memberitahu anda tentang yang kedua, tetapi saya mengambil sendiri maklumat tentang yang ketiga. Tidak kira betapa peliknya, bagaimanapun, dalam artikel ini saya akan cuba mengunyah reka bentuk web getah dan bercakap tentang kelebihan dan kekurangannya.
Apabila membangunkan laman web, juruweb, pertama sekali, harus dipandu oleh matlamat projek. Jika penting bagi pelanggan bahawa halaman web boleh dilaraskan kepada mana-mana skrin monitor, kemudian di sini pertolongan akan datang reka bentuk getah (adaptif).
Format ini mendapat namanya kerana lebarnya ditetapkan bukan dalam piksel, tetapi sebagai peratusan. Dengan bantuannya, halaman akan dibuka pada keseluruhan skrin monitor, tanpa mengira resolusi.
Agar kerjaya anda sebagai pereka web berkembang pesat, adalah penting untuk mengkaji arah ini. Ramai pelanggan yang mempunyai pangkalan pelanggan setia yang sedia terkumpul sangat menuntut pada ketika ini, kerana mereka ingin memberikan pengguna mereka kemudahan maksimum.
Kelahiran Reka Bentuk Web FluidSebagai pemerhatian yang menarik, kita dapat perhatikan fakta bahawa di negara kita, pakar mula melihat reka bentuk web "getah" dari sudut pandangan positif lebih awal daripada di Barat. Hakikatnya ialah pada kelahiran arah web, ia datang ke kawasan ini sejumlah besar pencetak berfikiran sempit.
Pakar asing hanya tidak menyedari kemungkinan mewujudkan tidak tetap perkembangan grafik. Tetapi konsep "web" dan "reka bentuk" datang kepada kami hampir sama, akibatnya fleksibiliti visual imej itu dilihat oleh pembangun sebagai kebebasan kreatif biasa.
Adakah reka bentuk web yang lancar dan responsif adalah perkara yang sama?Orang sering mengelirukan kedua-dua konsep ini, namun, ia bukan sinonim tulen antara satu sama lain. Reka bentuk web responsif melibatkan kerja dengan reka letak tapak web yang berbeza untuk mencipta kemudahan penggunaan maksimum pada semua jenis peranti, dengan mengambil kira semua jenis resolusi skrin.
Ia "secara munasabah" melaraskan imej keseluruhan ke skrin bergantung pada saiz paparan pada peranti. Sebenarnya, reka bentuk bendalir adalah salah satu elemen reka bentuk web adaptif. Ia, sebaliknya, hanya membuat perubahan pada perkadaran halaman web.
Oleh itu, kita boleh membuat kesimpulan bahawa reka bentuk web responsif adalah gabungan getah dan penambahbaikan progresif lain. Walaupun disebabkan definisi yang sesuai, kekeliruan kadangkala boleh timbul. Ia amat tidak menyenangkan apabila perselisihan faham dalam hal ini berlaku dengan pelanggan, jadi berhati-hati dan sentiasa menjelaskan apa yang pelanggan maksudkan apabila bercakap tentang reka bentuk getah tapak.
Faedah Reka Bentuk Web FluidDengan reka bentuk css getah anda mempunyai keupayaan untuk mereka bentuk halaman web yang mengisi segala-galanya ruang kosong pelayar, tanpa mengira saiz skrin. Jika terdapat sebarang perubahan pada tetapan berkaitan kebenaran, keseluruhan struktur tapak akan menyesuaikan semula kepada syarat yang dikemas kini. Keajaiban dan keajaiban, bukan?
Ciri ini memastikan bahawa halaman web akan menduduki tetingkap penyemak imbas sepenuhnya, tidak kira sama ada gambar dipaparkan pada HTC kecil atau pada 20 inci monitor skrin lebar. Ini adalah kelebihan utama reka bentuk getah.
Pengguna yang mempunyai monitor kecil tidak mengalami masalah jalur mendatar menatal, tetapi kadangkala ia mengganggu pemilik format skrin lebar yang besar. Akibatnya, dalam hal ini, yang terakhir akan dapat menikmati gambar sepenuhnya, kerana keseluruhan kawasan paparan akan digunakan dengan berkesan.
Jika kita mempertimbangkan persoalan laman web mana reka bentuk web getah sesuai, maka semuanya bergantung pada matlamat pelanggan. Fleksibiliti visual ini akan kelihatan baik pada tapak tersebut di mana peletakan pada satu halaman web adalah keutamaan kuantiti maksimum kandungan, dan standard estetik pudar ke latar belakang.
Atas dasar inilah reka bentuk web getah digunakan secara meluas dalam penciptaan portal berita, blog, serta semua jenis laman maklumat. Dalam kes ini, penggunaannya paling sesuai.
Kecenderungan moden dan pendekatan dalam pembangunan web
Ketahui algoritma untuk pertumbuhan pesat dari awal dalam pembinaan tapak web
Kelemahan Reka Bentuk Web FluidSelain itu mata positif, reka bentuk web sedemikian juga mempunyai beberapa kelemahan khusus. Salah satunya ialah, sebenarnya, hasil akhir halaman "pelarasan automatik" kepada keadaan resolusi skrin tertentu tidak dapat diramalkan. Beberapa elemen grafik di tapak mungkin tiba-tiba mendapati diri mereka berada di tempat yang berbeza, kerana mereka telah dipindahkan oleh rakan sekerja jiran.
Satu lagi kelemahan "getah" sedemikian adalah hakikat bahawa memuatkan halaman dengannya boleh meningkat sebanyak 2-3 kali berbanding dengan tempoh standard. Ini berlaku kerana sesetengah penyemak imbas memilih tentang reka letak halaman. daripada format ini. Mereka bergelut dengan memaparkan elemen lebar boleh ubah, yang juga meningkatkan risiko ralat visual.
Contoh reka bentuk web yang lancar dan responsifUntuk kejelasan, saya ingin menunjukkan kepada anda beberapa contoh yang berjaya getah dan reka bentuk penyesuaian daripada cukup pemaju yang berjaya.
1. http://www.simplebits.com/Pertama, mari kita lihat laman web seorang blogger Amerika yang terlibat dalam pembangunan web secara serentak. Versi penuh tapak:
versi mudah alih laman web:
Seperti yang anda lihat, dalam kes ini gambar hanya diselaraskan dengan saiz peranti, dan struktur umum tapak kekal tidak berubah.
2. http://www.fork-cms.com/Sekarang saya cadangkan anda membiasakan diri dengan tapak web yang menyesuaikan diri peranti tertentu dan, bergantung pada saiznya, membina semula strukturnya sendiri sepenuhnya. Versi penuh tapak:
Versi mudah alih tapak:
Itu sahaja. Saya harap bahan hari ini menarik dan anda tidak membuang masa anda. Jika ya, tinggalkan komen mengenai perkara ini dan kongsi pendapat anda sendiri. Saya menghargai maklum balas positif dan pendapat pakar daripada pakar reka bentuk web 2.0. Langgan blog supaya tidak terlepas lagi menarik dan informasi berguna.
Itu sahaja untuk saya, jumpa lagi!
Trend dan pendekatan moden dalam pembangunan web
Ketahui algoritma untuk pertumbuhan pesat dari awal dalam pembinaan tapak web
Vlad Merzhevich
Susun atur bendalir tiga lajur mungkin merupakan susun atur yang paling fleksibel dan boleh disesuaikan yang tersedia. Gabungan peratusan dan piksel untuk menentukan lebar lajur membolehkan anda membuat reka letak yang berbeza, memilihnya untuk memenuhi keperluan anda. Dalam Rajah. 5.17 menunjukkan pilihan untuk susun atur tiga lajur untuk kemudahan, mereka bernombor.
nasi. 5.17. Susun Atur Tiga Lajur
Di sini simbol peratusan (%) bermaksud bahawa lebar lajur ditentukan sebagai peratusan lebar susun atur, px - lebar lajur dinyatakan dalam piksel, dan tanda infiniti (∞) bahawa lajur itu menduduki ruang yang tinggal. Walaupun terdapat banyak susun atur yang berbeza, prinsip pembinaannya tetap sama dan termasuk dua kaedah utama: kedudukan dan elemen terapung. Anda juga boleh menggunakan jadual untuk membuat lajur dengan ketinggian yang sama.
Menggunakan KedudukanUntuk mengawal kedudukan lapisan berbanding unsur induk perlu untuk ibu bapa menetapkan harta kedudukan dengan nilai relatif , dan elemen kanak-kanak, yang membentuk lajur, nilainya adalah mutlak . Struktur kod untuk empat susun atur pertama adalah sama dan dibentangkan dalam Contoh 5.13.
Contoh 5.13. Dua lajur dalam piksel atau tiga dalam peratusan
Tiga lajur Tajuk tapak Lajur 1 Lajur 2 Lajur 3
Di sini lajur dinomborkan mengikut tertib, i.e. Lajur 1 di sebelah kiri, Lajur 2 di tengah dan Lajur 3 di sebelah kanan.
Kedudukan mempunyai kelemahan tertentu yang mengehadkan penggunaan kaedah ini - apabila menambah pengaki, ia akan disembunyikan di bawah lajur. Ini kerana lapisan susun atur tidak mempunyai ketinggian seperti itu, jadi ia tidak menolak lapisan pengaki ke bawah. Jika pengaki benar-benar diperlukan pada halaman, anda harus menggunakan kaedah pembinaan lajur berdasarkan unsur terapung. Kaedah ini juga tidak berfungsi dalam IE6 kerana pepijat di dalamnya.
Untuk susun atur No. 1, di mana lebar lajur pertama adalah getah dan selebihnya tetap, gayanya adalah seperti berikut (contoh 5.14).
Contoh 5.14. Susun atur No. 1
Pengepala ( latar belakang: #D5BAE4; ) .susun atur ( kedudukan: relatif; /* Kedudukan relatif */ ) .susun atur DIV ( kedudukan: mutlak; /* Kedudukan mutlak */ ) .col1 ( latar belakang: #C7E3E4; /* Warna latar belakang * / kiri: 0; /* Kedudukan tepi kiri */ kanan: 300px; /* Kedudukan tepi kanan */ .col2 ( latar belakang: #E0D2C7; lebar: 200px; /* Lebar lajur */ kanan: 100px; /* Shift ke kiri dengan lebar lajur 3 */ ) .col3 ( latar belakang: #ECD5DE; lebar: 100px; kanan: 0; )
Lajur dengan lebar tertentu mempunyai sifat lebar, dan kedudukannya di sebelah kiri atau kanan ditentukan oleh sifat kiri atau kanan, masing-masing. Lebar getah lajur yang tinggal dibina dengan serentak menambah kiri dan kanan , yang nilainya sama dengan lebar lajur tetap.
Susun atur No. 2 (contoh 5.15) dan No. 3 (contoh 5.16) dibina berdasarkan prinsip yang sama.
Contoh 5.15. Susun atur No. 2
Pengepala ( latar belakang: #D5BAE4; ) .susun atur ( kedudukan: relatif; ) .susun atur DIV ( kedudukan: mutlak; ) .col1 ( latar belakang: #C7E3E4; lebar: 100px; ) .col2 ( latar belakang: #E0D2C7; kiri: 100px; kanan: 200px;).col3 ( latar belakang: #ECD5DE; lebar: 200px; kanan: 0; )
Contoh 5.16. Susun atur No. 3
Pengepala ( latar belakang: #D5BAE4; ) .susun atur ( kedudukan: relatif; ) .susun atur DIV ( kedudukan: mutlak; ) .col1 ( latar belakang: #C7E3E4; lebar: 100px; ) .col2 ( latar belakang: #E0D2C7; lebar: 200px; kiri: 100px; .col3 ( latar belakang: #ECD5DE; kiri: 300px; kanan: 0; )
Susun atur No. 4, di mana lebar semua lajur ditetapkan sebagai peratusan, mempunyai beberapa nuansa. Jika lebar yang sama bagi semua lajur diperlukan, ia boleh ditetapkan secara pecahan (33.33%), tetapi penyemak imbas Opera tidak boleh berfungsi dengan nilai peratusan pecahan, jadi "lubang" akan muncul di antara lajur (Rajah 5.18).
nasi. 5.18. Lebar lajur dinyatakan dalam peratusan pecahan
Dalam situasi sedemikian, anda harus bertukar kepada saham yang tidak sama rata, contohnya, 33%, 34%, 33%, seperti yang ditunjukkan dalam contoh 5.17.
Contoh 5.17. Susun atur No. 4
Pengepala ( latar belakang: #D5BAE4; ) .susun atur ( kedudukan: relatif; ) .susun atur DIV ( kedudukan: mutlak; ) .col1 ( latar belakang: #C7E3E4; lebar: 33%; ) .col2 ( latar belakang: #E0D2C7; kiri: 33 %; lebar: 34% ; .col3 ( latar belakang: #ECD5DE; kanan: 0; lebar: 33%; )
Dalam sesetengah penyemak imbas, jurang kecil mungkin muncul antara lajur. Ia boleh diselesaikan dengan menggunakan nilai pecahan dan bukannya keseluruhan peratus, i.e. 33.3% dan bukannya 33%.
Susun atur yang tinggal, di mana dua daripada tiga lajur adalah getah, mewakili kumpulan khas, kerana ia boleh ditafsirkan dengan cara yang berbeza. Oleh itu, lebar satu lajur ditunjukkan dalam piksel, satu lagi sebagai peratusan lebar susun atur, dan lebar lajur yang tinggal dikira secara automatik. Dalam Rajah. Rajah 5.19 menunjukkan pendekatan yang berbeza untuk mengira lebar lajur menggunakan contoh susun atur No. 5.
nasi. 5.19. Lebar dua tiang getah
Dalam pilihan pertama, lebar lajur pertama ditetapkan sebagai peratusan lebar reka letak, lebar lajur kedua dikira secara automatik dan lajur ketiga mempunyai lebar tetap dalam piksel. Dalam pilihan kedua, lajur berubah antara mereka sendiri, dan lebar lajur pertama dikira secara automatik. Pilihan ketiga menganggap bahawa jumlah lebar tiang getah diambil sebagai 100% dan lebar lajur pertama dan kedua dikira daripadanya.
Pilihan pertama dan kedua boleh dilaksanakan dengan mudah sama dengan kod dengan dua lajur dalam piksel. Hanya bukannya lebar dalam px kami menunjukkan %. Contoh 5.18 menunjukkan gaya reka letak No. 5 dengan lajur pertama ditetapkan kepada peratusan.
Contoh 5.18. Nombor Susun atur 5. Lebar lajur kedua dikira
Pengepala ( latar belakang: #D5BAE4; ) .susun atur ( kedudukan: relatif; ) .susun atur DIV ( kedudukan: mutlak; ) .col1 ( latar belakang: #C7E3E4; lebar: 50%; ) .col2 ( latar belakang: #E0D2C7; kiri: 50 %; kanan: 200px; .col3 ( latar belakang: #ECD5DE; kanan: 0; lebar: 200px; )
Gaya reka letak #5 dengan lajur pertama yang dikira ditunjukkan dalam Contoh 5.19.
Contoh 5.19. Susun atur No. 5. Lebar lajur pertama dikira
Pengepala ( latar belakang: #D5BAE4; ) .susun atur ( kedudukan: relatif; ) .susun atur DIV ( kedudukan: mutlak; ) .col1 ( latar belakang: #C7E3E4; kiri: 0; kanan: 200px; jidar-kanan: 50%; ) . col2 ( latar belakang: #E0D2C7; lebar: 50%; kanan: 200px; ) .col3 ( latar belakang: #ECD5DE; lebar: 200px; kanan: 0; )
Lajur pertama tidak boleh ditetapkan ke kanan melalui sifat yang betul, kerana nilainya ialah 50%+200px; CSS2 tidak mempunyai nilai terkira sedemikian. Oleh itu, kami akan menggunakan fokus - kami akan mengehadkan lapisan pertama di sebelah kanan kepada lebar 200px ke kanan dan mengalihkannya ke kiri dengan lebar lajur kedua 50% menggunakan margin-kanan . Lapisan kami diposisikan secara mutlak, jadi manipulasi sedemikian tidak akan menjejaskan lebar dalam apa jua cara.
Pilihan ketiga dengan dua lajur getah memerlukan kehadiran lapisan tambahan, mari kita panggil ia getah, berbanding dengan lebar lajur akan ditetapkan (contoh 5.20).
Contoh 5.20. Susun atur #5: Peratusan lebar dua lajur
Tiga lajur .pengepala ( latar belakang: #D5BAE4; ) .susun atur (kedudukan: relatif; ) .susun atur DIV ( kedudukan: mutlak; ) .getah ( kiri: 0; kanan: 200px; ) .col1 ( latar belakang: #C7E3E4; lebar: 60%; .col2 ( latar belakang: #E0D2C7; lebar: 40%; kiri: 60%; ) .col3 ( latar belakang: #ECD5DE; lebar: 200px; kanan: 0; ) Pengepala tapak Lajur 1 Lajur 2 Lajur 3
Pembinaan susun atur No. 6 adalah serupa dengan susun atur No. 5, jadi kami tidak akan memikirkannya. Bagi susun atur No. 7, terdapat pilihan untuknya yang boleh menyebabkan kesukaran. Ini terpakai kepada kes apabila anda ingin membuat lebar lajur kiri dan kanan dikira dan sama antara satu sama lain. Untuk melakukan ini, lebar lajur pertama dan ketiga hendaklah dibuat sama dengan 50% (Rajah 5.20).
nasi. 5.20. Susun atur No. 7 dengan lajur yang sama lebar
Untuk meninggalkan ruang untuk lajur kedua, kami akan menggunakan sifat margin-kanan untuk lajur pertama dan margin-kiri untuk lajur ketiga. Nilai sifat ini ialah separuh lebar lajur kedua. Jadi, jika ia sama dengan 200px, maka hasilnya akan menjadi margin-right : 100px (contoh 5.21).
Contoh 5.21. Nombor Susun atur 7. Lebar tiang getah adalah sama
Pengepala ( latar belakang: #D5BAE4; ) .susun atur ( kedudukan: relatif; ) .susun atur DIV ( kedudukan: mutlak; ) .col1 ( latar belakang: #C7E3E4; kiri: 0; kanan: 50%; jidar-kanan: 100px; ) . col2 ( latar belakang: #E0D2C7; lebar: 200px; kiri: 50%; margin-kiri: -100px; ) .col3 ( latar belakang: #ECD5DE; kiri: 50%; kanan: 0; margin-kiri: 100px; )
Sifat lebar tidak boleh digunakan secara langsung, kerana menambah margin hanya akan meningkatkan lebar dan tidak mengurangkannya, seperti yang kita perlukan. Oleh itu, lebar dibentuk secara serentak oleh sifat kiri dan kanan yang ditentukan. Dengan kedudukan lajur kedua, terdapat kesukaran untuk menentukan nilai kiri atau kanan, kerana ia akan bersamaan dengan 50%-200px. Oleh itu, kami menetapkan kedudukan margin kiri kepada 50% ( kiri : 50%), dan kemudian gerakkan keseluruhan lajur ke kiri dengan separuh lebarnya menggunakan sifat margin-left (margin-left : -100px ).
Memandangkan lebar beberapa lajur dikira secara automatik, adalah disyorkan untuk mengehadkan lebar reka letak minimum dengan menambahkan sifat lebar min pada pemilih BODY. Kemudian lebar lajur tidak akan berkurangan apabila had yang ditentukan dicapai.
BODY ( min-lebar: 800px; /* Lebar reka letak minimum */ )
Nilai lebar min bergantung pada reka letak dan kandungan halaman dan biasanya ditentukan oleh pengalaman.
Menggunakan Elemen TerapungElemen terapung adalah satu lagi kaedah serba boleh untuk mencipta pelbagai susun atur tiga lajur. Tidak seperti kedudukan, ia membolehkan anda tidak perlu risau tentang masalah ruang bawah tanah, kerana ruang bawah tanah akan sentiasa terletak di tempatnya di bawah lajur tertinggi.
Lajur dibina menggunakan sifat apungan dalam kombinasi dengan sifat margin dan lebar. Bergantung pada reka letak yang dipilih, susunan lajur dalam kod juga berubah lapisan sentiasa didahulukan, yang mana terapung ditambahkan.
Susun atur No. 1. Lajur pertama getah
Lebar lajur kedua dan ketiga ditentukan dalam piksel, dan kedudukannya ditentukan melalui sifat apungan dengan nilai kanan . Untuk lajur pertama, anda juga perlu menetapkan sifat margin-kanan dengan nilai yang sama dengan jumlah lebar lajur yang tinggal (contoh 5.22).
Contoh 5.22. Susun atur No. 1
Layout 1 .header, .footer ( background: #D5BAE4; ) .layout ( overflow: hidden; /* Unwrap */ ) .col1 ( background: #C7E3E4; /* Background color */ margin-right: 300px; /* Shift kiri dengan lebar lajur 2 dan 3 */ .col2 ( latar belakang: #E0D2C7; lebar: 200px; apungan: kanan; /* Balut kiri */ ) .col3 ( latar belakang: #ECD5DE; lebar: 100px; apungan: kanan; /* Balut ke kiri */ ) Pengepala tapak Lajur 3 Lajur 2 Lajur 1 Pengaki
Susun atur No. 2. Lajur tengah getah
Lebar lajur pertama dan ketiga ditentukan dalam piksel, dan kedudukannya ditentukan melalui sifat apungan dengan nilai kiri untuk lajur pertama dan kanan untuk lajur ketiga. Lajur tengah, supaya ia mengekalkan penampilannya, mengandungi margin sifat universal , yang menentukan margin kiri dan kanan (contoh 5.23).
Contoh 5.23. Susun atur No. 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 2 .header, .footer ( background: #D5BAE4; ) .layout ( overflow: hidden; ) .col1 ( background: #C7E3E4; float: left; width: 200px; ) .col2 ( background: #E0D2C7; margin: 0 100px 0 200px; /* Pelapik kanan dan kiri */ .col3 ( latar belakang: #ECD5DE; lebar: 100px; apungan: kanan; ) Pengepala tapak Lajur 1 Lajur 3 Lajur 2 Pengaki
Susun atur No. 3. Lajur ketiga getah
Kedudukan lajur pertama dan kedua ditunjukkan melalui sifat apungan dengan nilai kiri , untuk lajur ketiga anda perlu menetapkan margin kiri (margin-kiri ) kepada jumlah lebar lajur yang tinggal (contoh 5.24).
Contoh 5.24. Susun atur No. 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 3 .header, .footer ( background: #D5BAE4; ) .layout ( overflow: hidden; ) .col1 ( background: #C7E3E4; float: left; width: 100px; ) .col2 ( background: #E0D2C7; float: left ; lebar: 200px; .col3 ( latar belakang: #ECD5DE; margin-left: 300px; /* Jidar kiri ke lebar lajur 1 dan 2 */ ) Pengepala tapak Lajur 1 Lajur 2 Lajur 3
Susun atur No. 4. Lebar semua lajur ditetapkan sebagai peratusan
Untuk membina reka letak ini, banyak pilihan sesuai, berdasarkan reka letak sebelumnya, tetapi bukannya piksel, anda harus menentukan peratusan. Kaedah lain ditunjukkan dalam Contoh 5.25, yang hanya menggunakan sifat apungan dan lebar.
Contoh 5.25. Susun atur No. 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 4 .header, .footer ( background: #D5BAE4; ) .layout ( overflow: hidden; ) .layout DIV ( float: left; ) .col1 ( background: #C7E3E4; width: 20%; ) .col2 ( background: #E0D2C7; lebar: 60%; ) .col3 ( latar belakang: #ECD5DE; lebar: 20%; ) Pengepala tapak Lajur 1 Lajur 2 Lajur 3 Pengaki
Susun atur No 5. Lebar dua tiang getahDalam Rajah. 5.19 telah ditunjukkan bahawa susun atur No. 5, yang mempunyai dua tiang getah, boleh ditafsirkan dengan cara yang berbeza.
Di sini, lebar lajur pertama ditentukan sebagai peratusan, dan kedudukannya ditentukan melalui sifat apungan dengan nilai kiri , untuk lajur ketiga lebarnya dinyatakan dalam piksel, dan nilai sifat apungan ditetapkan ke kanan . Untuk lajur tengah, yang tinggal hanyalah menetapkan margin kiri dan kanan kepada lebar lajur (contoh 5.26).
Contoh 5.26. Susun atur 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 5.1 .header, .footer ( background: #D5BAE4; ) .layout ( overflow: hidden; ) .col1 ( background: #C7E3E4; width: 40%; float: left; ) .col2 ( background: #E0D2C7; margin: 0 200px 0 40%; ) .col3 ( latar belakang: #ECD5DE; lebar: 200px; apungan: kanan; ) Pengepala tapak Lajur 1 Lajur 3 Lajur 2 Pengaki
Lebar lajur pertama dikira
Ini adalah reka letak yang paling rumit kerana lebar lajur pertama tidak ditentukan secara langsung. Tetapi untuk mengehadkan kandungan, anda perlu menentukan nilai yang menggabungkan peratusan dan piksel untuk sifat margin-kanan. Dalam CSS2, seperti yang telah disebutkan, ini tidak boleh ditetapkan, jadi mari tambah satu lagi lapisan di dalam lapisan col1 yang dipanggil bungkus dan tambahkan padding pada setiap lapisan ini. Satu dalam peratusan, satu lagi dalam piksel (contoh 5.27).
Contoh 5.27. Susun atur 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 5.2 .header, .footer ( background: #D5BAE4; ) .layout ( overflow: hidden; ) .col1 ( margin-right: 40%; ) .col1 .wrap ( margin-right: 200px; background: #C7E3E4; ) .col2 ( latar belakang: #E0D2C7; lebar: 40%; terapung: kanan; ) .col3 ( latar belakang: #ECD5DE; lebar: 200px; terapung: kanan; ) Pengepala tapak Lajur 3 Lajur 2 Lajur 1 Pengaki
Lebar dua lajur dalam peratusan
Dalam susun atur ini, jumlah lebar lajur getah diambil sebagai 100%, jadi kami memerlukan lapisan tambahan yang mana lebar lajur dalaman akan diukur. Lapisan ini, dinamakan getah, berfungsi dengan lapisan col3 sebagai reka letak dua lajur dan lapisan dalam col1 dan col2 dijajarkan secara mendatar menggunakan sifat apungan (Contoh 5.28).
Contoh 5.28. Susun atur 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 5.3 .header, .footer ( background: #D5BAE4; ) .layout ( overflow: hidden; ) .rubber ( margin-right: 200px; ) .col1 ( background: #C7E3E4; width: 60%; float: left; ) .col2 ( latar belakang: #E0D2C7; lebar: 40%; terapung: kiri; ) .col3 ( latar belakang: #ECD5DE; lebar: 200px; terapung: kanan; ) Pengepala tapak Lajur 3 Lajur 2 Lajur 1 Pengaki
Susun atur 6, 7 dan variasinya dibina berdasarkan prinsip yang sama seperti susun atur No. 5, dengan pengecualian susun atur No. 7, di mana lebar lajur kiri dan kanan adalah getah dan sama antara satu sama lain.
Pertama, kami menyediakan pangkalan dan menunjukkan susunan lapisan dalam kod HTML.
Lajur 1 Lajur 3 Lajur 2
Col1 ( width: 50%; float: left; ) .col2 ( width: 200px; float: left; ) .col3 ( width: 50%; float: right; )
Bukan itu sahaja, lapisan itu belum membentuk sebarang lajur dan dibina dengan cara yang tidak sesuai untuk kita. Anda perlu mengalihkan lajur kedua ke kiri dengan separuh lebarnya (margin-left : -100px ) dan memaksa lajur ketiga ke tempatnya. Untuk melakukan ini, anda perlu meningkatkan lebarnya supaya sama dengan atau lebih besar daripada 50%+100px (separuh daripada lajur kedua). Sebaik-baiknya gunakan sifat margin-left dengan nilai negatif, selepas itu lajur akan dibuat. Terdapat beberapa nuansa lain. Lajur luar bercantum antara satu sama lain, yang jelas kelihatan apabila ketinggiannya melebihi ketinggian lajur tengah (Rajah 5.21).
nasi. 5.21. Pembesar suara berlabuh
Di samping itu, dalam lajur kiri teks berada di sebelah kanan, dan dalam lajur kanan teks di sebelah kiri tersembunyi di bawah latar belakang lajur tengah. Ini tidak akan ketara jika ketinggian lajur ini besar, tetapi ini tidak selalu boleh dilakukan. Untuk mengatasi kelemahan ini, anda perlu meletakkan satu lagi lapisan di dalam lajur luar (dalam contoh ia dipanggil bungkus ) dan tetapkan warna latar belakang lajur untuknya, Ruangan wajib dan inden. Kod akhir diberikan dalam contoh 5.29.
Contoh 5.29. Susun atur No. 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 7 .header, .footer ( background: #D5BAE4; ) .layout ( overflow: hidden; ) .col1 ( width: 50%; float: left; ) .col1 .wrap ( background: #C7E3E4; margin-right: 100px ; /* Shift ke kiri sebanyak separuh lebar lajur 2 */ padding: 10px /* Margin di sekeliling teks */ .col2 ( latar belakang: #E0D2C7; lebar: 200px; float: left; margin-left: -100px; ) .col3 ( lebar: 50%; terapung: kanan; jidar-kiri: -100px; ) .col3 .balut ( latar belakang: #ECD5DE; jidar-kiri: 100px; /* Anjak ke kanan sebanyak separuh lebar lajur 2 */ pelapik : 10px; ) Tajuk tapak Lajur 1 Lajur 3 Lajur 2 Pengaki
Jidar dan sempadan dalam susun atur tiga lajurSifat padding sengaja tidak ditambahkan pada reka letak contoh yang diberikan, kerana kod tersebut hanya berfungsi sebagai asas reka letak, dan anda mesti memutuskan dalam kes tertentu sama ada anda memerlukan margin dalam lajur atau tidak. Menambah jidar dan sempadan pada elemen blok meningkatkan lebarnya, yang mesti diambil kira semasa reka letak. Walau bagaimanapun, lebar hanya berkembang jika lapisan ditetapkan kepada nilai lebar. Mari lihat beberapa contoh di mana lebar akan berubah dan di mana ia tidak.
Div ( /* padding mempengaruhi lebar */ width: 200px; padding: 10px; ) div ( /* padding tidak menjejaskan lebar */ position: absolute; left: 20px; right: 20px; padding: 10px; ) div ( / * padding mempengaruhi lebar */ float: left; padding: 10px;
Dalam lajur yang memerlukan pelapik atau sempadan, tetapi penambahannya akan membawa kepada "pecah" reka letak, anda boleh menggunakan lapisan bersarang dan menetapkan sifat yang diperlukan untuknya.
Kolum
Dalam contoh ini, lebar lapisan yang ditetapkan kepada 200 piksel tidak akan berubah, tetapi jidar dan jidar akan ditambah.
Jadual sebagai lajurMeja mudah digunakan untuk ringkas dan penciptaan cepat lajur yang sama tinggi. Kepantasan ini dicapai oleh beberapa perkara. Pertama, struktur kod untuk sebarang susun atur tetap sama; lajur dalam kod, seperti dalam kes apungan, tidak pernah mengubah susunannya. Kedua, lebar sel dikira secara automatik berdasarkan kandungannya, jadi nyatakan lebarnya pembesar suara yang diperlukan, dan yang selebihnya akan menyesuaikan dengan lebar keseluruhan jadual. Contoh 5.30 menunjukkan susun atur No. 1 yang dibuat di atas meja.
Contoh 5.30. Susun atur No. 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout 1 .header, .footer ( background: #D5BAE4; ) .layout ( width: 100%; /* Table width */ ) .layout TD ( padding: 5px; /* Cell margins */ vertical-align: top; / * Penjajaran atas */ .col1 ( latar belakang: #C7E3E4; ) .col2 ( latar belakang: #E0D2C7; lebar: 200px; ) .col3 ( latar belakang: #ECD5DE; lebar: 100px; ) Pengepala tapak
| Lajur 1 | Lajur 2 | Lajur 3 |
Penambahan sifat padding kepada pemilih TD mengatasi atribut cellpadding teg
 |
Dia berdiri di bawah pokok dan menunggu, Satu-dua, satu-dua! Rumput terbakar, pedang memotong, menjerit, Lewis Carroll, terjemahan oleh Dina Orlova, lukisan oleh John Tenniel |
 |
Hasil daripada contoh ditunjukkan dalam Rajah. 5.22.
nasi. 5.22. Lajur di tengah-tengah reka letak
Saya mengalu-alukan anda ke pelajaran seterusnya, yang akan dikhaskan hari ini bahasa CSS. Dan kami akan melaksanakan bersama anda susun atur getah tiga lajur untuk tapak tersebut. Pada masa hadapan, anda boleh menyalin bingkai ini dan mula membuat tapak web. Reka letak akan terdiri daripada blok seperti: pengepala tapak, bar sisi kiri, bar sisi kanan, kawasan kandungan dan pengaki. Tiada apa-apa yang rumit, templat yang ringkas dan agak ringkas. Nah, sudah tiba masanya untuk melaksanakannya. Sebagai permulaan, mari kita menulis struktur berikut kod html:
Kami telah melaksanakan struktur tersebut. Sudah tiba masanya untuk menggunakan gaya, terima kasih kerana kami melaksanakan reka letak tiga lajur.
Sekarang kita telah selesai menulis gaya, mari kita lihat sedikit.
Sebagai asas, kami mengambil blok di mana kami meletakkan semua blok lain, dan menetapkan untuknya lebar maksimum, penjajaran tengah, dan juga lebar yang sama dengan seratus peratus (ini tidak wajib, tetapi ia tidak akan berlebihan sama ada ).
Tajuk diletakkan dalam blok yang bertanggungjawab untuk pengepala tapak, dan blok itu sendiri ditetapkan untuk mempunyai warna latar belakang dan penjajaran teks berpusat. Selepas itu kami beralih ke bahagian yang paling penting, pembesar suara getah kami.
Untuk bar sisi kiri, kami menetapkan warna latar belakang dan ketinggian tetap supaya kami dapat menggambarkan rupa tapak tersebut pada masa hadapan. Kami menetapkan lebar kepada dua puluh peratus, dan juga menetapkan aliran elemen ke kiri.
Situasi dengan sidebar kanan adalah serupa, hanya kami yang menghantar unsur ini V sebelah kanan skrin, menetapkan aliran elemen di sebelah kanan. Selepas kaedah ini, kandungan secara automatik menjadi berpusat pada skrin antara dua bar sisi ini.
Tetapi untuk kandungan, kami juga menetapkan warna latar belakang, ketinggian, jidar kiri dan kanan, yang sama dengan 21 peratus, dan, dengan itu, lebar kepada 58 peratus. Anda mungkin tertanya-tanya mengapa 58 peratus. Berdasarkan lebar bersamaan dengan seratus peratus, kami menolak padding dari kiri dan sebelah kanan, yang bersamaan dengan 21 peratus, jumlah 100 - 21 - 21 = 58. Di situlah angka ini. Itu sahaja, blok getah sudah siap, yang tinggal hanyalah untuk melaksanakan footer.
Ia dilaksanakan mengikut prinsip pengepala tapak; kami juga membuat blok dengan tajuk di dalam, menetapkan latar belakang, warna teks dan penjajaran teks berpusat.
Melihat hasilnya, kita boleh mengatakan bahawa semuanya agak mudah, dan tapak akan dimampatkan ke had dan diregangkan ke lebar maksimum yang ditentukan oleh kami. Jika anda mahu, anda boleh menentukan lebar minimum yang tapak anda akan mengecut. Ditunjuk harta ini untuk blok dengan bekas id , kerana ia adalah induk kepada blok lain. Jadi anda dan saya telah mempertimbangkan kemungkinan untuk mencipta laman web getah tiga lajur, dengan ini saya akan mengucapkan selamat tinggal kepada anda. Semua yang terbaik untuk anda, berjaya!
Susun atur laman web getah. Reka bentuk web getah. Apa dan di mana kita akan meregangkan?Ciri, kelebihan dan kekurangan
Salah satu jenis susun atur laman web yang paling popular ialah susun atur getah. Ciri utama susun atur getah ialah keupayaan untuk menyesuaikan diri dengan resolusi skrin dan saiz tetingkap penyemak imbas yang berbeza.
Daripada semua jenis html Susun atur tapak web boleh dibahagikan kepada tiga yang utama - tetap, cair dan penyesuaian.
Ciri-ciri susun atur getah
Tidak seperti susun atur tetap, susun atur bendalir membenarkan perubahan dalam saiz tetingkap penyemak imbas dan direka bentuk untuk resolusi skrin yang berbeza. Hakikatnya ialah dengan moden perkembangan pesat teknologi dan kemunculan berterusan teknologi yang lebih dan lebih maju, masalah timbul dengan susun atur laman web. Reka letak tetap biasa tidak lagi bertindak balas kepada semua orang keperluan yang diperlukan dan secara beransur-ansur menjadi usang. Sekarang penggunaan kaedah lama adalah pengecualian dan bukannya peraturan, dan ini agak semula jadi.
Bayangkan contoh mudah sedemikian - seorang pengguna menaiki kereta bawah tanah, pulang dari kerja dan datang ke tapak anda dengan telefon bimbit, yang resolusi skrinnya ialah 320x480 piksel, kemudian dia pulang dengan komputer meja dan melihat tapak anda pada monitor pepenjuru 24″ dengan resolusi 1920x1200 piksel (dan ini jauh dari had). Persoalannya ialah bagaimana, menggunakan susun atur tetap, anda boleh mencapai hasil yang sama pada telefon pintar dan pada monitor besar (jika anda mengetepikan penskalaan automatik). Iaitu, dalam erti kata lain, ia adalah perlu bahawa ia tidak muncul di telefon menatal mendatar dan pada masa yang sama, pada monitor tapak itu tidak kelihatan seperti jalur sempit yang malang di tengah-tengah putih skrin kosong. Jawapannya adalah tidak.
Dan di sini susun atur getah datang untuk membantu kami, yang dengan mudah mengatasi tugas itu. Pada monitor yang besar, tidak menjadi dosa untuk meregangkan tapak merentasi keseluruhan skrin, atau mengehadkan diri anda kepada lebar templat tertentu, contohnya, 75% daripada lebar skrin. Terdapat yang hebat untuk tugas ini sifat CSS lebar maksimum Dan lebar min, yang akan membolehkan anda mengekalkan lebar tapak dalam had tertentu, yang merupakan penyelesaian yang paling betul dan estetik.
Kebaikan dan keburukan susun atur getahKelebihan utama susun atur bendalir adalah serba boleh apabila mengubah saiz tetingkap penyemak imbas dan pada monitor dengan resolusi skrin yang berbeza, perbezaannya boleh berbeza-beza. Laman web yang direka dengan baik akan kelihatan hebat pada monitor yang besar, mengambil ruang skrin yang mencukupi, tetapi perlu diingat bahawa seseorang tidak terlalu melihat beratur panjang teks dan mengira lebar tapak dengan bijak dan dalam had yang munasabah. Nah, hakikat bahawa laman web yang terlalu sempit akan kelihatan menyedihkan pada monitor besar bukanlah rahsia kepada sesiapa sahaja dan harus sentiasa dielakkan.
Tidak banyak kelemahan susun atur getah, justeru populariti dan di mana-mana. Kelemahan utama adalah bahawa ia adalah lebih sukar untuk membuat laman web yang fleksibel daripada yang tetap. Dalam kes imej atau latar belakang yang besar, anda perlu mencari tempat dalam gambar yang boleh diregangkan sambil mengekalkan kecukupan imej. Hampir semua dimensi dalam susun atur perlu ditunjukkan dalam peratusan, yang, tentu saja, perlu dikira dengan bijak. Dan jika imej asal terlalu kecil, maka apabila skala sebelah besar ia akan kehilangan banyak kualiti.
Sebaliknya, jika anda mengambil juga imej besar dengan rizab, maka ia akan menimbang terlalu banyak dan pengguna yang mengakses tapak daripada peranti mudah alih dengan Internet yang lemah akan memuat turun terlalu banyak bait tambahan.
Apabila meletakkan laman web getah, banyak masa dihabiskan untuk menyemak hasilnya pada resolusi skrin yang berbeza, dan lebih-lebih lagi, ini memerlukan monitor dengan pepenjuru yang agak baik, jika tidak, bagaimana untuk menyemaknya. Tetapi semua kelemahan ini tidak ada apa-apanya berbanding dengan kelebihan susun atur laman web getah. Reka letak HTML ialah seni sebenar, yang tidak semua pereka reka letak faham. Sebarang jenis reka letak hendaklah digunakan di tempat yang sesuai, dan bukan di mana-mana sahaja.
susun atur HTML
Contoh - getahMuka surat 1
Contoh-contoh getah dengan rintangan yang cukup tinggi terhadap lenturan berulang, yang mengandungi diphenylguanidine, diberikan dalam Jadual. 4.15. Pada setiap nilai modulus atau darjah pemautan silang, getah DPG mempamerkan rintangan lesu yang paling besar.
Menggunakan getah untuk dinding sisi tayar sebagai contoh, ditunjukkan bahawa kaedah DSC dan DTG, apabila mengurai sampel dalam persekitaran nitrogen, memberikan hasil terbaik apabila mengenal pasti komposisi getah NC, SBR, EPDM dan halobutil.
Apabila terurai dalam persekitaran oksigen, lengkung tidak begitu bermaklumat, tetapi konsisten dengan lengkung yang diperoleh dalam persekitaran nitrogen.
Mari kita pertimbangkan kesan-kesan ini menggunakan contoh getah berdasarkan getah penghabluran, di mana ia menunjukkan dirinya dengan paling jelas.
Dalam kerja K. A. Kerimov (1965), menggunakan contoh getah dan polivinil, ditunjukkan bahawa lengkung tegasan-tekanan dinamik, dekat dengan garis lurus, terletak di atas garis statik, dan di kawasan tegasan hampir sifar, ubah bentuk sisa. daripada beban dinamik boleh menjadi statik tiga kali lebih tinggi.
Pengaruh lembapan pada tindak balas kimia semasa keretakan ozon sepatutnya menunjukkan dirinya sama pada getah yang diperbuat daripada getah dengan struktur kimia yang serupa, tetapi ini tidak diperhatikan, seperti yang dapat dilihat dalam contoh getah dari NK dan SKI.
Reka letak laman web yang mudah suai, pelajaran satu. Susun atur halaman rumahKeputusan yang diperolehi oleh P. A. Rebinder dan V. V. Margaritov mengenai pengaruh sifat permukaan butiran pengisi pada kesan pengukuhannya adalah sangat penting. Menggunakan getah sebagai contoh, mereka menunjukkan bahawa pengisi dibahagikan kepada tiga kumpulan mengikut sifat molekul permukaan.
Terdapat keperluan yang berbeza untuk getah. Mari kita ambil, sebagai contoh, getah yang digunakan dalam peralatan penggerudian dan medan minyak.
Walau bagaimanapun, sifat berbeza dari daya intermolekul interaksi antara polimer dan pelarut boleh membawa kepada pembengkakan polimer yang sama sekali berbeza pada nilai parameter keterlarutan yang sama untuk media ini. Isu ini telah dikaji secara terperinci menggunakan contoh getah.
Kekotoran dan pengisi boleh membentuk sebahagian besar daripada jumlah berat, dan selalunya melebihi berat getah itu sendiri. Betapa pelbagai dan kompleksnya kekotoran yang ditambahkan pada getah mentah boleh dilihat dalam contoh getah untuk tayar kereta.
Untuk meningkatkan rintangan polimer terhadap bahan kimia media aktif pautan silang mesti tahan terhadap persekitaran ini. Yang paling tahan daripada yang digunakan pada masa ini ialah pautan silang jenis C-C, seperti yang ditunjukkan dalam contoh getah fluorin dan getah kloroprena (lihat Bab.
Satu ciri penting proses haus getah gelongsor bersama permukaan logam Dengan kelajuan tinggi, ialah suhu kritikal kemusnahannya oleh geseran. Apabila getah menggelongsor pada permukaan logam dalam keadaan suhu tinggi pendedahan (200 - 400 C), jenis utama pemusnahannya berikut mungkin: rupa rekahan pada permukaan geseran, pembentukan lapisan menyelubungi getah pada kedua-dua permukaan yang bersentuhan pasangan geseran dan berlakunya proses haus bencana. Menggunakan getah berasaskan getah nitril-butadiena dan etilena-propilena sebagai contoh, kami akan menganalisis sebab-sebab yang menyebabkan kemusnahan bahan-bahan ini.
Pengenalan pengisi meningkatkan kesan pelembutan getah. Kesimpulan bahawa kesan pelembutan lebih besar dengan kehadiran pengisi adalah jelas dan hanya dikaitkan dengan fakta bahawa perbandingan getah dilakukan pada ubah bentuk sebenar fasa getah yang berbeza. watak peribadi. Kesimpulan ini adalah berdasarkan bahan yang banyak dikumpul semasa kajian getah NC. Walau bagaimanapun, lebih analisis terperinci menggunakan contoh getah daripada getah lain menunjukkan sesuatu yang lain.
Halaman: 1
hidup masa ini cara membuat laman web sendiri bukanlah fantasi yang melampau dan tidak mewakili sesuatu yang rumit, seperti pada awal 2000-an.
Untuk mencipta keajaiban anda di Internet, anda boleh, tentu saja, menggunakan siap pakai dan enjin percuma untuk laman web dan program (pembina laman web) dengan bantuan yang, tanpa pengetahuan asas tentang html dan css, anda boleh membuat laman web dari awal dalam masa yang singkat secara profesional dari segi pengoptimuman dan SEO.
Atau anda boleh pergi dengan cara lain yang lebih betul: belajar perisian kod html Dan penggayaan elemen pada css. Ke arah ini, anda akan dapat membuat laman web dengan sebarang reka bentuk dan memberikan penampilan yang unik.
LATIHAN HTML DALAM TALIAN
Saya amat mengesyorkan agar anda meluangkan sedikit masa dan mulakan dengan mempelajari asas html dan css, kerana tanpa mengetahui perkara ini, anda tidak akan dapat membetulkan mana-mana serpihan itu sendiri, seperti yang anda mahu, apalagi menambah sesuatu yang baru pada ia dalam templat.
makmal sains komputer, peperiksaanDan terdapat banyak bahan pendidikan mengenai topik ini di Internet.
ELEMEN UNTUK LAMAN
Untuk membuat laman web anda perlu tahu cara membenamkan halaman html menu css, pautan, gambar dan video, dapat mengoptimumkan tapak dengan betul dan menetapkan tag meta dengan betul. Ia berguna untuk mengetahui di mana dan cara meletakkan tapak web di Internet dan nama apa yang perlu dibuat untuk portal baharu, cara membuat tapak web dengan bantuan pelbagai program dan alatan.
Mengapa ia diperlukan? reka bentuk penyesuaian? Saya akan mulakan dengan statistik. Anda boleh melihat data TNS untuk Mac 2013 pada slaid di bawah.
Seperti yang anda lihat, kira-kira satu pertiga daripada penonton datang daripada telefon pintar dan tablet. Dan ini dengan syarat peratusan hanya meningkat setiap bulan. Seperti yang anda faham, adalah lebih baik untuk menjaga hidung anda ke angin!)
Memandangkan CSS sahaja jelas tidak mencukupi untuk menyelesaikan masalah (bukan sahaja gaya perlu diubah, tetapi juga struktur dan kandungan blok), kami akan menggunakan jQuery. Selalunya, laman web terdiri daripada beberapa blok: yang utama dan bar sisi. Jika anda menyesuaikan tapak dengan peranti mudah alih, maka ini tidak lebih daripada 2 blok (kiri dan kanan).
Di bawah adalah contoh kod susun atur penyesuaian. Ia mengandungi asas-asas - anda boleh menambah yang lain mengikut budi bicara anda. Dan jangan lupa untuk menyambung perpustakaan jQuery! (lihat Bagaimana untuk memasukkan perpustakaan jQuery?)
Kod JS (jQuery)
$(document).ready(function() (
var w = $(window).width(); // Lebar tetingkap
var h = $(window).height(); // Ketinggian tetingkap. Kami tidak menggunakannya. Untuk rujukan
jika (w
