พื้นฐานของเว็บไซต์ Div-based: 7 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:09

คำแนะนำนี้จะแสดงให้คุณเห็นถึงพื้นฐานเบื้องต้นของการสร้างเว็บไซต์ด้วย divs เพราะตารางที่ใช้เลย์เอาต์มันร้าย!:pเพื่อให้เข้าใจคำสั่งนี้ คุณจะต้องรู้ html และ css พื้นฐาน หากคุณไม่เข้าใจบางสิ่ง อย่าลังเลที่จะถาม หน้าแรกส่วนตัวของฉันก็ใช้โครงสร้าง div ประเภทนี้เช่นกันhttps://www.erwtje.netEnjoy

ขั้นตอนที่ 1: สร้างไฟล์พื้นฐาน

ขั้นแรกให้สร้างไฟล์ html ของคุณ เราจะเพิ่มข้อมูลพื้นฐานลงไป ไฟล์ css จะว่างเปล่าสำหรับไฟล์ now.html ตอนนี้มี: ทดสอบ บันทึกไฟล์ html ของคุณเป็น something.html คุณสามารถเลือกชื่อได้เอง ไฟล์ css ของคุณต้องบันทึกเป็น.css ตรวจสอบให้แน่ใจว่าคุณตั้งชื่อเหมือนกับที่ระบุไว้ในไฟล์ html ในกรณีนี้คือ "style.css" ขณะนี้เรามีหน้า html เปล่าธรรมดาเมื่อแสดงตัวอย่างในเบราว์เซอร์ของเรา

ขั้นตอนที่ 2: แก้ไขแท็กเนื้อหาสำหรับสีพื้นฐาน แบบอักษร …

เราจะปล่อยให้ไฟล์ html เป็นเหมือนเดิม และแก้ไขเฉพาะไฟล์ css เพิ่มโค้ดต่อไปนี้ในไฟล์ css:body { background: #444444; ตระกูลแบบอักษร: verdana, arial, sans-serif; สี: #444444; ขนาดตัวอักษร: 12px; margin: 0px;}ด้วยโค้ดบิตนี้ เราจะกำหนดคุณสมบัติทั้งหมดของแท็ก body เนื่องจากเนื้อหาทั้งหมดอยู่ในแท็กเนื้อหา การตั้งค่าเหล่านี้จะมีผลกับทั้งหน้า สีพื้นหลังและแบบอักษร (สี) ถูกตั้งค่าเป็นสีเทาเข้ม ตระกูลแบบอักษร (ตระกูลแบบอักษร) ถูกตั้งค่าเป็นสีเขียว หากคอมพิวเตอร์ที่ใช้ดูเว็บไซต์ของเราไม่มีแบบอักษร "verdana" จะแสดงเว็บไซต์ของเราในรูปแบบตัวอักษร "arial" คุณสามารถเพิ่มแบบอักษรเพิ่มเติมลงในรายการได้ "sans-serif" เป็นประเภททั่วไปที่จะใช้เมื่อไม่มีแบบอักษรที่คุณระบุ ขนาดแบบอักษร (ขนาดแบบอักษร) ถูกตั้งค่าเป็น 12 พิกเซล นี่คือค่าสัมบูรณ์ หากคุณต้องการแก้ไขขนาดแบบอักษรอื่นๆ (เช่น ส่วนหัว ย่อหน้า รายการเมนู …) คุณสามารถใช้หน่วยที่เกี่ยวข้อง "em" แทน "px" ด้วยวิธีนี้ หากคุณต้องการปรับขนาดเว็บไซต์ของคุณ คุณจะต้องเปลี่ยนขนาดแบบอักษรของเนื้อหาเท่านั้น ระยะขอบถูกตั้งค่าเป็น 0px สำหรับแท็กเนื้อหาทั้งสี่ด้าน เพื่อให้แน่ใจว่าไซต์จะติดอยู่ที่ด้านบนของหน้าต่าง

ขั้นตอนที่ 3: การเพิ่มคอนเทนเนอร์ด้วยส่วนหัวและเนื้อหา

ตอนนี้เราจะเพิ่มคอนเทนเนอร์ นี่เป็นเพียง div ที่มีศูนย์กลางซึ่งจะมีทั้งเว็บไซต์ของเรา ในคอนเทนเนอร์นี้ เราจะเพิ่ม div อีกสอง div; div เนื้อหาและ div ส่วนหัว ไฟล์ html ของเราจะมีลักษณะดังนี้: ทดสอบส่วนหัวของเนื้อหา เราจะเพิ่มโค้ดต่อไปนี้ในไฟล์ css ของเรา: div#container { width: 800px; ระยะขอบ: 0px อัตโนมัติ; พื้นหลัง: #FFFFFF; ช่องว่างภายใน: 0px;} div # เนื้อหา { ความกว้าง: 800px; ช่องว่างภายใน: 100px; พื้นหลัง: สีเหลือง;} div # ส่วนหัว { ความกว้าง: 800px; ความสูง: 100px; พื้นหลัง: สีน้ำเงิน; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px;}.clearfix:หลังจาก {เนื้อหา:""; แสดง:บล็อก; ความสูง:0; ชัดเจน:ทั้งสอง; การมองเห็น:ซ่อน;}.clearfix {display:inline-block;}/* ซ่อนจาก IE Mac \*/.clearfix {display:block;}div#container หมายความว่าเรามีแท็ก div ที่มี id "container" เราจะเพิ่มสีและ "margin: 0px auto;" เพื่อให้แน่ใจว่าคอนเทนเนอร์ของเราอยู่กึ่งกลางในหน้า เราต้องให้เนื้อหาเป็น padding-top และส่วนหัวมีค่าสัมบูรณ์ด้วย "top: 0px" เพื่อให้แน่ใจว่าส่วนหัวอยู่เหนือเนื้อหาอื่นๆ ไม่เป็นไร สีน่าเกลียด เพียงเพื่อให้อ่านสีและเห็น div ต่างๆ ได้ง่ายขึ้น เราต้องใช้โค้ด clearfix แปลกๆ นี้เพื่อให้แน่ใจว่าการนำทางและ div ของเนื้อหา (ที่เพิ่มในขั้นตอนถัดไป) จะไม่หลุดออกจาก div โดยรอบ

ขั้นตอนที่ 4: สร้างสอง Divs ใน Divs เนื้อหาสำหรับการนำทางและเนื้อหาจริง

ตอนนี้เราจะเพิ่ม div อีกสอง div ใน div เนื้อหา หนึ่งรายการสำหรับการนำทางและอีกรายการสำหรับเนื้อหาจริง อยู่ระหว่างแท็กเนื้อหา คุณจะเพิ่มรหัสใหม่:

การนำทาง เนื้อหาหลัก เราจะเพิ่มโค้ด css เพื่อแสดงการนำทางและเนื้อหาหลัก divs;div#nav { width: 200px; ลอย: ซ้าย; พื้นหลัง: สีส้ม;}div#maincontent { ความกว้าง: 600px; ลอย: ขวา; background: pink;}โปรดทราบว่าทั้งสอง div นั้นลอยอยู่ทั้งคู่ หากเราไม่ได้ใส่รหัส clearfix เพิ่มเติมในขั้นตอนก่อนหน้า div จะลอยอยู่นอก div โดยรอบ ด้วยวิธี clearfix เราจะทำให้แน่ใจว่าจะไม่เกิดขึ้น

ขั้นตอนที่ 5: เพิ่ม Divs พิเศษบางอย่างสำหรับโครงสร้างในการนำทาง

ตอนนี้เราจะเพิ่ม div พิเศษให้กับทั้ง div "nav" เพื่อสร้างโครงสร้างบางอย่างในหน้าเว็บของเรา เปลี่ยนโค้ดต่อไปนี้:

• ฟู
• บาร์

ตอนนี้เราจะเพิ่มโค้ดบางส่วนเพื่อกำหนดวิธีการแสดง "navblock" ของ div โปรดทราบว่า navblock มีคลาส ไม่ใช่ id เหตุผลนี้ง่าย divs ที่มี id จะแสดงเพียงครั้งเดียว (บล็อกการนำทาง ส่วนหัว ส่วนท้าย …) Divs พร้อมคลาสสามารถแสดงได้มากกว่าหนึ่งครั้ง ที่นี่เราจะใช้คลาส ในกรณีที่เราต้องการเพิ่มบล็อกการนำทางอื่นในภายหลัง on.div.navblock { width: 180px; ระยะขอบ: 5px อัตโนมัติ; border: 1px solid red;}ถ้าเราต้องการเพิ่มบล็อกการนำทาง คุณจะต้องเพิ่ม … โครงสร้างใหม่ ตอนนี้โค้ดของคุณจะเป็นแบบนี้

• ฟู
• บาร์
• บู
• ไกล

ขั้นตอนที่ 6: เพิ่ม Divs พิเศษสำหรับโครงสร้างในเนื้อหาหลัก

ตอนนี้เราจะทำเช่นเดียวกันสำหรับ div เนื้อหาหลัก ตอนนี้โค้ดมีลักษณะดังนี้:

Lorem ipsum dolor นั่งสบาย …

อีกครั้ง เราจะเพิ่มโค้ดบางส่วนลงในไฟล์ css ของเราเพื่อกำหนดวิธีการแสดง div:div.contentblock { width: 580px; ระยะขอบ: 5px อัตโนมัติ; border: 1px สีขาวทึบ;}ตอนนี้เราสามารถเพิ่มบล็อกเนื้อหาอื่นโดยเพิ่ม " … " อีกอันใน div เนื้อหาหลักเช่นนี้

Lorem ipsum dolor นั่งสบาย …

Nunc cursus, justo eget elementum dictum, …

ขั้นตอนที่ 7: ทำให้ไซต์ดูน่าเกลียดน้อยลง

ตอนนี้ส่วนที่สนุก สี ตอนนี้เรามีโครงสร้าง div หลักแล้ว เราสามารถเปลี่ยนสีให้มีความโกลาหลน้อยลง/น่าเกลียด/…แค่ลองเล่นกับสีในไฟล์ css นี่คือไฟล์ html ที่สมบูรณ์ของหน้าเว็บที่แสดงในภาพ: ทดสอบ

• ฟู
• บาร์
• บู
• ไกล

Lorem ipsum dolor นั่งสบาย …

Nunc cursus, justo eget elementum dictum, …

ส่วนหัว และนี่คือไฟล์ css ที่สมบูรณ์: ร่างกาย { พื้นหลัง: #444444; ตระกูลแบบอักษร: verdana, arial, sans-serif; สี: #444444; ขนาดตัวอักษร: 12px; ระยะขอบ: 0px;}div#container (ความกว้าง: 800px; ระยะขอบ: 0px อัตโนมัติ; พื้นหลัง: #FFFFFF; ช่องว่างภายใน: 0px;} div # เนื้อหา { ความกว้าง: 800px; ช่องว่างภายใน: 100px; พื้นหลัง: #FFFFFF;}div#header { width: 800px; ความสูง: 100px; พื้นหลัง: #888888; ตำแหน่ง: สัมบูรณ์; บน: 0px;}div#nav { ความกว้าง: 200px; ลอย: ซ้าย; พื้นหลัง: #FFFFFF;}div#maincontent { width: 600px; ลอย: ขวา; พื้นหลัง: #DDDDDD;} div.navblock { ความกว้าง: 180px; ระยะขอบ: 5px อัตโนมัติ; เส้นขอบ: 1px ทึบ #DDDDDD;} div.contentblock { ความกว้าง: 580px; ระยะขอบ: 5px อัตโนมัติ; border: 1px solid #FFFFFF;}.clearfix:after {เนื้อหา:""; แสดง:บล็อก; ความสูง:0; ชัดเจน:ทั้งสอง; การมองเห็น:ซ่อน;}.clearfix {display:inline-block;}/* ซ่อนจาก IE Mac \*/.clearfix {display:block;} ตอนนี้คุณมีพื้นฐานแล้ว แน่นอนว่ายังมีอีกหลายสิ่งที่ต้องแก้ไข เช่น สี ขนาดฟอนต์ บล็อกการนำทางที่ดูดีกว่า … แต่คำแนะนำนี้เกี่ยวกับโครงสร้าง div เท่านั้น หากคุณต้องการดูคำแนะนำอื่นๆ ที่เกี่ยวข้อง คุณสามารถถามได้เสมอ ฉันจะดูว่าฉันสามารถหาเวลา