ตัวอย่าง DIVCSS: สร้างรายการบล็อกทั่วไป

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

การสร้างรายการหรือองค์ประกอบของหน้าแบบรายการด้วย CSS ถือเป็นหัวข้อสนทนามาโดยตลอด วันนี้เราจะเรียนรู้รายการบล็อกที่ใช้กันทั่วไป เราได้เรียนรู้วิธีการทำรายการต่างๆ มากมาย นี่คือตัวอย่างที่คุณสามารถอ้างอิงถึง:

การแสดงผลตัวอย่างนี้:

ขั้นแรก ให้ดูที่โครงสร้างของมัน ตั้งค่าวันที่ของเลเยอร์เวลาทางด้านซ้าย ชื่อของบทความ h2 เมตาเลเยอร์คำอธิบายของบทความ และเนื้อหาหัวเรื่องของบทความ p

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

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

ใส่องค์ประกอบทั้งหมดลงในเลเยอร์ด้วยการห่อรหัส
มาเริ่มเขียนโค้ด HTML โดยละเอียดกัน:

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

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

กันยายน 03

ตัวอย่างเค้าโครง DIV CSS: สิบขั้นตอนในการใช้เค้าโครงเว็บไซต์ css!

จาก: www.downcodes.com | ผู้แก้ไข: downcodes.com |. ไม่มีการตอบกลับ

แท็บใหม่: เมื่อใดก็ตามที่คุณเปิดแท็บใหม่ คุณจะเห็นเว็บไซต์ที่คุณเข้าชมบ่อยที่สุด เครื่องมือค้นหาที่ใช้บ่อยที่สุด หน้าบุ๊กมาร์กล่าสุด แท็บที่เพิ่งปิด ฯลฯ
ทางลัดแอพ: เปิดใช้งานเว็บแอปโดยไม่ต้องเปิดเบราว์เซอร์ ทางลัดของแอปพลิเคชันจะโหลดแอปพลิเคชันออนไลน์ที่คุณใช้บ่อยโดยตรง

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

26 สิงหาคม

กำหนด list dl เพื่อสร้างองค์ประกอบรายการ CSS พร้อมรูปภาพและข้อความ

จาก: www.downcodes.com | ผู้แก้ไข: downcodes.com |. ไม่มีการตอบกลับ

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

22 สิงหาคม

ตัวอย่างเมนู CSS+JS สุดเจ๋งที่สามารถซ่อนและเลื่อนออกได้

จาก: www.downcodes.com | ผู้แก้ไข: downcodes.com |. ไม่มีการตอบกลับ

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

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

* { ระยะขอบ:0; การขยาย:0; ขนาดตัวอักษร:12px; สี:#666;
ร่างกาย { พื้นหลัง:#ebead1;}
a{ สี:#514f42;การตกแต่งข้อความ:none;}
a:โฮเวอร์ { สี:#669900;}

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

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

#wrap{ ความกว้าง:650px; ระยะขอบ:30px อัตโนมัติ;}
.list{ width:650px; padding:0 0 20px 0; ระยะขอบ:0 0 20px 0; border-bottom:1px ประ #666633;}

ตั้งเวลาให้ลอยไปทางซ้าย ความกว้าง 76px การแปลงข้อความ: ตัวพิมพ์ใหญ่;

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

.list .date{ float:left;width:76px; height:58px; text-align: center;font-size :10px;font-weight: สี:#FFF;}
.list b{display:block; font-size:40px; color:#FFF;

ตั้งค่าเมตาเลเยอร์คำอธิบายชื่อ ตั้งค่าระยะขอบด้านล่างเป็น 25px เพื่อให้สามารถจัดแนวเนื้อหาหลักได้โดยไม่ต้องตัดคำ

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

.list .meta{ระยะขอบ:0 0 25px 0; สี:#979680;}
.list h2 a{ขนาดตัวอักษร: 1.8em;
.list p { จอแสดงผล: บล็อก ความสูงบรรทัด: 18px;}