CSS การสร้างอัลบั้มรูปภาพ

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
โพสต์: 212
ลงทะเบียนเมื่อ: 12/01/2015 10:14 am

CSS การสร้างอัลบั้มรูปภาพ

โพสต์ที่ยังไม่ได้อ่าน โดย GoB »

CSS การสร้างอัลบั้มรูปภาพ

การสร้างอัลบั้มรูปภาพหรือการจัดหมวดหมู่ให้กับรูปภาพ ทำให้รูปภาพเป็นระเบียบมากขึ้น ซึ่งเราสามารถกำหนด ขนาดของรูปภาพตามที่เราต้องการได้ รวมถึงกำหนดระยะห่างของรูปภาพแต่ละภาพ เพื่อให้รูปภาพจัดเรียงกัน ตามที่เราต้องการ

โค้ด: เลือกทั้งหมด

<html>
<head>
<style>
.image {		//สร้าง Class 
    float: left;	//คำสั่งให้ชิดซ้าย
    width: 110px;	//ความกว้างของรูปภาพ
    height: 90px;	//ความสูงของรูปภาพ
    margin: 5px;	//ระยะห่างของรูปภาพ
}
.text_line {		//สร้าง Class
    clear: both;	//ไม่ให้มีอะไรลอยอยู่ทั้งด้านซ้ายและด้านขวา
    margin-bottom: 2px;     //ระยะห่างจากวัตถุ หรือข้อความด้านบน
}
</style>
</head>
<body>
<h3>Flower Gallery</h3>
<img class="thumbnail" src="dow.jpg" width="107" height="90">
<img class="thumbnail" src="rose.jpg" width="107" height="80">
<img class="thumbnail" src="mali.jpg" width="116" height="90">
<h3 class="text_line">Fruit Gallery</h3>
<img class="thumbnail" src="orange.jpg" width="107" height="90">
<img class="thumbnail" src="banana.jpg" width="107" height="80">
<img class="thumbnail" src="apple.jpg" width="116" height="90">
</body>
</html>
ผลลัพธ์ที่ได้
=================================================
1.jpg
1.jpg (40 KiB) Viewed 1887 times

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 75