Meskipun IE6 telah diabaikan kecuali untuk beberapa persyaratan yang menuntut, IE8, browser IE8, yang datang dengan Win7, masih perlu didukung.
Keuntungan utama dari metode ini adalah bahwa saya secara pribadi berpikir bahwa itu adalah lebih sedikit persiapan dan tidak perlu mencari sejumlah besar gambar untuk membuat materi online. Anda hanya perlu menyiapkan bootstrap, jQuery, dan Photoshop. Cara Mengkonfigurasi Bootstrap dan JQuery, Anda dapat merujuk ke "Bootstrap untuk menulis kotak dialog yang dapat ditutup pada halaman web saat ini yang dapat ditutup" (klik untuk membuka tautan)
Ketika diminta untuk menulis situs web, Anda akan sering bermasalah dengan cara tata letaknya. Bahkan, itu tidak sulit. Jika Anda dapat menggunakan bootstrap dengan mahir dan memiliki metode tertentu, Anda masih dapat dengan cepat dan mudah menangani pekerjaan rumah Anda untuk menangani kebutuhan biasa.
Meskipun templat halaman dicari lama di Internet, kuncinya adalah untuk dapat memahami proses pembuatan templat halaman ini.
Setelah mengunduh templat ini tidak kompatibel dengan browser dan tidak akan dimodifikasi, itu akan menjadi masalah besar.
1. Tujuan Dasar
Gunakan bootstrapv3 untuk membuat halaman berikut:
Halaman beranda ditampilkan di atas. Pertama, tergantung di header adalah navigasi situs web ini, yang tertinggal, menengah, kanan, dan dropdown menu. Esensi di sini adalah grup tombol, dan komponen bilah navigasi yang disediakan oleh Bootstrap tidak dapat digunakan, karena komponen bilah navigasi ini tidak kompatibel dengan IE8. Untuk detailnya, lihat artikel "Cara Memecahkan Cacat Bar Navigasi Bootstrap Navbar di IE8" (klik untuk membuka tautan)
Setelah itu, di bawah layar raksasa, ada tiga kolom dan dua tombol yang sesuai. Di sini Anda dapat menempatkan bagian terpenting dari situs web, dan akhirnya, seperti biasa, informasi hak cipta.
Halaman dalam terlihat seperti ini:
Ini juga merupakan bilah navigasi teratas, diikuti oleh judul dan konten halaman dalam ini. Judul halaman dalam pada dasarnya adalah layar raksasa, tetapi hanya lebih kecil dari ukuran halaman beranda.
Berikutnya adalah informasi hak cipta.
2. Proses Produksi
1. Pertama buka Photoshop dan buat gambar 1024x1 baru. Lebar selebar mungkin. Cobalah untuk menjadi selebar mungkin. Gambarnya adalah 1. Warna latar depan berwarna hijau gelap R: 0 G: 140 B: 0, Warna latar belakang hijau muda R: 100 G: 200 B: 100. Gunakan alat gradien untuk mengeluarkan gambar berikut. Tidak peduli bagaimana Anda menariknya, Anda dapat menariknya ke kiri dan kanan, dan ke tengah dan kedua sisi, tergantung pada preferensi pribadi Anda:
Ini adalah satu -satunya gambar yang perlu kita persiapkan. Anda dapat menutup Photoshop, membuangnya, dan menyimpan gambar ini di folder proyek situs web. Gambar ini hanya sekitar 6k dan tidak mempengaruhi pemuatan sama sekali.
2. Halaman Beranda
Kode spesifiknya adalah sebagai berikut, dan kemudian kode dijelaskan satu per satu:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt titled document </title> <meta name = "viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src = "js/bootstrap.js"> </script> <style type = "text/css"> h1, h2, h3, h4, h5 {font-family: "microsoft yahei ui", "Microsoft yahei", "helvetica neue", helvetica, arial, "hirago" gboG ", helvetica neue", Helvetica, Arial, "Arial," Helvetica ", Helvetica, Arial," Arial, "Helvetica", Helvetica, "Wenquanyi Micro Hei", sans-serif; } </style> </head> <body> <div style="position: abstracted; top: 0; left: 0; width: 100%;"> <div> <div> <button type="button"> Left </button> </div> <div> <button type="button"> Middle </button> </div> <div> <button type="button"> Right </button> </div> <div> <button type="button" Data-koggle = "dropdown"> dropdown <span> </span> </button> <ul role = "menu"> <li> <a href = "#"> tautan dropdown </a> </li> <li> <a href = "#"> tautan dropdown </a> </li> </ul> </Div> </Div>: Divage: Divage = "Divage> </li> </li> </div> </Div>: Divage: Divage =" Divage = </li> </li> </Div> </Div> </Div. " URL (gambar /bg.jpg); <BR /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <bR /> <bR /> <br /> <br /> <br /> <br /> <bR /<br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <bR /> <bR /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <bR /> <bR /> <br /> <br /> <bR /<br /> <br /> <br /<br /br /br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br <BR /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <bR /> <bR /> <br /> <br /> <br /> <br /> <bR /<br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <bR /> <bR /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <bR /> <bR /> <br /> <br /> <bR /<br /> <br /> <br /<br /br /br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br <r /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <bR /> <br /> <bR /> <br /> <br /> <br /> <br /> <br /<br /> <br /> <br /> <br /> <bR /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href = "#" role = "Tombol"> tombol </a> <a href = "#" role = "Tombol"> Tombol </a> </p> </div> </div> </div> </div> <div> <div> <hef> <hef = "<" </ "<p> <p> ... </p> <p> <hef =" "Role =" </h3> <p> ... </p> <p> <p> <href = "<" Role = "Tombol"> Tombol </a> </p> </div> </div> </div> <div> <div style = "text-lign: center"> Informasi hak cipta </div> </div> </div> </body> </html>(1) Bagian <head>
<Head> <!-Pengkodean Situs Web, Judul, Layar Adaptif, dll.-> <meta http-equiv = "tipe konten" content = "text/html; charset = utf-8"/> <itement> unt judul dokumen </iteme> name name = "viewport" content = "width = device-widdh, awal skala = 1.0, scale, name = noingport" content = "width = device-widdh, awal skala = 1.0, scaler- skala pengguna = no-use" no! used--> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <!--This is the only css style that we need to define ourselves to solve the bug in the win7 system that Microsoft's black font cannot be displayed normally, but the Song font is displayed--> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino sans GB", "Hiragino sans gb w3", "Wenquanyi Micro Hei", Sans-Serif; } </tyle> </head>(2) Bilah navigasi
Karena bilah navigasi yang disediakan oleh Bootstrap tidak berlaku, kami harus menggunakan grup tombol yang disediakan oleh Bootstrap untuk menulis bilah navigasi sendiri
<!-Pertama-tama, bilah navigasi harus digantung di kepala halaman web-> <div style = "Posisi: Abstrak; atas: 0; kiri: 0; Lebar: 100%;"> <!-Tentukan grup tombol-> <div> <Div> <!-Menulis hyperlink untuk satu tombol di bilah navigasi, itu adalah tombol tanpa tarik-turun, kebutuhan tarik-turun. Ini untuk menggunakan tag A dan kemudian menambahkan gaya kelas, daripada tag tombol yang disediakan oleh situs web resmi-> <a href = "#"> kiri </a> </div> <ve> <a href = "#"> tengah </a> </div> <von "<v> <a href ="#"> kanan </a> </div> </div> <Div> <a href ="#"kanan </a> </div> </Div> <Div> <a href ="#"kanan </a> </div> </div> <Div> <a href ="#"kanan </a> </div> <! Data-koggle = "dropdown"> dropdown <span> </span> </button> <role = "menu"> <li> <a href = "#"> tautan dropdown </a> </li> <li> <a href = "#"> tautan dropdown </a> </li> </ul> </Div> </Div>
Ubah Sukses BTN di Atribut Kelas ke BTN-Primary, BTN-Danger, dll. Dapat mengubah warna tombol ini!
(3) Bagian layar raksasa
Layar raksasa ditulis sebagai berikut. Kuncinya adalah memperkenalkan latar belakang yang baru saja kita gosok di Photoshop.
Alasan mengapa saya harus menambahkan begitu banyak di sini <br> Enter adalah karena saya ingin meningkatkan ukuran layar raksasa ini
<Div style = "latar belakang-gambar: url (gambar /bg.jpg); latar belakang-repeat: ulangi; text-align: center"> <br /> <br /> <bR /> <bR /> <bR /> <br /> <bR /<br /> <bR /<br /<br /<br /Br /br /<br /> <br <BR /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <bR /> <bR /> <br /> <br /> <br /> <br /> <bR /<br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div>
(4) Bagian kolom
Di sini, organisasi grid Bootstrap digunakan untuk mengetik tiga kolom
Untuk detailnya, Anda dapat merujuk ke artikel "Bootstrap" yang secara otomatis beradaptasi dengan sistem PC, tablet, dan ponsel bootstrap ponsel. Bagilah 12 kisi -kisi dari seluruh halaman web menjadi 3 buah, dan masing -masing 4 grid tepat. Setiap kolom adalah panel tanpa kepala panel, dengan judul H3 besar di dalamnya, dan kemudian teks paragraf P, dan dua tombol.
Perlu dicatat bahwa hal -hal ini harus ditempatkan dalam wadah, jika tidak, ketiga hal ini akan mengisi seluruh halaman:
<dv> <div> <div> <div> <div> <h3> column1 </h3> <p> ... </p> <p> <a href = "#" role = "Tombol"> </a> <a href = "#" role = "Tombol </a> </p> </div> </Div> </Div> </Div> </v> Div> </a> </Div> </Div> </Div> </Div> Div> </Div> </Div> </Div> </Div> </Div> </Div> </p> <p> <a href = "#" role = "Tombol"> Tombol </a> <a href = "#" role = "Tombol"> Tombol </a> </p> </div> </div> </div> <v> </p role> <Div> <h3> COLUMN2 </h3> <p> <p> </p role> <v> <h3> COLUMN2 </h3> <p> <p> </p role> <piv> <h3> COLUMN2 </H3> <p> <p> </p> <piv> <v> <h3> COLUMN2 </H3> <p> <p> <p> " <a href = "#" role = "Tombol"> Tombol </a> </p> </div> </div> </div> </div> </div> </div> </div>
(5) Bagian Informasi Hak Cipta
Tidak ada yang bisa dikatakan, hanya sebuah panel
<dv> <div style = "Text-Align: Center"> Informasi Hak Cipta </SIV> </SIV>
3. Halaman Dalam
Jika Anda tahu cara membuat halaman beranda, maka ide halaman dalam akan persis sama. Saya tidak akan mengulanginya lagi. Demikian pula, kodenya adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt titled document </title> <meta name = "viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src = "js/bootstrap.js"> </script> <style type = "text/css"> h1, h2, h3, h4, h5 {font-family: "microsoft yahei ui", "Microsoft yahei", "helvetica neue", helvetica, arial, "hirago" gboG ", helvetica neue", Helvetica, Arial, "Arial," Helvetica ", Helvetica, Arial," Arial, "Helvetica", Helvetica, "Wenquanyi Micro Hei", sans-serif; } </tyle> </head> <body> <div style = "Posisi: absolute; atas: 0; kiri: 0; lebar: 100%;"> <v> <a href = "#"> Kiri </a> </div> <v> <a href = "#"> </a> </Div> <Div> <Div> <a href = "#"> </a> </div> <v div> <a href = "#" Data-koggle = "dropdown"> dropdown <span> </span> </button> <ul role = "menu"> <li> <a href = "#"> tautan dropdown </a> </li> <li> <a href = "#"> tautan dropdown </a> </li> </ul> </Div> </Div>: Divage: Divage = "Divage> </li> </li> </div> </Div>: Divage: Divage =" Divage = </li> </li> </Div> </Div> </Div. " url (gambar/bg.jpg);Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.