หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

ตัวอย่างบทช่วยสอน DivCSS: รายการ CSS ของกราฟิกและข้อความแบบผสมที่มีโครงสร้างด้านบนและด้านล่าง

ผู้เขียน:Eve Cole เวลาอัปเดต:2009-06-11 17:32:41

ใส่องค์ประกอบทั้งหมดลงในเลเยอร์ด้วยการตัดรหัส และตั้งค่าสีเส้นขอบเป็น #e5f2f8 เพื่อให้ดูเหมือนมีเอฟเฟกต์เงา
จากนั้นสร้างรายการเลเยอร์ภายในนั้น และสร้างสามเลเยอร์ภายในรายการ ได้แก่:

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.downcodes.com]
list_title
รายการ_pic
รายการ_ข้อความ

มาเริ่มเขียนโค้ด HTML โดยละเอียดกัน:


ลอย h3 ไปทางซ้ายในเลเยอร์ list_title เพื่อสร้างหัวเรื่อง ลอยไปทางขวาเพื่อสร้างการเชื่อมต่อเพิ่มเติม และสร้างรูปภาพ ul+li ที่ลอยอยู่ในเลเยอร์ list_pic
สร้าง ul+li ในเลเยอร์ list_text เพื่อสร้างรายการข่าว
ที่ด้านล่างสุด ให้วางเลเยอร์ที่มีคลาสชัดเจนเพื่อเคลียร์โฟลต

ด้วยพื้นฐานข้างต้น ให้เริ่มการเขียนโค้ด CSS ต่อไปนี้:
ข้อความโดยรวม:
div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.downcodes.com]
* { ระยะขอบ:0; การขยาย:0; ขนาดตัวอักษร:12px;
a{ color:#666666; ตกแต่งข้อความ:none;}
a:hover{ color:#2764b4; ตกแต่งข้อความ:ขีดเส้นใต้;}

กำหนดรูปแบบของการตัดเลเยอร์ทั้งหมด ความกว้างคือ 450px ระยะขอบด้านบนและด้านล่างคือ 30px ด้านซ้ายและด้านขวาจัดวางในแนวนอน และเส้นขอบถูกกำหนดเป็นสีน้ำเงิน (ที่นี่เพื่อเพิ่มเอฟเฟกต์เงา)

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.downcodes.com]
#wrap{ ความกว้าง:450px; ระยะขอบ:30px อัตโนมัติ; เส้นขอบ:1px ทึบ #e5f2f8;
.list{ ความกว้าง:448px; เส้นขอบ:1px ทึบ #a4a4a4;}

คำจำกัดความสไตล์ของส่วนชื่อเรื่อง list_title:
ตั้งค่าความกว้างเป็น 426px ช่องว่างด้านบนและด้านล่างเป็น 0 และระยะขอบซ้ายและขวาเป็น 10px
องค์ประกอบชื่อคอลัมน์ h3 ลอยไปทางซ้าย ความกว้างคือ 300px
ตั้งค่าองค์ประกอบ span ให้ลอยไปทางขวาด้วยความกว้าง 60px จัดแนวข้อความไปทางขวาและตั้งค่าลิงก์

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.downcodes.com]
.list_title{ width:426px; padding:0 10px; เส้นขอบ: 1px solid #fff;
.list_title h3{ ลอย: ซ้าย; ความกว้าง: 300px;}
.list_title span{ float:right; width:60px; text-align:right;}

คำจำกัดความสไตล์ของเลเยอร์รูปภาพ list_pic:
ขั้นแรก ให้ใช้รายการ ul และตั้งค่าความกว้างเป็น 433px
สิ่งที่ต้องให้ความสนใจคือการตั้งค่าการเติม: padding:15px 0 0 15px;
(สาเหตุที่ตั้งค่าระยะขอบด้านในขวาเป็น 0 ก็เนื่องมาจากปัญหาการเว้นวรรคของ li ซึ่งปรับปรุงประสิทธิภาพของเพจ คุณยังสามารถตั้งค่าเป็น: padding: 15px 15px 0 15px; เอฟเฟกต์คอนทราสต์)
li กำหนดขนาดของบล็อกรูปภาพเป็น 94px และระยะขอบ: 0 14px 0 0;
สีเส้นขอบของรูปภาพเปลี่ยนจากสีน้ำเงินเป็นสีเทาเมื่อเมาส์ลอยอยู่

ตั้งค่ารูปแบบข้อความลิงก์
แปลงช่วงเป็นองค์ประกอบบล็อก ลิงก์ภายในช่วงจะถูกแปลงเป็นองค์ประกอบบล็อกด้วย และกำหนดความกว้างและความสูงเป็น 94px และ 20px ตามลำดับ ระยะห่างระหว่างบรรทัดถูกตั้งค่าเป็น 20px และข้อความถูกจัดแนวในแนวนอนและตรงกลาง

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.downcodes.com]
.list_pic{ความกว้าง:433px; การขยาย:15px 0 0 15px;}
.list_pic li { จอแสดงผล: อินไลน์; ลอย: ซ้าย; ความกว้าง: 94px; ระยะขอบ: 0 14px 0 0;
.list_pic li img{ ความกว้าง:90px; ความสูง:70px;}
.list_pic li img{ border:2px solid #b3deee;}
.list_pic li a:โฮเวอร์ img{border:2px solid #ccc;}
.list_pic li span{ จอแสดงผล: บล็อก; ความกว้าง: 94px; ความสูง: 22px;
.list_pic li ครอบคลุม { จอแสดงผล: บล็อก;}

คำจำกัดความสไตล์ของเลเยอร์ข้อความ list_text:
กำหนดรายการข่าวผ่าน ul+li ควรสังเกตว่าช่วงเวลาจะลอยไปทางขวา และข้อความจะถูกเขียนที่ขอบด้านบนโดยมีเส้นประสีน้ำเงินทางด้านขวา และระยะขอบด้านบนถูกกำหนดไว้ที่ 10px

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.downcodes.com]
.list_text{ความกว้าง:426px; ระยะขอบ:10px;
.list_text li { ลอย: ซ้าย; ความกว้าง: 100%;
.list_text li span{ ลอย: ขวา;

สุดท้าย ล้างโฟลต: .clear{ clear:both;}