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

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

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

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

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

Post by GoB » 24/02/2015 4:16 pm

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

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

Code: Select all

<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 1113 times

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests