วันนี้เราจะมาเรียนรู้วิธีสร้าง "รายการ CSS พร้อมกราฟิกและข้อความแบบผสม" ที่ใช้บ่อยร่วมกัน ขั้นแรก วิเคราะห์คุณลักษณะของรายการนี้ จากนั้นเขียนโค้ด HTML และสุดท้ายใช้สไตล์ CSS เพื่อให้บรรลุผลขั้นสุดท้าย
ผลกระทบของตัวอย่างนี้:
ผู้เขียนบทความนี้: 52CSS.com Li Xiang หากคุณต้องการพิมพ์ซ้ำ โปรดสร้างลิงก์ไปยังไซต์นี้ (http://www.52css.com/) และคุณไม่ได้รับอนุญาตให้เปลี่ยนแปลงเนื้อหาของบทความตามต้องการ และเก็บข้อความของคำชี้แจงลิขสิทธิ์นี้ไว้!
ด้านบนเป็นชื่อของคอลัมน์ที่ฉันชอบ 52css และมากกว่านั้น จากนั้นด้านล่างจะแบ่งออกเป็นสองช่วงตึก ช่วงหนึ่งแสดงภาพขนาดย่อ และอีกช่วงหนึ่งแสดงลิงก์ข้อความ ซึ่งทั้งสองบล็อกสามารถทำได้ผ่าน ul+li ด้วยการวิเคราะห์ข้างต้น ให้เริ่มการเข้ารหัส HTML ต่อไปนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <div id="ห่อ">
<คลาส div="รายการ">
<div class="list_title"></div>
<ul class="list_pic"></ul>
<ul class="list_text"></ul>
</div>
</div>
ใส่องค์ประกอบทั้งหมดลงในเลเยอร์ด้วยการตัดรหัส และตั้งค่าสีเส้นขอบเป็น #e5f2f8 เพื่อให้ดูเหมือนมีเอฟเฟกต์เงา
จากนั้นสร้างรายการเลเยอร์ภายในนั้น และสร้างสามเลเยอร์ภายในรายการ ได้แก่:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] list_title
รายการ_pic
รายการ_ข้อความ
มาเริ่มเขียนโค้ด HTML โดยละเอียดกัน:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] <div id="ห่อ">
<คลาส div="รายการ">
<div class="list_title">
<h3>ฉันชอบ 52css</h3>
<span><a href="#">เพิ่มเติม</a></span>
</div>
<ul class="list_pic">
<li><a href="/u/info_img/2009-06/11/5394_quote.gif" /></a><span><a href="http://www.downcodes.com/">ดาวน์โค้ด .com</a></span></li>
<li><a href="/u/info_img/2009-06/11/7852_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=9">ตัวอย่างเค้าโครง DivCSS</a></span></li>
<li><a href="/u/info_img/2009-06/11/8437_quote.gif" /></a><span><a href="http://www.downcodes.com/css_template/" >ดาวน์โหลดเทมเพลต</a></span></li>
<li><a href="/u/info_img/2009-06/11/3408_quote.gif" /></a><span><a href="http://www.downcodes.com/default.asp ?cateID=3">บทช่วยสอน DivCSS</a></span></li>
</ul>
<div class="clear"></div>
<ul class="list_text">
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=813">รายการคำจำกัดความ dl สร้างรายการ CSS ด้วย องค์ประกอบรูปภาพและข้อความ</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=720">ตัวอย่างการจัดวางหน้าเว็บ CSS: ด้วยความเหมาะสม แท็กสร้างตารางความหมาย</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=669">ตัวอย่างเค้าโครง DivCSS: รูปภาพที่มีประโยชน์มาก รายการ CSS แบบข้อความผสม - เต็มไปด้วยความหมาย</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=666">ตัวอย่างเค้าโครง DivCSS ใช้ dl dt dd เพื่อ ทำรายการ</a></li>
<li><span>[2007-09-11]</span>•<a href="http://www.downcodes.com/article.asp?id=636">ตัวอย่างเค้าโครง DivCSS: สามแถวและหนึ่งแถว ด้านบนและด้านล่างของคอลัมน์ ความสูงคงที่ ระดับกลาง ปรับได้</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
ลอย 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;}
