18/08/2018, 11:03
Tạo Album hình ảnh đơn giản bằng CSS
Tạo một bộ sưu tập ảnh, thực chất là kết hợp các thuộc tính của CSS như: Position, margin, align, padding, float,.... Nếu đã hiểu rõ về những thuộc tính đó, thì bạn sẽ làm được những cái album ảnh đẹp, dưới đây tôi có hai ví dụ để giúp bạn hình dung ...
 |
Tạo một bộ sưu tập ảnh, thực chất là kết hợp các thuộc tính của CSS như: Position, margin, align, padding, float,.... Nếu đã hiểu rõ về những thuộc tính đó, thì bạn sẽ làm được những cái album ảnh đẹp, dưới đây tôi có hai ví dụ để giúp bạn hình dung ra cách tạo một bộ sưu tập ảnh. |
Tạo bộ sưu tập ảnh đơn giản
Dưới đây là một bộ sưu tập ảnh đơn giản chỉ gồm hình và tiêu đề của tấm hình
Đặt tiêu đề cho hình ảnh tại đây
Đặt tiêu đề cho hình ảnh tại đây
Đặt tiêu đề cho hình ảnh tại đây
Đặt tiêu đề cho hình ảnh tại đây
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
awidth: 200px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
awidth:100%;
height: auto;
}
div.desc {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a href="h1.jpg" target="_blank">
<img src="h1.jpg">
</a>
<div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div>
</div>
<div class="img">
<a href="h2.jpg" target="_blank">
<img src="h2.jpg">
</a>
<div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div>
</div>
<div class="img">
<a href="h3.jpg" target="_blank">
<img src="h3.jpg">
</a>
<div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div>
</div>
<div class="img">
<a href="h4.jpg" target="_blank">
<img src="h4.jpg">
</a>
<div class="desc">Đặt tiêu đề cho hình ảnh tại đây</div>
</div>
</body>
</html>
Xem ví dụ
Tạo bộ sưu tập ảnh nâng cao
Dưới đây là một bộ sưu ảnh hao hao giống facebook, khi dí chuột vào sẽ hiện nút thích, bình luận, và tên tấm ảnh
Đồng ruộng
Thích - Bình luận
Đôi bạn vẹt
Thích - Bình luận
Vườn hóa phong lan
Thích - Bình luận
Rừng thông
Thích - Bình luận
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box{
float: left;
position: relative;
margin:0px 10px 10px 0px;
}
img{
awidth:200px;
height:200px;
margin:0px;
padding: 0px;
border:1px solid black;
}
.title{
position: absolute;
awidth: 100%;
bottom:0px;
display: none;
}
.title h3{
margin:0px 0px 0px 8px;
color: white;
}
.title hr{
border:0px;
border-bottom:1px solid #ddd;
}
.title p{
margin: 0px 0px 13px 8px;
color:#ddd;
}
.box:hover img{
opacity: 0.9;
}
.box:hover .title{
display: inherit;
}
</style>
</head>
<body>
<div class="box">
<a href="h1.jpg" target="_blank"><img src="h1.jpg"></a>
<div class="title">
<h3>Đồng ruộng</h3>
<hr>
<p>
<span class="span1">Thích</span>
-
<span class="span2">Bình luận</span>
</p>
</div>
</div>
<div class="box">
<a href="h2.jpg" target="_blank"><img src="h2.jpg"></a>
<div class="title">
<h3>Đôi bạn vẹt</h3>
<hr>
<p>
<span class="span1">Thích</span>
-
<span class="span2">Bình luận</span>
</p>
</div>
</div>
<div class="box">
<a href="h3.jpg" target="_blank"><img src="h3.jpg"></a>
<div class="title">
<h3>Vườn hóa phong lan</h3>
<hr>
<p>
<span class="span1">Thích</span>
-
<span class="span2">Bình luận</span>
</p>
</div>
</div>
<div class="box">
<a href="h4.jpg" target="_blank"><img src="h4.jpg"></a>
<div class="title">
<h3>Rừng thông</h3>
<hr>
<p>
<span class="span1">Thích</span>
-
<span class="span2">Bình luận</span>
</p>
</div>
</div>
</body>
</html>
Xem ví dụ
