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

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

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

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

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

โพสต์โดย GoB » 24/02/2015 4:16 pm

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) เปิดดู 955 ครั้ง

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 10 และ บุคคลทั่วไป 0 ท่าน