ایجاد گالری توسط html

نمونه مثال:
فرض کنید قصد داریم یک مجموعه ای از عکس ها را به وسیله زبان html در یک صفحه نمایش دهیم.

نکته: به این نکته توجه کنید که اگر عکس ها را در تگ <img> قرار

دهید و بخواهید که انها را در زیر هم نمایش دهید، نمیتوانید. ):

البته میتوایند انها را در زیر هم قرار به شرطی که عرض انها را در حالت ماکسیموم قرار دهیم(اصطلاحا ۱۰۰%)

در این حالت تمام عکس های شما در زیر یک دیگر قرار میگیرند.

و اما راه حل بهتر برای انجام این کار ان است که از تگ های ul , li استفاده کنید.

اگر تگ های عکس خود را در تگ های مذکور قرار دهیم، میتوانیم با right  کردنِ float انها، همه عکس ها را در زیر هم قرار دهیم.
در واقع در هر خط و ردیف تنها یک عکس وجود دارد.

درمرحله بعد میخواهیم تمام عکس ها را به ترتیب در کنار یکدیگر قرار

دهیم.

نکته مهم ان است که وقتی این کار ها را انجام میدهیم میان عکس

ها مقداری فاصله ایجاد میشود  و برای رفع این مشکل باید  displayخود

عکس ها را در حالت بلاک قرار دهیم واین نکته بسیار مهمی میباشد.

<!doctype html>
<html lang=”fa” dir=”rtl”>
<head>
<link rel=”stylesheet” href=”style.css”>
<meta charset=”UTF-8″>
<meta name=”viewport”
content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>good gallery</title>
<style>
* {
margin: 0;
padding: 0;
}

ul{
width: 900px;
height: 600px;
margin: 100px auto;
border: 5px solid slategray;
}

ul li{
display: inline;
float: right;
list-style: none;
}
.sss ul li img{
width: 300px;
height: 200px;
display: block;
}

</style>
</head>
<body>
<div class=”sss”>
<ul>
<li><img src=”pictuers/download.jpeg” alt=”photo”></li>
<li><img src=”pictuers/download.jpeg” alt=”photo”></li>
<li><img src=”pictuers/download.jpeg” alt=”photo”></li>
<li><img src=”pictuers/download.jpeg” alt=”photo”></li>
<li><img src=”pictuers/download.jpeg” alt=”photo”></li>
<li><img src=”pictuers/download.jpeg” alt=”photo”></li>
<li><img src=”pictuers/download.jpeg” alt=”photo”></li>
<li><img src=”pictuers/download.jpeg” alt=”photo”></li>
<li><img src=”pictuers/download.jpeg” alt=”photo”></li>
</ul>
</div>
</body>
</html>

 

و نکته اخر در این مقاله ان است که در کد های خود سعی کنید

Box-sizing  را  در حالت border dox  قرار دهیم.

این کار باعث میشود که در مواقعی که margin  و یا padding  استفاده میکنیم، به مقدار طول و عرض تگ ما اضافه نشود.

این عمل در مواقع ایجاد بردار هم کارامد میباشد.

local_offerevent_note تیر ۲۷, ۱۳۹۷

account_box mostafa haftani

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *