แม้ว่า IE6 จะถูกเพิกเฉยยกเว้นข้อกำหนดที่เรียกร้องบางอย่าง IE8 เบราว์เซอร์ IE8 ซึ่งมาพร้อมกับ Win7 ยังคงต้องได้รับการสนับสนุน
ข้อได้เปรียบหลักของวิธีนี้คือโดยส่วนตัวแล้วฉันคิดว่ามันเป็นการเตรียมการน้อยลงและไม่จำเป็นต้องค้นหารูปภาพจำนวนมากเพื่อสร้างวัสดุออนไลน์ คุณเพียงแค่ต้องเตรียม bootstrap, jQuery และ photoshop วิธีกำหนดค่า bootstrap และ jQuery คุณสามารถอ้างถึง "bootstrap เพื่อเขียนกล่องโต้ตอบที่สามารถปิดบนหน้าเว็บปัจจุบันที่สามารถปิดได้" (คลิกเพื่อเปิดลิงค์)
เมื่อถูกขอให้เขียนเว็บไซต์คุณมักจะมีปัญหากับวิธีการจัดวางมัน ในความเป็นจริงมันไม่ยาก หากคุณสามารถใช้ bootstrap ได้อย่างเชี่ยวชาญและมีวิธีการเฉพาะคุณยังสามารถจัดการการบ้านของคุณได้อย่างรวดเร็วและง่ายดายเพื่อจัดการกับความต้องการทั่วไป
แม้ว่าเทมเพลตหน้าจะถูกค้นหาเป็นเวลานานบนอินเทอร์เน็ต แต่กุญแจสำคัญคือการเข้าใจกระบวนการสร้างของเทมเพลตหน้าเหล่านี้
เมื่อดาวน์โหลดเทมเพลตเหล่านี้เข้ากันไม่ได้กับเบราว์เซอร์และจะไม่ถูกแก้ไขมันจะเป็นปัญหาใหญ่
1. วัตถุประสงค์พื้นฐาน
ใช้ bootstrapv3 เพื่อสร้างหน้าต่อไปนี้:
โฮมเพจแสดงไว้ด้านบน ก่อนอื่นการแขวนที่ส่วนหัวคือการนำทางของเว็บไซต์นี้ซึ่งอยู่ตรงกลางกลางขวาและเมนูดรอปดาวน์ สาระสำคัญที่นี่คือกลุ่มปุ่มและส่วนประกอบแถบการนำทางที่จัดทำโดย bootstrap ไม่สามารถใช้ได้เนื่องจากส่วนประกอบแถบการนำทางนี้ไม่สามารถใช้งานได้กับ IE8 สำหรับรายละเอียดโปรดดูบทความ "วิธีแก้ข้อบกพร่องของ Bootstrap Navigation Bar Navbar ใน IE8" (คลิกเพื่อเปิดลิงค์)
หลังจากนั้นภายใต้หน้าจอยักษ์มีสามคอลัมน์และสองปุ่มที่สอดคล้องกัน ที่นี่คุณสามารถวางส่วนที่สำคัญที่สุดของเว็บไซต์และในที่สุดข้อมูลลิขสิทธิ์ตามปกติ
หน้าภายในมีลักษณะเช่นนี้:
นอกจากนี้ยังเป็นแถบการนำทางสูงสุดตามด้วยชื่อและเนื้อหาของหน้าภายในนี้ ชื่อของหน้าภายในเป็นหน้าจอยักษ์ แต่มันเล็กกว่าขนาดของโฮมเพจ
ถัดไปคือข้อมูลลิขสิทธิ์
2. กระบวนการผลิต
1. First Open Photoshop และสร้างภาพ 1024x1 ใหม่ ความกว้างกว้างที่สุดเท่าที่จะทำได้ เพียงแค่พยายามให้กว้างที่สุดเท่าที่จะทำได้ ภาพคือ 1. สีพื้นหน้าเป็นสีเขียวเข้ม R: 0 กรัม: 140 B: 0 สีพื้นหลังเป็นสีเขียวอ่อน r: 100 กรัม: 200 B: 100 ใช้เครื่องมือไล่ระดับสีเพื่อดึงภาพต่อไปนี้ออกมา ไม่ว่าคุณจะดึงมันได้อย่างไรคุณสามารถดึงมันไปทางซ้ายและขวาและไปที่กลางและทั้งสองด้านขึ้นอยู่กับความชอบส่วนตัวของคุณ:
นี่เป็นภาพเดียวที่เราต้องเตรียม คุณสามารถปิด Photoshop โยนมันออกไปและบันทึกภาพนี้ในโฟลเดอร์โครงการเว็บไซต์ ภาพนี้มีเพียงประมาณ 6k และไม่มีผลต่อการโหลดเลย
2. หน้าแรก
รหัสเฉพาะมีดังนี้และจากนั้นรหัสจะถูกอธิบายทีละหนึ่ง:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "ข้อความ/html; charset = utf-8"/> <title> content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ผู้ใช้-scalable = no"> <link href = "css/bootstrap.css" rel = "Stylesheet" Media = "Screen"> <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 "Wenquanyi Micro Hei", Sans-Serif; } </style> </head> <body> <div style = "ตำแหน่ง: abstracted; top: 0; ซ้าย: 0; width: 100%;"> <div> <div> <diving type = "ปุ่ม"> ซ้าย </button> </div> <div> <button type = "ปุ่มกลาง" data-toggle = "dropdown"> dropdown <span> </span> </button> <ul role = "เมนู"> <li> <a href = "#"> ลิงค์แบบเลื่อนลง </a> </li> <li> <a href = "#"> ลิงก์แบบเลื่อนลง </a> </li> URL (รูปภาพ /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 /> <H3> คอลัมน์ 2 </h3> <p> ... </p> <p> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> </p> </div> </div> href = "#" role = "ปุ่ม"> ปุ่ม </a> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> </p> </div> </div> </div> </div> <div> <div> <d3> <h3> </h3> <p> role = "ปุ่ม"> ปุ่ม </a> </p> </div> </div> </div> <div> <div style = "Text-Agely: Center"> ข้อมูลลิขสิทธิ์ </div> </div> </div> </body> </html>(1) <head> ส่วนหนึ่ง
<head> <!-การเข้ารหัสเว็บไซต์, ชื่อ, หน้าจอแบบปรับตัว, ฯลฯ-> <meta http-equiv = "เนื้อหาประเภท" content = "text/html; charset = utf-8"/> <title> เอกสารชื่อ </title> <meta name = "viewport" content = "ความกว้างของอุปกรณ์ ต้องใช้-> <link href = "css/bootstrap.css" rel = "stylesheet" media = "หน้าจอ"> <script type = "text/javascript" src = "js/jquery-1.11.1.js"> </script> <script type = "text/javascript สไตล์ CSS ที่เราจำเป็นต้องกำหนดตัวเองเพื่อแก้ปัญหาข้อผิดพลาดในระบบ Win7 ที่ตัวอักษรสีดำของ Microsoft ไม่สามารถแสดงได้ตามปกติ แต่ตัวอักษรเพลงจะปรากฏขึ้น-> <style type = "text/css"> h1, h2, h3, h4, h5 {font-family: "microsoft yahei ui" "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", Sans-Serif; } </style> </head>(2) แถบการนำทาง
เนื่องจากแถบการนำทางที่จัดทำโดย bootstrap ไม่สามารถใช้งานได้เราจึงต้องใช้กลุ่มปุ่มที่จัดทำโดย bootstrap เพื่อเขียนแถบการนำทางด้วยตัวเอง
<!-ก่อนอื่นแถบการนำทางจะต้องถูกแขวนไว้ที่หัวของหน้าเว็บ-> <div style = "ตำแหน่ง: บทคัดย่อ; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 100%;"> <!-กำหนดกลุ่มปุ่ม-> <div> <div> <! มันคือการใช้แท็ก A จากนั้นเพิ่มสไตล์คลาสแทนที่จะเป็นแท็กปุ่มที่จัดทำโดยเว็บไซต์อย่างเป็นทางการ-> <a href = "#"> ซ้าย </a> </vel data-toggle = "dropdown"> dropdown <span> </span> </button>< ul role = "เมนู"> <li> <a href = "#"> ลิงค์แบบเลื่อนลง </a> </li> <li> <a href = "#"> ลิงค์ดรอปดาวน์ </a> </li>
เปลี่ยน BTN-Success ในแอตทริบิวต์คลาสเป็น BTN-PRIMARY, BTN-Danger ฯลฯ สามารถเปลี่ยนสีของปุ่มนี้ได้!
(3) ส่วนหน้าจอยักษ์
หน้าจอยักษ์เขียนดังนี้ กุญแจสำคัญคือการแนะนำพื้นหลังที่เราเพิ่งเข้ามาใน Photoshop
เหตุผลที่ฉันต้องเพิ่มจำนวนมากที่นี่ <br> Enter เป็นเพราะฉันต้องการเพิ่มขนาดของหน้าจอยักษ์นี้
<div style = "background-image: url (images /bg.jpg); การตอบสนองพื้นหลัง: ทำซ้ำ; text-allign: 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 /> </div>
(4) ส่วนคอลัมน์
ที่นี่องค์กรกริดของ Bootstrap ใช้เพื่อพิมพ์สามคอลัมน์
สำหรับรายละเอียดคุณสามารถอ้างถึงบทความ "bootstrap" ที่ปรับให้เข้ากับระบบพีซีแท็บเล็ตและระบบโทรศัพท์มือถือโทรศัพท์มือถือโดยอัตโนมัติ แบ่ง 12 กริดของหน้าเว็บทั้งหมดออกเป็น 3 ชิ้นและแต่ละกริด 4 กริดนั้นถูกต้อง แต่ละคอลัมน์เป็นพาเนลที่ไม่มีหัวแผงที่มีชื่อ H3 ขนาดใหญ่อยู่ด้านในจากนั้นข้อความย่อหน้าของ P และสองปุ่ม
เป็นที่น่าสังเกตว่าสิ่งเหล่านี้จะต้องอยู่ในคอนเทนเนอร์มิฉะนั้นสามสิ่งเหล่านี้จะเติมเต็มทั้งหน้า:
<div> <div> <div> <div> <div> <h3> column1 </h3> <p> ... </p> <p> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> </p> </div </p> <p> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> </p> </div> </div> </div> <div> <div> <div> <h3> <a href = "#" role = "ปุ่ม"> ปุ่ม </a> </p> </div> </div> </div> </div> </div> </div> </div>
(5) ส่วนข้อมูลลิขสิทธิ์
ไม่มีอะไรจะพูดเพียงแค่แผง
<div> <div style = "text-allign: center"> ข้อมูลลิขสิทธิ์ </div> </div>
3. หน้าภายใน
หากคุณรู้วิธีสร้างหน้าแรกความคิดของหน้าภายในจะเหมือนกันทุกประการ ฉันจะไม่ทำซ้ำอีก ในทำนองเดียวกันรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "ข้อความ/html; charset = utf-8"/> <title> content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ผู้ใช้-scalable = no"> <link href = "css/bootstrap.css" rel = "Stylesheet" Media = "Screen"> <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 "Wenquanyi Micro Hei", Sans-Serif; } </style> </head> <body> <div style = "ตำแหน่ง: Absolute; top: 0; ซ้าย: 0; width: 100%;"> <div> <a href = "#"> ซ้าย </a> </div> <div> <a href = "#"> middle </a> data-toggle = "dropdown"> dropdown <span> </span> </button> <ul role = "เมนู"> <li> <a href = "#"> ลิงค์แบบเลื่อนลง </a> </li> <li> <a href = "#"> ลิงก์แบบเลื่อนลง </a> </li> url (images/bg.jpg); การทำซ้ำพื้นหลัง: ทำซ้ำ; "> <h1> <font color ="#ffffff "> title </font> </h1> </div> <div> <div> <div>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น