เค้าโครงไซต์มีสองประเภท: แบบตารางและแบบบล็อก และในขณะที่หน้าเดิมสะดวกกว่าสำหรับการสร้างหน้า html อย่างง่าย หน้าหลังก็เหมาะถ้าคุณต้องการเพิ่มองค์ประกอบแต่ละอย่างในรูปแบบของบล็อก
คำแนะนำ
ขั้นตอนที่ 1
มีสองเทคนิคที่จะช่วยให้คุณพัฒนาการออกแบบบล็อกได้ด้วยตนเอง: โดยการฝังสไตล์ชีตแบบเรียงซ้อนลงในเอกสาร หรือโดยการเชื่อมต่อจากทรัพยากรภายนอก ทั้งสองให้ผลลัพธ์เหมือนกัน ดังนั้นจึงไม่มีความแตกต่างพื้นฐานระหว่างพวกเขา ในกรณีแรก ให้วางโค้ดต่อไปนี้ที่ใดก็ได้ในไฟล์ style.css:
.block1 {
}
Block1 - ชื่อของบล็อกคุณสามารถเขียนอะไรก็ได้ ระหว่างวงเล็บปีกกา ระบุพารามิเตอร์ในรูปแบบต่อไปนี้: ชื่อแอตทริบิวต์> โคลอน> ค่า> อัฒภาค (รวมถึงวางไว้ก่อนวงเล็บปีกกา) องค์ประกอบต่อไปนี้มักใช้:
- ความกว้าง - ความกว้าง (500px, 100%, ฯลฯ);
- ความสูง - ความสูง (200px, 25%, ฯลฯ);
- พื้นหลัง - สีพื้นหลัง (เหลือง, แดง, # 000000);
- ช่องว่างภายใน - ช่องว่างภายในเนื้อหาภายในบล็อก (0px, 20%);
- ระยะขอบ - ระยะขอบภายนอกจากบล็อก (15px, 40%);
- เส้นขอบ - กรอบ (เส้นขอบ: ทึบ 0px สีดำ;);
- ลอย - การจัดตำแหน่ง (ซ้าย, ขวา);
- border-radius - การปัดเศษของมุม (border-radius: 10px;)
ขั้นตอนที่ 2
ในการใช้งาน CSS ครั้งที่สอง ให้เพิ่มสไตล์ระหว่างแท็ก และ:
.block1 {
}
และเพิ่มพารามิเตอร์ที่คุณต้องการ
ขั้นตอนที่ 3
แทรกบล็อกในตำแหน่งที่ต้องการบนไซต์โดยใช้คำสั่ง:
บล็อก 1
บันทึกและรีเฟรชหน้าควรปรากฏขึ้น โปรดทราบว่าการจัดตำแหน่งความสูงอาจแตกต่างกันไปขึ้นอยู่กับเนื้อหาที่เต็ม ตัวอย่างเช่น หากคุณตั้งค่า 300px แต่เขียนข้อความเพียงบรรทัดเดียว ข้อความนั้นจะไม่แสดงทั้งหมด ซึ่งสามารถแก้ไขได้ เช่น การใช้ตารางที่มีพารามิเตอร์ที่จำเป็น ซึ่งควรวางไว้ภายในบล็อก กล่าวคือ ระหว่างแท็กและ. และเพื่อไม่ให้มองเห็นเส้นขอบให้แทรกแอตทริบิวต์