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

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

วันนี้เราจะมาเรียนรู้วิธีสร้าง "รายการ CSS พร้อมกราฟิกและข้อความแบบผสม" ที่ใช้บ่อยร่วมกัน ขั้นแรก วิเคราะห์คุณลักษณะของรายการนี้ จากนั้นเขียนโค้ด HTML และสุดท้ายใช้สไตล์ CSS เพื่อให้บรรลุผลขั้นสุดท้าย

ผลกระทบของตัวอย่างนี้:

ผู้เขียนบทความนี้: 52CSS.com Li Xiang หากคุณต้องการพิมพ์ซ้ำ โปรดสร้างลิงก์ไปยังไซต์นี้ (http://www.52css.com/) และคุณไม่ได้รับอนุญาตให้เปลี่ยนแปลงเนื้อหาของบทความตามต้องการ และเก็บข้อความของคำชี้แจงลิขสิทธิ์นี้ไว้!
ด้านบนเป็นชื่อของคอลัมน์ที่ฉันชอบ 52css และมากกว่านั้น จากนั้นด้านล่างจะแบ่งออกเป็นสองช่วงตึก ช่วงหนึ่งแสดงภาพขนาดย่อ และอีกช่วงหนึ่งแสดงลิงก์ข้อความ ซึ่งทั้งสองบล็อกสามารถทำได้ผ่าน ul+li ด้วยการวิเคราะห์ข้างต้น ให้เริ่มการเข้ารหัส HTML ต่อไปนี้:

ตัวอย่างซอร์สโค้ด [www.downcodes.com]

<คลาส div="รายการ">

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

ตัวอย่างซอร์สโค้ด [www.downcodes.com]

list_title
รายการ_pic
รายการ_ข้อความ

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

ตัวอย่างซอร์สโค้ด [www.downcodes.com]

<คลาส div="รายการ">

ฉันชอบ 52css

เพิ่มเติม

ดาวน์โค้ด .com

ตัวอย่างเค้าโครง DivCSS

ดาวน์โหลดเทมเพลต

บทช่วยสอน DivCSS

[2007-09-11]•รายการคำจำกัดความ dl สร้างรายการ CSS ด้วย องค์ประกอบรูปภาพและข้อความ

[2007-09-11]•ตัวอย่างการจัดวางหน้าเว็บ CSS: ด้วยความเหมาะสม แท็กสร้างตารางความหมาย

[2007-09-11]•ตัวอย่างเค้าโครง DivCSS: รูปภาพที่มีประโยชน์มาก รายการ CSS แบบข้อความผสม - เต็มไปด้วยความหมาย

[2007-09-11]•ตัวอย่างเค้าโครง DivCSS ใช้ dl dt dd เพื่อ ทำรายการ

[2007-09-11]•ตัวอย่างเค้าโครง DivCSS: สามแถวและหนึ่งแถว ด้านบนและด้านล่างของคอลัมน์ ความสูงคงที่ ระดับกลาง ปรับได้

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

ด้วยพื้นฐานข้างต้น ให้เริ่มการเขียนโค้ด CSS ต่อไปนี้:
ข้อความโดยรวม:

ตัวอย่างซอร์สโค้ด [www.downcodes.com]

* { ระยะขอบ:0; การขยาย:0; ขนาดตัวอักษร:12px;
a{ color:#666666; ตกแต่งข้อความ:none;}
a:hover{ color:#2764b4; ตกแต่งข้อความ:ขีดเส้นใต้;}

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

ตัวอย่างซอร์สโค้ด [www.downcodes.com]

#wrap{ ความกว้าง:450px; ระยะขอบ:30px อัตโนมัติ; เส้นขอบ:1px ทึบ #e5f2f8;
.list{ ความกว้าง:448px; เส้นขอบ:1px ทึบ #a4a4a4;}

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

ตัวอย่างซอร์สโค้ด [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 และข้อความถูกจัดแนวในแนวนอนและตรงกลาง

ตัวอย่างซอร์สโค้ด [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

ตัวอย่างซอร์สโค้ด [www.downcodes.com]

.list_text{ความกว้าง:426px; ระยะขอบ:10px;
.list_text li { ลอย: ซ้าย; ความกว้าง: 100%;
.list_text li span{ ลอย: ขวา;

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