យើងរចនាដោយនៅក្នុងប្រអប់មួយគឺមានច្រើន item list ដោយនៅក្នុងនោះវាមានរូបភាពនឹងអក្សរនៅក្នុងនឹងជាមួយវា។ ដោយ playout ខ្ងុំសូមយក Bootstrap មកប្រើជាមួយ។
មុនដំបូងយើងធ្វើនៅក្នុង HTML ដោយយើង link Bootstrap និង CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
1
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
1
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
1
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
1
</div>
</div>
</div>
</body>
</html>
Note សម្រាប់ CSS
- a និង span ត្រូវដាក់ display: block ដោយសារតែ default របស់វាគឺ display: inline ដូចនេះប្តូរវាទៅ display: block។ ហើយ size width វាទៅតាម size width ខាងលើ។
- list-style: none ដើម្បីលុបចំនុចខ្មៅនៅខាងមុខ ហើយយើងត្រូវដាក់ margin និង padding ទៅជា ០ ដោយវាមាន default របស់វាដូចនេះយើងដាក់វាជា ០។
- justify-content: space-between វាសម្រាប់ឲ្យមានចន្លោះពីមួយទៅមួយនៅចន្លោះកណ្តាល។
នេះកូដពេញ ដែលបានរចនា
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
<div class="box">
<h1>Hello Item</h1>
<div class="item">
<ul>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
<div class="box">
<h1>Hello Item</h1>
<div class="item">
<ul>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
<div class="box">
<h1>Hello Item</h1>
<div class="item">
<ul>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 item-box1">
<div class="box">
<h1>Hello Item</h1>
<div class="item">
<ul>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
<li>
<a href="">
<img src="1.webp" alt="">
<span>$0.50</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
background-color: rgb(209, 209, 209);
}
.item-box1{
margin-top: 20px;
}
.item-box1 .box{
width: 100%;
background-color: white;
border-radius: 8px;
margin-top: 20px;
padding: 10px;
}
.item-box1 .box h1{
font-size: 22px;
}
.item ul{
list-style: none;
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.item ul li{
width: 24%;
height: 180px;
}
.item ul li a{
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: black;
height: 100%;
}
.item ul li a img{
width: 100%;
height: 80%;
border-radius: 8px;
object-fit: contain;
}
.item ul li a span{
display: block;
height: 20%;
width: 100%;
text-align: center;
}
0 Comments