Trang chủ
Module danh mục, chính sách thiết kế phẳng
Module danh mục, chính sách thiết kế phẳng
Giá: 390.000₫
<div class="collection-s">
<div class="pc40">
<a href="#"><div class="pc100 fresh-meat-s">Thịt tươi</div></a>
<a href="#"><div class="pc100 clean-veget-s">Rau sạch</div></a>
<a href="#"><div class="pc100 sea-food-s">Hải sản</div></a>
</div>
<div class="pc35">
<a href="#"><div class="pc100 fruit-s">Hoa quả</div></a>
<a href="#"><div class="pc50 product-s">Chế phẩm</div></a>
<a href="#"><div class="pc50 fish-s">Cá</div></a>
<a href="#"><div class="pc100 egg-milk-s">Trứng sữa</div></a>
</div>
<div class="pc25">
<a href="#"><div class="pc100 beau-skin-s">Da đẹp</div></a>
<a href="#"><div class="pc100 advice-s">Tư vấn</div></a>
<a href="#"><div class="pc100 news-s">Tin tức</div></a>
<a href="#"><div class="pc100 order-s">Tư vấn</div></a>
</div>
</div>
.collection-s a {
color: #fff;
}
.collection-s {
height: 240px;margin-bottom:15px;
}
.pc25 {
width: 25%;
}
.pc35 {
width: 34%;
}
.pc40 {
width: 40%;
}
.pc50 {
width: 50%;
}
.pc100 {
width: 100%;
}
.pc25, .pc35, .pc40 {
height: 100%;
}
.pc25, .pc35, .pc40, .pc50, .pc100 {
float: left;
}
.pc35, .pc40, .product-s {
margin-right: 1px
}
.pc35 a:hover, .pc40 a:hover{
color: #fff
}
.pc50.product-s {
width: 49%;
}
.pc25 a {
color: #666;
}
.pc40 .pc100:hover, .pc35 .pc100:hover {
background-position: 106px;
padding-left: 34px;
}
.pc25 .pc100:hover {
background-position: 66px;
padding-left: 14px;
}
.pc35 .pc50:hover {
background-position: center 44px;
padding-top: 12px;
}
.product-s, .fish-s {
background-position: center 14px;
padding-top: 60px;
}
.fresh-meat-s {
background: #c44d58 url(https://bizweb.dktcdn.net/100/005/795/files/thit-tuoi.png?v=1500789688287) no-repeat;
background-position: 15px center;
height: 33%;
padding: 31px 10px 0 79px;
}
.clean-veget-s {
background: #ad7a7a url(https://bizweb.dktcdn.net/100/005/795/files/rau-sach.png?v=1500789688283) no-repeat;
background-position: 15px center;
height: 33%;
padding: 31px 10px 0 79px;
}
.sea-food-s {
background: #ff6b6b url(https://bizweb.dktcdn.net/100/005/795/files/hai-san-sach.png?v=1500789688277) no-repeat;
background-position: 15px center;
height: 33%;
padding: 31px 10px 0 79px;
}
.fruit-s {
background: #83C236 url(https://bizweb.dktcdn.net/100/005/795/files/hoa-qua-sach.png?v=1500789688277) no-repeat;
background-position: 15px center;
height: 25%;
padding: 22px 10px 0 73px;
}
.product-s {
background: #527193 url(https://bizweb.dktcdn.net/100/005/795/files/vitaminc.png?v=1500789688290) no-repeat;
background-position: center 15px;
height: 40%;
padding: 63px 6px 0;
line-height: 1;
text-align: center;
}
.fish-s {
background: #4ecdc4 url(https://bizweb.dktcdn.net/100/005/795/files/spa.png?v=1500789688283) no-repeat;
background-position: center 25px;
height: 40%;
padding-top: 63px;
text-align: center;
}
.egg-milk-s {
background: #556270 url(https://bizweb.dktcdn.net/100/005/795/files/muoitam.png?v=1500789688280) no-repeat;
background-position: 15px center;
height: 34%;
padding: 33px 10px 0 63px;
}
.beau-skin-s {
background: #e7e7e7 url(https://bizweb.dktcdn.net/100/005/795/files/dadep.png?v=1500789688270) no-repeat;
background-position: 15px center;
height: 25%;
padding: 21px 2px 0 59px;
}
.advice-s {
background: #e7e7e7 url(https://bizweb.dktcdn.net/100/005/795/files/tuvan.png?v=1500789688290) no-repeat;
background-position: 15px center;
height: 25%;
padding: 21px 2px 0 59px;
}
.news-s {
background: #e7e7e7 url(https://bizweb.dktcdn.net/100/005/795/files/tintuc.png?v=1500789688287) no-repeat;
background-position: 15px center;
height: 25%;
padding: 21px 2px 0 59px;
}
.order-s {
background: #e7e7e7 url(https://bizweb.dktcdn.net/100/005/795/files/dathang.png?v=1500789688273) no-repeat;
background-position: 15px center;
height: 24%;
padding: 21px 2px 0 59px;
}
.fresh-meat-s, .clean-veget-s, .fruit-s, .product-s, .fish-s, .beau-skin-s, .advice-s, .news-s {
margin-bottom: 1px
}
.pc50, .pc100 {
transition: all 300ms ease 100ms;
-webkit-transition: all 300ms ease 100ms;
}
.collection-s .pc100:hover, .collection-s .pc50:hover {
border-color: #555;
box-shadow: 0 1px 25px rgba(0, 0, 0, .4) inset;
transition: all 300ms ease 100ms;
-webkit-transition: all 300ms ease 100ms;
}
Thư viện
Đăng nhập
Khôi phục mật khẩu
Bạn đã có tài khoản? Đăng nhập ngay