เฟรมที่วางไว้รอบๆ รูปภาพหรือข้อความจะประดับเว็บไซต์และเพิ่มความหลากหลายให้กับการออกแบบ หากคุณใช้ตารางเพื่อสร้างเส้นขอบ โค้ดสำหรับแต่ละเส้นขอบจะใช้พื้นที่มากเกินไป นอกจากนี้ ในกรณีนี้ คุณจะต้องเขียนโค้ด HTML ใหม่สำหรับแต่ละเฟรม ด้วย CSS คุณสามารถสร้างเส้นขอบที่มีความหนาและสีใดก็ได้ที่คุณต้องการโดยการเขียนโค้ดง่ายๆ เพียงครั้งเดียวสำหรับองค์ประกอบทั้งหมดที่จะล้อมรอบด้วยเส้นขอบนี้ เทคโนโลยีนี้จะช่วยให้สามารถเปลี่ยนประเภทของเฟรมบนไซต์ได้หากจำเป็นภายในไม่กี่นาที
มันจำเป็น
- - มีเว็บไซต์เป็นของตัวเอง
- - รู้ว่า CSS คืออะไรและเขียนสไตล์เหล่านี้ไว้ที่ใดบนไซต์
คำแนะนำ
ขั้นตอนที่ 1
ในการสร้างเส้นขอบ ขั้นแรกให้เขียนโค้ดต่อไปนี้ใน CSS:
ราม {}
ขั้นตอนที่ 2
ในการทำให้เส้นขอบมีขนาดที่คุณต้องการ ให้ใช้พารามิเตอร์ border-width ซึ่งกำหนดความกว้างของเส้นเป็นพิกเซล ตัวอย่างเช่น หากเส้นเฟรมควรมีความกว้าง 3 พิกเซล รายการจะมีลักษณะดังนี้:
ramka {ความกว้างขอบ: 3px;}
ขั้นตอนที่ 3
ตอนนี้กำหนดรูปแบบของเส้นขอบโดยใช้พารามิเตอร์ border-style หากคุณต้องการสร้างเส้นขอบที่มีด้านข้างเป็นเส้นทึบธรรมดา ให้ใส่รายการต่อไปนี้ในโค้ดระหว่างวงเล็บปีกกา - border-style: solid
ขั้นตอนที่ 4
เส้นขอบประสามารถหาได้โดยการเขียนดังนี้: border-style: dotted การตรวจสอบสไตล์เส้นขอบ: เส้นประจะทำให้คุณได้เส้นขอบแบบเส้นประ
ขั้นตอนที่ 5
คุณสามารถทำให้เส้นขอบเป็นเส้นทึบคู่ได้ดังนี้: border-style: double ใช้รูปแบบเส้นขอบ: ร่องหรือรูปแบบเส้นขอบ: แนวสันเขาเพื่อใส่กรอบข้อความหรือรูปภาพลงในเฟรมที่มีเอฟเฟกต์ 3 มิติ ข้อแตกต่างระหว่างสองตัวเลือกนี้คือ ในกรณีแรก เฟรมประกอบด้วยเส้นเยื้อง และในกรณีที่สอง เส้นนูน
ขั้นตอนที่ 6
ใช้รหัสนี้: border-style: inset เพื่อสร้างเอฟเฟกต์ของสิ่งที่ใส่เข้าไปด้วยเส้นขอบขององค์ประกอบไซต์ เพื่อให้เนื้อหาของเส้นขอบพร้อมกับเส้นขอบตรงกันข้ามนูนเขียนสไตล์เส้นขอบ: เริ่มแรก
ขั้นตอนที่ 7
คุณสามารถเพิ่มสีที่ต้องการให้กับเฟรมได้โดยใช้พารามิเตอร์ border-color ซึ่งวางไว้ระหว่างวงเล็บปีกกา หากคุณต้องการทำให้เส้นขอบเป็นสีแดง ให้เขียน border-color: red, blue - border-color: blue, orange - border-color: orange
ขั้นตอนที่ 8
โค้ดเส้นขอบ CSS รวมถึงตัวเลือกทั้งหมด มีลักษณะดังนี้:
ramka {ความกว้างขอบ: 3px; สไตล์เส้นขอบ: แข็ง; ขอบสี: ฟ้า;}
ขั้นตอนที่ 9
ตอนนี้ใน HTML ให้เขียนสิ่งนี้:
เนื้อหาเฟรม แทนที่จะใช้วลี "เนื้อหาเฟรม" ให้แทรกข้อความหรือรหัสของรูปภาพที่ต้องการ
ขั้นตอนที่ 10
ดังนั้น คุณสามารถออกแบบองค์ประกอบบนเว็บไซต์ได้ไม่จำกัดจำนวน หากต้องการเปลี่ยนรูปลักษณ์ของเฟรม คุณจะต้องเปลี่ยนโค้ด CSS เท่านั้น