Selamat malam selamat datang di tutorial lain oleh tim hv, dalam tutorial todays il akan menunjukkan kepada Anda bagaimana untuk mengiris dan tata letak dadu gelap # 2 PSD ke template kerja. Benar mari kita mulai, hal pertama yang harus Anda lakukan adalah membuat folder baru di desktop yang disebut layout gelap, di dalam folder ini anda memerlukan tiga folder "gambar", "js" dan "gaya". Di dalam "gaya" folder menciptakan dua file CSS kosong "style.css" dan "ie.css", maka dalam folder utama membuat file HTML kosong "index.html". Step1 The "js" folder akan tetap kosong sampai kita datang ke slider jflow jquery menjelang akhir tutorial. Bagian selanjutnya kita perlu untuk mengatasi adalah citra kita irisan, potongan pertama akan Anda butuhkan untuk membuat adalah latar belakang kami. (semua gambar akan. png file pada latar belakang yang transparan). Step2 Anda dont perlu untuk mengiris bagian besar dari bit yang akan diulang, Anda dapat menggunakan sedikit sebagai irisan 1 piksel lebar. Simpan potongan pertama sebagai "bg.png". Irisan berikutnya adalah untuk logam kami melihat panel navigasi, lagi potongan doesnt harus besar karena akan terulang ketika kita kode css kita. Step3 Juga pada panel navigasi kami kita seperators kecil kami, Anda juga akan perlu untuk memotong salah satu dari ini ke gambar terpisah. Step4 Sembunyikan semua elemen header di lapisan pallette daripada membuat seleksi di seluruh pola header Anda, simpan file sebagai header_bg.png. Step5 Kami juga memiliki latar belakang pola di daerah fitur kami, menyembunyikan semua elemen ditampilkan Anda dan membuat pilihan di sekitar Anda menampilkan latar belakang, idealnya perlu pemilihan berakhir ketika pola disapears belut Anda akan mendapatkan garis yang tak terduga di latar belakang. Step6 If i menginginkan kotak konten yang akan dibulatkan di semua jenis browser id mengiris kotak-kotak konten kami, tapi kali ini im tidak akan mengganggu, bukannya pembulatan il akan mereka pergi dengan menggunakan CSS, satu-satunya masalah adalah beberapa browser yang tidak mendukung border - gaya jari-jari yet. Jadi orang yang menggunakan firefox, mozilla dan safari akan mendapatkan keuntungan dari sudut bulat tapi semua orang belut yang isnt menggunakan jenis browser mereka akan mendapatkan kotak persegi. Irisan berikutnya kita perlu membuat footer adalah untuk kita, kita perlu membuat dua iris, yang sebenarnya mengulangi footer dan latar belakang. Kita akan mulai dengan latar belakang yang perlu diulang. Step7 Kemudian kotak footer aktual kita. Step8 Thats semua latar belakang diurus irisan dari sekarang kita harus mulai mengiris beberapa elemen tambahan seperti tombol kirim pencarian kami, kami dan kami menampilkan ikon panah. Kita akan mulai dengan tombol submit pencarian kami. Step9 Tombol RSS kami. Step10 Kita juga perlu untuk memotong kedua kiri dan kanan tombol panah fitur kami slider. Step11 Sebenarnya kita menampilkan gambar untuk fitur kami slider. Mungkin ide yang baik untuk mencatat ukuran latar belakang Anda pilihan yang Anda buat di tambang latar belakang menampilkan sekitar 300px tinggi sehingga menampilkan gambar yang benar-benar Anda shouldnt melebihi 300px tinggi. Step12 Sekarang untuk ikon pribadi kita, mencoba dan terus seleksi seketat Anda bisa mendapatkannya, juga untuk membuat hidup lebih mudah memastikan ikon semua lebar yang sama yang berarti Anda mungkin perlu mengubah ukuran beberapa oleh traksi atau dua. Semua milikku adalah lebar 39px. Step13 Juga dalam kotak konten sidebar ouor Peralihan item daftar kita kita memiliki pembagi yang memisahkan setiap item, anda juga perlu untuk mengiris itu, dont iris semua Anda hanya perlu sepersekian sebagai itu akan berulang secara horizontal melalui css ketika kita kode itu. Step14 Sekarang anda seharusnya sudah memiliki 17 gambar dalam folder gambar Anda, berikut adalah screenshot dari folder gambar-gambar saya. Step15 Kita sekarang dapat menjalankan kode layout kita, buka file html Anda dan keduanya css file ke editor kode Anda il akan menggunakan Dreamweaver. Dalam kepala file html link Anda stylesheet Anda style.css, untuk file ie.css kita perlu menggunakan beberapa kode khusus yang terlihat seperti ini. 01. 02. 03. 04. 05. 06. 07. 08 . 09. 10. 11. 12. 13. 14. 15. 16. Kita sekarang dapat mulai untuk mulai mengejek hingga layout kita kita akan mulai dengan header, logo, pencarian dan navigasi. Step16 Kode tampak seperti ini. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. Css kita terlihat seperti ini, silahkan merujuk ke kode berkomentar di sebelah setiap gaya. 01. / * ---------- ---------- GAYA TUBUH UTAMA * / 02. 03 .* ( 04. margin: 0px; / * SETS 0 MARGIN * / 05. padding: 0px; / * SETS 0 PADDING * / 06.) 07. 08.body ( 09. color: # bababa; / * UTAMA WEBSITE TEKS WARNA * / 10. font-family: Verdana, Arial, Helvetica, sans-serif; / * SIZE OF TEXT 0.69EM = 11px * / 11. background-image: url (.. / images / bg.png); / * KAMI BACKGROUND IMAGE * / 12. background-repeat: repeat-x; / * mengulangi LATAR BELAKANG horizontal * / 13. background-color: # 000000; / * SETS WARNA LATAR BELAKANG KAMI KETIKA DATANG KE LATAR BELAKANG IMAGE AN END * / 14.) 15. 16. / * CONTAINER GAYA ---------- ---------- * / 17. 18. # Container ( 19. width: 950px; / * MAKSIMUM WIDTH KAMI LAYOUT * / 20. margin-top: 13px; / * ADDS A TOP MARGIN DENGAN TOP KAMI CONTAINER * / 21. margin-right: auto; / * AUTO MARGIN * / 22. margin-left: auto; / * AUTO MARGIN * / 23.) 24. 25. / * ---------- HEADER GAYA ---------- * / 26. 27. # Header ( 28. float: left; / * mengapung HEADER LEFT * / 29. height: 155px; / * ADDS A FIXED HEIGHT * / 30. width: 950px; / * ADDS A FIXED WIDTH, HARUS SAMA SEBAGAI CONTAINER * / 31. background-image: url (.. / images / header_bg.png); / * KAMI LATAR BELAKANG HEADER IMAGE * / 32. background-repeat: no-repeat; / * berhenti HEADER LATAR BELAKANG Mengulangi * / 33.) 34. 35. # Logo ( 36. float: left; / * mengapung LOGO KIRI * / 37. margin-top: 45px; / * ADDS TOP MARGIN * / 38.) 39. 40. / * ---------- HEADER CARI GAYA ---------- * / 41. 42. # Search ( 43. float: right; / * mengapung CARI KANAN * / 44. margin-top: 55px; / * ADDS TOP MARGIN * / 45.) 46. 47. / * NAVIGATION GAYA ---------- ---------- * / 48. 49. # Navigasi ( 50. float: left; / * mengapung NAB KIRI * / 51. height: 45px; / * ADDS TETAP TINGGI * / 52. width: 950px; / * ADDS TETAP SAMA SEPERTI KAMI LEBAR CONTAINER * / 53. background-image: url (.. / images / nav_bg.png); / * NAV LATAR BELAKANG KAMI IMAGE * / 54. background-repeat: repeat-x; / * NAVIGATION LATAR BELAKANG mengulangi horizontal * / 55.) Ketika diuji dalam browser Anda harus memiliki sesuatu yang seperti ini. Step17 Sekarang mari kita mulai menambahkan beberapa elemen untuk header kita. Kita akan mulai dengan website kami judul dan slogan. Di dalam div logo Anda menambahkan tag h1 sederhana dengan judul website Anda, karena pada file PSD kami salah satu dari kata-kata dalam huruf tebal kita perlu menambahkan tag span dengan berani untuk kelas kata yang kita inginkan dalam huruf tebal. Di bawah tag h1 kami ajukan p tag sederhana dengan kelas maka slogan slogan Peralihan. Kode tampak seperti ini. 1. 2. situs Anda 3. mewah slogan di sini 4. Sekarang kita bisa gaya tag ini menggunakan css kita. Tambahkan gaya ini ke stylesheet. 01.h1 ( 02. font-size: 36px; / * H1 FONT SIZE * / 03. color: # FFFFFF; / * H1 FONT WARNA * / 04. font-weight: normal; / * FONT WEIGHT SETS UNTUK NORMAL * / 05. letter-spacing:-3px; / * berkurang SURAT spacing (jarak antara setiap huruf) * / 06.) 07. 08 .. slogan ( 09. text-align: right; / * sejalan TEKS SLOGAN KANAN * / 10. text-transform: capitalize; / * memanfaatkan SURAT PERTAMA PADA SETIAP WORD * / 11.) 12. 13 .. berani ( 14. font-weight: bold; / * ADDS BOLD FONT WEIGHT * / 15.) Anda seharusnya sudah memiliki sebuah situs web Anda judul dan slogan manis disajikan pada template Anda. Step18 Mari kita mulai membangun formulir pencarian kami, silakan perhatikan pencarian harus benar-benar dapat tersambung untuk bekerja, im hanya menunjukkan sisi styling. Dalam div pencarian Anda ajukan formulir sederhana hanya dengan kolom teks dan tombol submit. Pada tombol submit Anda harus mengubah tipe input untuk "gambar" kemudian menambahkan atribut tambahan yang disebut "src" dengan url ke tombol. Begitu Anda selesai melakukannya menambahkan pencarian kelas-bidang tersebut pada kolom pencarian dan kelas dari "search-btn" ke tombol kirim, kode tampak seperti ini. 1. 2. 3. 4. 5. The css untuk kolom pencarian kami dan tombol tersebut. 01 .. cari-bidang ( 02. font-style: italic; / * SETS span UNTUK italic * / 03. color: # FFFFFF; / * CARI TEKS WARNA * / 04. border: 1px solid # 2a2a2a; / * ADDS 1 PX BORDER DISEBUTKAN DALAM WARNA * / 05. background-color: # 000000; / * LATAR BELAKANG PERUBAHAN WARNA DI CARI BIDANG * / 06. padding: 7px; / * ADDS PADDING * / 07. margin-right: 10px; / * ADDS MARGIN KANAN * / 08.) 09. 10 .. cari-btn ( 11. vertical-align: top; / * PERUBAHAN VERTIKAL ALIGNMENT SEARCH TOMBOL ON * / 12.) Anda seharusnya sudah memiliki sesuatu seperti ini. Step19 Sekarang untuk bar navigasi kami, kami akan mulai dengan daftar sederhana menciptakan setiap item dalam daftar blok elemen. Masing-masing item daftar juga akan memiliki Seperator kecil kami foto setelah setiap link. 01. 02. 03. rumah 04. blog 05. bekerja 06. forum 07. layanan 08. kontak 09. 10. Here's the css untuk navigasi kami. 01 .. nav-links li ( 02. list-style-type: none; / * Menghapus BULLET POINTS DARI DAFTAR * / 03. float: left; / * mengapung LEFT * / 04. text-align: center; / * sejalan TEKS PUSAT * / 05. letter-spacing:-1px; / * SURAT DECRESES Spasi * / 06. background-image: url (.. / images / seperator.png); / * SEPERATOR IMAGE * / 07. background-repeat: no-repeat; / * berhenti SEPERATOR Mengulangi * / 08. background-position: right; / * menyejajarkan SEPERATOR NAVIGASI HAK SETIAP LINK * / 09.) 10. 11 .. nav-links li a ( 12. text-decoration: none; / * Menghapus menggarisbawahi DARI LINK ITEM * / 13. color: # 000000; / * WARNA DARI KAMI NAVIGATION LINKS * / 14. text-transform: uppercase; / * mengubah NAVIGASI LINK KE SEMUA HURUF * / 15. font-size: 12px; / * ADDS FONT SIZE * / 16. display: block; / * DISPLAY THE LINK SEBAGAI NAB BLOK ELEMENT * / 17. height: 29px; / * ADDS A TETAP TINGGI UNTUK NAB LINKS * / 18. width: 100px; / * ADDS A WIDTH UNTUK TETAP NAB LINKS * / 19. padding-top: 15px; / * ADDS PADDING UNTUK SETIAP TOP LINK * / 20.) 21. 22 .. nav-links li a: hover ( 23. color: # 666666; / * COLOR OF LINK KAPAN melayang * / 24.) Juga pada navigasi kami dalam file PSD kami agak icon rss di sebelah kanan navigasi, kita dapat menciptakan yang sama kami melakukan navigasi kami di atas. 1. 2. 3. 4. Yang css rss icon kita juga mirip. 01 .. rss li ( 02. list-style-type: none; / * Menghapus BULLET POINTS DARI DAFTAR * / 03. float: right; / * mengapung RSS LINK KANAN * / 04. margin-right: 10px; / * ADDS MARGIN KANAN * / 05. margin-top: 5px; / * ADDS TOP MARGIN * / 06.) 07. 08 .. rss li img ( 09. border: none; / * Menghapus BORDER DARI IMAGE * / 10.) Anda seharusnya sudah memiliki sesuatu seperti ini. Step20 Thats the header bagian dari website kami lakukan, mari kita pindah ke daerah fitur. Kami akan mengejek daerah fitur seperti ini. Step21 Kode tampak seperti ini. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. The css untuk kode di atas terlihat seperti ini. 01. # Fitur-area ( 02. background-repeat: no-repeat; / * berhenti LATAR BELAKANG Mengulangi * / 03. background-image: url (.. / images / content_bg.png); / * ADDS KAMI KONTEN LATAR BELAKANG IMAGE * / 04. float: left; / * ADDS A FIXED HEIGHT * / 05. width: 950px; / * ADDS A FIXED WIDTH * / 06. margin-bottom: 20px; / * ADDS BOTTOM MARGIN * / 07.) 08. 09 .. fitur-kontrol-kiri ( 10. float: left; / * mengapung LEFT * / 11. height: 170px; / * ADDS A FIXED HEIGHT * / 12. width: 33px; / * ADDS A FIXED WIDTH * / 13. padding-top: 130px; / * ADDS TOP PADDING * / 14.) 15. 16 .. fitur-text ( 17. float: right; / * floats KANAN * / 18. width: 425px; / * ADDS A FIXED WIDTH * / 19. height: 260px; / * ADDS A FIXED HEIGHT * / 20. padding-top: 40px; / * ADDS TOP PADDING * / 21. padding-right: 20px; / * ADDS KANAN PADDING * / 22.) 23. 24 .. fitur-content ( 25. float: left; / * mengapung LEFT * / 26. height: 300px; / * ADDS A FIXED HEIGHT * / 27. width: 884px; / * ADDS A FIXED WIDTH * / 28.) 29. 30 .. fitur-kontrol-kanan ( 31. float: right; / * floats KANAN * / 32. height: 170px; / * ADDS A FIXED HEIGHT * / 33. width: 33px; / * ADDS A FIXED WIDTH * / 34. padding-top: 130px; / * ADDS PADDING TOP * / 35.) Anda seharusnya sudah memiliki dasar yang solid untuk daerah fitur Anda, mari kita masukkan beberapa elemen grafis. Dalam div yang menampilkan kontrol-kanan dan fitur-kontrol-kiri memasukkan ikon panah Anda. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. Bawah kelas "fitur-konten" memasukkan gambar fitur Anda. Insde kelas "menampilkan teks" ajukan h2 tag dengan sebuah header kemudian tambahkan sebuah paragraf terbungkus ap tag. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. Lorem ipsum dolor 14. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, di pretium dolor. Nullam egestas lacus ante. Integer elementum cursus nunc di convallis. Praesent condimentum justo vel nunc vitae vehicula vestibulum dignissim purus. Integer elementum cursus nunc di convallis. Praesent condimentum justo vel nunc vestibulum vehicula vitae purus dignissim. 15. 16. 17. 18. 19. 20. 21. 22. 23. Anda sekarang perlu untuk menambahkan beberapa gaya dalam addtional style sheet, karena kami telah menambahkan gambar ke area fitur yang kita butuhkan untuk memastikan bahwa tidak ada browser menambahkan perbatasan untuk itu, kita juga perlu gaya tag h2 kami. 01.h2 ( 02. color: # FFFFFF; / * H2 FONT WARNA * / 03. text-transform: uppercase; / * mengubah TEKS UNTUK Huruf Besar * / 04. font-size: 18px; / * H2 FONT SIZE * / 05.) 06. 07 .. fitur-content img ( 08. margin-left: 20px; / * ADDS A KIRI MARGIN * / 09. margin-right: 20px; / * ADDS A MARGIN KANAN * / 10. float: left; / * mengapung LEFT * / 11.) Daerah fitur Anda sekarang harus terlihat seperti ini. Step22 Kami akan menambahkan jquery kami slider menjelang akhir tutorial. Gambar rangka untuk kotak konten kami sangat mudah, kita hanya membuat dua kelas "kiri konten" dan "benar-konten". 1. 2. 3. 4. 5. Gaya untuk kelas-kelas ini adalah sebagai berikut. 01. / * ---------- ---------- KIRI GAYA KONTEN * / 02. 03 .. kiri-content ( 04. float: left; / * BOX KONTEN mengapung KIRI KIRI * / 05. width: 560px; / * ADDS A FIXED WIDTH * / 06. -moz-border-radius: 15px; / * ADDS A BORDER RADIUS (applys ke Mozilla / Firefox dan Safari 3 pengguna ONLY) * / 07. -WebKit-border-radius: 15px; / * ADDS A BORDER RADIUS (applys ke Mozilla / Firefox dan Safari 3 pengguna ONLY) * / 08. background-color: # 0a0a0a; / * LEFT KONTEN LATAR BELAKANG WARNA * / 09. border: 1px solid # 181818; / * KIRI DAFTAR ISI 1 PX BORDER PERBATASAN DAN WARNA * / 10. padding: 20px; / * ADDS PADDING SEMUA THE WAY AROUND * / 11.) 12. 13. / * ---------- ---------- GAYA KONTEN KANAN * / 14. 15 .. benar-content ( 16. float: right; / * BOX mengapung KONTEN KANAN KANAN * / 17. width: 290px; / * ADDS TETAP WIDTH * / 18. -moz-border-radius: 15px; / * ADDS A BORDER RADIUS (applys ke Mozilla / Firefox dan Safari 3 pengguna ONLY) * / 19. -WebKit-border-radius: 15px; / * ADDS A BORDER RADIUS (applys ke Mozilla / Firefox dan Safari 3 pengguna ONLY) * / 20. background-color: # 0a0a0a; / * RIGHT KONTEN LATAR BELAKANG WARNA * / 21. border: 1px solid # 181818; / * RIGHT DAFTAR ISI 1 PX BORDER PERBATASAN DAN WARNA * / 22. padding: 20px; / * ADDS PADDING SEMUA THE WAY AROUND * / 23.) Termasuk dalam gaya di atas adalah style css border-radius yang membuat sudut pada kotak konten Anda bulat, seperti yang dinyatakan dalam komentar hanya applys ke Mozilla / Firefox dan Safari 3 pengguna HANYA setiap browser lain akan melihat sudut-sudut persegi. Di kiri konten kami kotak itu hanya akan menambahkan beberapa paragraf sederhana dengan tag h2. 1. 2. 3. Lorem ipsum dolor 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, di pretium dolor. Nullam egestas lacus ante. Integer elementum cursus nunc di convallis. Praesent condimentum justo vel nunc vitae vehicula vestibulum dignissim purus. Integer elementum cursus nunc di convallis. Praesent condimentum justo vel nunc vestibulum vehicula vitae purus dignissim. 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, di pretium dolor. Nullam egestas lacus ante. Integer elementum cursus nunc di convallis. Praesent condimentum justo vel nunc vitae vehicula vestibulum dignissim purus. Integer elementum cursus nunc di convallis. Praesent condimentum justo vel nunc vestibulum vehicula vitae purus dignissim. 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, di pretium dolor. Nullam egestas lacus ante. Integer elementum cursus nunc di convallis. Praesent condimentum justo vel nunc vitae vehicula vestibulum dignissim purus. Integer elementum cursus nunc di convallis. Praesent condimentum justo vel nunc vestibulum vehicula vitae purus dignissim. 7. 8. Tag h2 kita sudah bergaya di style sheet tapi tag p kita tidak begitu menambah gaya sederhana ini di style sheet. 1.p ( 2. font-size: 12px; / * TEKS FONT SIZE * / 3. line-height: 22px; / * TEXT LINE HEIGHT * / 4. text-align: justify; / * JUSTIFYS KAMI paragraf * / 5. margin: 5px 0 10px; / * ADDS TOP MARGIN OF 5px DAN BOTTOM MARGIN OF 10px KIRI ATAU TIDAK MARGIN KANAN * / 6. padding: 0; / * ADDS NO PADDING * / 7.) Kotak konten sebelah kanan kami terlihat sulit untuk benar-benar itu isnt, kanan kita isi kotak kita hanya membuat daftar sederhana, masing-masing item daftar akan mempunyai kelas sendiri, kode tampak seperti ini. 01. 02. 03. 04. 05. 06. Lorem ipsum dolor 07. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, di pretium dolor. Nullam egestas lacus ante. 08. 09. 10. 11. Lorem ipsum dolor 12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, di pretium dolor. Nullam egestas lacus ante. 13. 14. 15. 16. Lorem ipsum dolor 17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, di pretium dolor. Nullam egestas lacus ante. 18. 19. 20. 21. Lorem ipsum dolor 22. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, di pretium dolor. Nullam egestas lacus ante. 23. 24. 25. 26. 27. Kami kemudian gaya daftar keluar seperti biasa tapi dengan beberapa tambahan gaya untuk daftar kami kelas. 01 .. benar-isi-list li ( 02. list-style-type: none; / * Menghapus BULLET POINTS DARI DAFTAR * / 03.) 04. 05 .. benar-isi-list li p ( 06. font-size: 11px; / * DAFTAR P TAG FONT SIZE * / 07. line-height: 18px; / * DAFTAR P P TAG LINE HEIGHT * / 08. background-image: url (.. / images / divider.png); / * IMAGE DIVIDER KAMI Di bawah setiap DAFTAR * / 09. background-repeat: repeat-x; / * mengulangi DIVIDER lebar gambar * / 10. background-position: bottom; / * TEMPAT YANG DI DIVIDER BOTTOM OF THE P TAG * / 11. padding-bottom: 15px; / * ADDS PADDING DENGAN BOTTOM OF THE P TAG DALAM DAFTAR * / 12.) 13. 14.li.lock ( 15. background-image: url (.. / images / lock_icon.png); / * KAMI LOCK ICON * / 16. background-repeat: no-repeat; / * berhenti ICON Mengulangi * / 17. background-position: left top; / * menyimpan ICON DI TOP LEFT CORNER * / 18. padding-left: 50px; / * ADDS KIRI PADDING * / 19.) 20. 21.li.cog ( 22. background-image: url (.. / images / cog_icon.png); / * KAMI COG ICON * / 23. background-repeat: no-repeat; / * berhenti ICON Mengulangi * / 24. background-position: left top; / * menyimpan ICON DI TOP LEFT CORNER * / 25. padding-left: 50px; / * ADDS KIRI PADDING * / 26.) 27. 28.li.coins ( 29. background-image: url (.. / images / coins_icon.png); / * KAMI COINS ICON * / 30. background-repeat: no-repeat; / * berhenti ICON Mengulangi * / 31. background-position: left top; / * menyimpan ICON DI TOP LEFT CORNER * / 32. padding-left: 50px; / * ADDS KIRI PADDING * / 33.) 34. 35.li.mail ( 36. background-image: url (.. / images / mail_icon.png); / * ICON MAIL KAMI * / 37. background-repeat: no-repeat; / * berhenti ICON Mengulangi * / 38. background-position: left top; / * menyimpan ICON DI TOP LEFT CORNER * / 39. padding-left: 50px; / * ADDS KIRI PADDING * / 40.) Test template Anda di browser Anda dan Anda harus memiliki sesuatu yang seperti ini. Step23 Sekarang kaki kami, kami ingin footer untuk span melintasi browser seperti latar belakang kami / navigasi ini, untuk melakukan hal ini kita perlu menciptakan footer kita di luar wadah div. 01. 02. 03. 04. 05. 06. Copyright © yoursite.com | all rights reserved | desain & dikodekan oleh richard tukang kayu 07. 08. 09. 10. 11. 12. Div footer adalah latar belakang yang akan mengulangi di browser, footer-div konten akan berada di tempat konten footer kita pergi. The css terlihat seperti ini. 01. / * Footer GAYA ---------- ---------- * / 02. 03. # Footer ( 04. background-image: url (.. / images / footer_bg.png); / * ADDS KAMI LATAR BELAKANG IMAGE * / 05. background-repeat: repeat-x; / * mengulangi LATAR BELAKANG horizontal * / 06. clear: both; / * membersihkan KEDUA mengapung * / 07. height: 82px; / * ADDS A FIXED HEIGHT * / 08. background-position: bottom; / * Lokasi LATAR BELAKANG PADA BOTTOM OF THE DIV * / 09.) 10. 11. # Footer-content ( 12. background-image: url (../images/footer_bg2.png); / * ADDS KAMI LATAR BELAKANG IMAGE * / 13. background-repeat: repeat-x; / * mengulangi LATAR BELAKANG horizontal * / 14. height: 82px; / * ADDS A FIXED HEIGHT * / 15. width: 950px; / * ADDS A TETAP WIDTTH * / 16. margin: auto; / * AUTO MARGIN PUSAT KAMI Footer * / 17. background-position: bottom; / * Lokasi LATAR BELAKANG PADA BOTTOM OF THE DIV * / 18.) 19. 20. # Footer-content p ( 21. text-transform: capitalize; / * mengubah SURAT PERTAMA DI SETIAP WORD TO A MODAL SURAT * / 22. color: # 000000; / * COLOR OF Footer TEKS * / 23. padding-top: 50px; / * ADDS TOP PADDING * / 24. padding-left: 20px; / * ADDS KIRI PADDING * / 25.) Template Anda sekarang harus lengkap, hanya ada beberapa gaya id merekomendasikan penambahan untuk Anda mulai. Kita perlu gaya hiper kita link, h3 dan h4 tag hanya membungkus Anda menggunakannya. 01.a: link ( 02. color: # 333333; / * COLOR OF A LINK * / 03. text-decoration: none; / * menghilangkan garis bawah * / 04.) 05.a: visited ( 06. text-decoration: none; / * menghilangkan garis bawah * / 07. color: # 333333; / * COLOR OF A KUNJUNGI LINK * / 08.) 09.a: hover ( 10. text-decoration: underline; / * ADDS garis bawah * / 11. color: # 666666; / * COLOR OF A melayang LINK * / 12.) 13.a: active ( 14. text-decoration: none; / * menghilangkan garis bawah * / 15. color: # 333333; / * COLOR OF A ACTIVE LINK * / 16.) 17. 18.h3 ( 19. color: # FFFFFF; / * H3 FONT WARNA * / 20. text-transform: uppercase; / * mengubah TEKS UNTUK Huruf Besar * / 21. font-size: 14px; / * H3 FONT SIZE * / 22. font-weight: normal; / * Menghapus BOLD * / 23.) 24. 25.h4 ( 26. color: # FFFFFF; / * H4 FONT WARNA * / 27. text-transform: uppercase; / * mengubah TEKS UNTUK Huruf Besar * / 28. font-size: 11px; / * H4 FONT SIZE * / 29.) Ada juga beberapa gaya Anda perlu menambahkan ke "ie.css" file, gaya yang tercantum di bawah ini hanya minor fixes untuk item yang cukup dont lineup. 01. / * INTERNET EXPLORER Hacks * / 02. 03. / * ---------- HEADER CARI GAYA ---------- * / 04. 05 .. cari-btn ( 06. margin-top: 1px; / * ADDS A TOP MARGIN UNTUK CARI BUTTON * / 07.) 08. 09. / * Footer GAYA ---------- ---------- * / 10. 11. # Footer-content p ( 12. padding-top: 45px; / * ADDS TOP PADDING * / 13.) Apakah sekarang akan intergrate yang jflow jquery plugin untuk daerah fitur kami. Yang pernah dilakukan harus menampilkan slide menyeberang ke item lain yang ingin Anda tambahkan di sana. Yang pertama perlu kita lakukan adalah mendownload jflow dan file library jquery, mohon diperhatikan im menggunakan perpustakaan jquery TIDAK 1.2.6 yang baru sebagai i mengalami kesulitan dengan perpustakaan terbaru. Link file di kepala dokumen Anda. 01. 02. 03. 04. 05 . 06. 07. 08. 09.