css布局实现自适应商品库列表效果代码

代码语言:html

所属分类:响应式

代码描述:css布局实现自适应商品库列表效果代码,可过滤、可列表显示、缩略图显示

代码标签: 适应 商品 列表 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

 
<meta charset="UTF-8">


 
 
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
* {
 
box-sizing: border-box;
}

:root {
 
--app-bg: #101827;
 
--sidebar: rgba(21, 30, 47,1);
 
--sidebar-main-color: #fff;
 
--table-border: #1a2131;
 
--table-header: #1a2131;
 
--app-content-main-color: #fff;
 
--sidebar-link: #fff;
 
--sidebar-active-link: #1d283c;
 
--sidebar-hover-link: #1a2539;
 
--action-color: #2869ff;
 
--action-color-hover: #6291fd;
 
--app-content-secondary-color: #1d283c;
 
--filter-reset: #2c394f;
 
--filter-shadow: rgba(16, 24, 39, 0.8) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.light:root {
 
--app-bg: #fff;
 
--sidebar: #f3f6fd;
 
--app-content-secondary-color: #f3f6fd;
 
--app-content-main-color: #1f1c2e;
 
--sidebar-link: #1f1c2e;
 
--sidebar-hover-link: rgba(195, 207, 244, 0.5);
 
--sidebar-active-link: rgba(195, 207, 244, 1);
 
--sidebar-main-color: #1f1c2e;
 
--filter-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

body
, html {
 
margin: 0;
 
padding: 0;
 
height: 100%;
 
width: 100%;
}

body
{
 
overflow: hidden;
 
font-family: "Poppins", sans-serif;
 
background-color: var(--app-bg);
 
-webkit-font-smoothing: antialiased;
 
-moz-osx-font-smoothing: grayscale;
}

.app-container {
 
border-radius: 4px;
 
width: 100%;
 
height: 100%;
 
max-height: 100%;
 
max-width: 1280px;
 
display: flex;
 
overflow: hidden;
 
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 
max-width: 2000px;
 
margin: 0 auto;
}

.sidebar {
 
flex-basis: 200px;
 
max-width: 200px;
 
flex-shrink: 0;
 
background-color: var(--sidebar);
 
display: flex;
 
flex-direction: column;
}
.sidebar-header {
 
display: flex;
 
align-items: center;
 
justify-content: space-between;
 
padding: 16px;
}
.sidebar-list {
 
list-style-type: none;
 
padding: 0;
}
.sidebar-list-item {
 
position: relative;
 
margin-bottom: 4px;
}
.sidebar-list-item a {
 
display: flex;
 
align-items: center;
 
width: 100%;
 
padding: 10px 16px;
 
color: var(--sidebar-link);
 
text-decoration: none;
 
font-size: 14px;
 
line-height: 24px;
}
.sidebar-list-item svg {
 
margin-right: 8px;
}
.sidebar-list-item:hover {
 
background-color: var(--sidebar-hover-link);
}
.sidebar-list-item.active {
 
background-color: var(--sidebar-active-link);
}
.sidebar-list-item.active:before {
 
content: "";
 
position: absolute;
 
right: 0;
 
background-color: var(--action-color);
 
height: 100%;
 
width: 4px;
}
@media screen and (max-width: 1024px) {
 
.sidebar {
   
display: none;
 
}
}

.mode-switch {
 
background-color: transparent;
 
border: none;
 
padding: 0;
 
color: var(--app-content-main-color);
 
display: flex;
 
justify-content: center;
 
align-items: center;
 
margin-left: auto;
 
margin-right: 8px;
 
cursor: pointer;
}
.mode-switch .moon {
 
fill: var(--app-content-main-color);
}

.mode-switch.active .moon {
 
fill: none;
}

.account-info {
 
display: flex;
 
align-items: center;
 
padding: 16px;
 
margin-top: auto;
}
.account-info-picture {
 
width: 32px;
 
height: 32px;
 
border-radius: 50%;
 
overflow: hidden;
 
flex-shrink: 0;
}
.account-info-picture img {
 
width: 100%;
 
height: 100%;
 
-o-object-fit: cover;
     
object-fit: cover;
}
.account-info-name {
 
font-size: 14px;
 
color: var(--sidebar-main-color);
 
margin: 0 8px;
 
overflow: hidden;
 
max-width: 100%;
 
text-overflow: ellipsis;
 
white-space: nowrap;
}
.account-info-more {
 
color: var(--sidebar-main-color);
 
padding: 0;
 
border: none;
 
background-color: transparent;
 
margin-left: auto;
}

.app-icon {
 
color: var(--sidebar-main-color);
}
.app-icon svg {
 
width: 24px;
 
height: 24px;
}

.app-content {
 
padding: 16px;
 
background-color: var(--app-bg);
 
height: 100%;
 
flex: 1;
 
max-height: 100%;
 
display: flex;
 
flex-direction: column;
}
.app-content-header {
 
display: flex;
 
align-items: center;
 
justify-content: space-between;
 
padding: 0 4px;
}
.app-content-headerText {
 
color: var(--app-content-main-color);
 
font-size: 24px;
 
line-height: 32px;
 
margin: 0;
}
.app-content-headerButton {
 
background-color: var(--action-color);
 
color: #fff;
 
font-size: 14px;
 
line-height: 24px;
 
border: none;
 
border-radius: 4px;
 
height: 32px;
 
padding: 0 16px;
 
transition: 0.2s;
 
cursor: pointer;
}
.app-content-headerButton:hover {
 
background-color: var(--action-color-hover);
}
.app-content-actions {
 
display: flex;
 
justify-content: space-between;
 
align-items: center;
 
padding: 16px 4px;
}
.app-content-actions-wrapper {
 
display: flex;
 
align-items: center;
 
margin-left: auto;
}
@media screen and (max-width: 520px) {
 
.app-content-actions {
   
flex-direction: column;
 
}
 
.app-content-actions .search-bar {
   
max-width: 100%;
   
order: 2;
 
}
 
.app-content-actions .app-content-actions-wrapper {
   
padding-bottom: 16px;
   
order: 1;
 
}
}

.search-bar {
 
background-color: var(--app-content-secondary-color);
 
border: 1px solid var(--app-content-secondary-color);
 
color: var(--app-content-main-color);
 
font-size: 14px;
 
line-height: 24px;
 
border-radius: 4px;
 
padding: 0px 10px 0px 32px;
 
height: 32px;
 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
 
background-size: 16px;
 
background-repeat: no-repeat;
 
background-position: left 10px center;
 
width: 100%;
 
max-width: 320px;
 
transition: 0.2s;
}
.light .search-bar {
 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.search-bar:placeholder {
 
color: var(--app-content-main-color);
}
.search-bar:hover {
 
border-color: var(--action-color-hover);
 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236291fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.search-bar:focus {
 
outline: none;
 
border-color: var(--action-color);
 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

.action-button {
 
border-radius: 4px;
 
height: 32px;
 
background-color: var(--app-content-secondary-color);
 
border: 1px solid var(--app-content-secondary-color);
 
display: flex;
 
align-items: center;
 
color: var(--app-content-main-color);
 
font-size: 14px;
 
margin-left: 8px;
 
cursor: pointer;
}
.action-button span {
 
margin-right: 4px;
}
.action-button:hover {
 
border-color: var(--action-color-hover);
}
.action-button:focus, .action-button.active {
 
outline: none;
 
color: var(--action-color);
 
border-color: var(--action-color);
}

.filter-button-wrapper {
 
position: relative;
}

.filter-menu {
 
background-color: var(--app-content-secondary-color);
 
position: absolute;
 
top: calc(100% + 16px);
 
right: -74px;
 
border-radius: 4px;
 
padding: 8px;
 
width: 220px;
 
z-index: 2;
 
box-shadow: var(--filter-shadow);
 
visibility: hidden;
 
opacity: 0;
 
transition: 0.2s;
}
.filter-menu:before {
 
content: "";
 
position: absolute;
 
width: 0;
 
height: 0;
 
border-left: 5px solid transparent;
 
border-right: 5px solid transparent;
 
border-bottom: 5px solid var(--app-content-secondary-color);
 
bottom: 100%;
 
left: 50%;
 
transform: translatex(-50%);
}
.filter-menu.active {
 
visibility: visible;
 
opacity: 1;
 
top: calc(100% + 8px);
}
.filter-menu label {
 
display: block;
 
font-size: 14px;
 
color: var(--app-content-main-color);
 
margin-bottom: 8px;
}
.filter-menu select {
 
-webkit-appearance: none;
     
-moz-appearance: none;
         
appearance: none;
 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 
background-repeat: no-repeat;
 
padding: 8px 24px 8px 8px;
 
background-position: right 4px center;
 
border: 1px solid var(--app-content-main-color);
 
border-radius: 4px;
 
color: var(--app-content-main-color);
 
font-size: 12px;
 
background-color: transparent;
 
margin-bottom: 16px;
 
width: 100%;
}
.filter-menu select option {
 
font-size: 14px;
}
.light .filter-menu select {
 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.filter-menu select:hover {
 
border-color: var(--action-color-hover);
}
.filter-menu select:focus, .filter-menu select.active {
 
outline: none;
 
color: var(--action-color);
 
border-color: var(--action-color);
 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.filter-menu-buttons {
 
display: flex;
 
align-items: center;
 
justify-content: space-between;
}

.filter-button {
 
border-radius: 2px;
 
font-size: 12px;
 
padding: 4px 8px;
 
cursor: pointer;
 
border: none;
 
color: #fff;
}
.filter-button.apply {
 
background-color: var(--action-color);
}
.filter-button.reset {
 
background-color: var(--filter-reset);
}

.products-area-wrapper {
 
width: 100%;
 
max-height: 100%;
 
overflow: auto;
 
padding: 0 4px;
}

.tableView .products-header {
 
display: flex;
 
align-items: center;
 
border-radius: 4px;
 
background-color: var(--app-content-secondary-color);
 
position: sticky;
 
top: 0;
}
.tableView .products-row {
 
display: flex;
 
align-items: center;
 
border-radius: 4px;
}
.tableView .products-row:hover {
 
box-shadow: var(--filter-shadow);
 
background-color: var(--app-content-secondary-color);
}
.tableView .products-row .cell-more-button {
 
display: none;
}
.tableView .product-cell {
 
flex: 1;
 
padding: 8px 16px;
 
color: var(--app-content-main-color);
 
font-size: 14px;
 
display: flex;
 
align-items: center;
}
.tableView .product-cell img {
 
width: 32px;
 
height: 32px;
 
border-radius: 6px;
 
margin-right: 6px;
}
@media screen and (max-width: 780px) {
 
.tableView .product-cell {
   
font-size: 12px;
 
}
 
.tableView .product-cell.image span {
   
display: none;
 
}
 
.tableView .product-cell.image {
   
flex: 0.2;
 
}
}
@media screen and (max-width: 520px) {
 
.tableView .product-cell.category, .tableView .product-cell.sales {
   
display: none;
 
}
 
.tableView .product-cell.status-cell {
   
flex: 0.4;
 
}
 
.tableView .product-cell.stock, .tableView .product-cell.price {
   
flex: 0.2;
 
}
}
@media screen and (max-width: 480px) {
 
.tableView .product-cell.stock {
   
display: none;
 
}
 
.tableView .product-cell.price {
   
flex: 0.4;
 
}
}
.tableView .sort-button {
 
padding: 0;
 
background-color: transparent;
 
border: none;
 
cursor: pointer;
 
color: var(--app-content-main-color);
 
margin-left: 4px;
 
display: flex;
 
align-items: center;
}
.tableView .sort-button:hover {
 
color: var(--action-color);
}
.tableView .sort-button svg {
 
width: 12px;
}
.tableView .cell-label {
 
display: none;
}

.status {
 
border-radius: 4px;
 
display: flex;
 
align-items: center;
 
padding: 4px 8px;
 
font-size: 12px;
}
.status:before {
 
content: "";
 
width: 4px;
 
height: 4px;
 
border-radius: 50%;
 
margin-right: 4px;
}
.status.active {
 
color: #2ba972;
 
background-color: rgba(43, 169, 114, 0.2);
}
.status.active:before {
 
background-color: #2ba972;
}
.status.disabled {
 
color: #59719d;
 
background-color: rgba(89, 113, 157, 0.2);
}
.status.disabled:before {
 
background-color: #59719d;
}

.gridView {
 
display: flex;
 
flex-wrap: wrap;
 
margin: 0 -8px;
}
@media screen and (max-width: 520px) {
 
.gridView {
   
margin: 0;
 
}
}
.gridView .products-header {
 
display: none;
}
.gridView .products-row {
 
margin: 8px;
 
width: calc(25% - 16px);
 
background-color: var(--app-content-secondary-color);
 
padding: 8px;
 
border-radius: 4px;
 
cursor: pointer;
 
transition: transform 0.2s;
 
position: relative;
}
.gridView .products-row:hover {
 
transform: scale(1.01);
 
box-shadow: var(--filter-shadow);
}
.gridView .products-row:hover .cell-more-button {
 
display: flex;
}
@media screen and (max-width: 1024px) {
 
.gridView .products-row {
   
width: calc(33.3% - 16px);
 
}
}
@media screen and (max-width: 820px) {
 
.gridView .products-row {
   
width: calc(50% - 16px);
 
}
}
@media screen and (max-width: 520px) {
 
.gridView .products-row {
   
width: 100%;
   
margin: 8px 0;
 
}
 
.gridView .products-row:hover {
   
transform: none;
 
}
}
.gridView .products-row .cell-more-button {
 
border: none;
 
padding: 0;
 
border-radius: 4px;
 
position: absolute;
 
top: 16px;
 
right: 16px;
 
z-index: 1;
 
display: flex;
 
align-items: center;
 
justify-content: center;
 
width: 24px;
 
height: 24px;
 
background-color: rgba(16, 24, 39, 0.7);
 
color: #fff;
 
cursor: pointer;
 
display: none;
}
.gridView .product-cell {
 
color: var(--app-content-main-color);
 
font-size: 14px;
 
margin-bottom: 8px;
}
.gridView .product-cell:not(.image) {
 
display: flex;
 
align-items: center;
 
justify-content: space-between;
}
.gridView .product-cell.image span {
 
font-size: 18px;
 
line-height: 24px;
}
.gridView .product-cell img {
 
width: 100%;
 
height: 140px;
 
-o-object-fit: cover;
     
object-fit: cover;
 
border-radius: 4px;
 
margin-bottom: 16px;
}
.gridView .cell-label {
 
opacity: 0.6;
}
</style>


</head>

<body>
 
<div class="app-container">
 
<div class="sidebar">
   
<div class="sidebar-header">
     
<div class="app-icon">
       
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M507.606 371.054a187.217 187.217 0 00-23.051-19.606c-17.316 19.999-37.648 36.808-60.572 50.041-35.508 20.505-75.893 31.452-116.875 31.711 21.762 8.776 45.224 13.38 69.396 13.38 49.524 0 96.084-19.286 131.103-54.305a15 15 0 004.394-10.606 15.028 15.028 0 00-4.395-10.615zM27.445 351.448a187.392 187.392 0 00-23.051 19.606C1.581 373.868 0 377.691 0 381.669s1.581 7.793 4.394 10.606c35.019 35.019 81.579 54.305 131.103 54.305 24.172 0 47.634-4.604 69.396-13.38-40.985-.259-81.367-11.206-116.879-31.713-22.922-13.231-43.254-30.04-60.569-50.039zM103.015 375.508c24.937 14.4 53.928 24.056 84.837 26.854-53.409-29.561-82.274-70.602-95.861-94.135-14.942-25.878-25.041-53.917-30.063-83.421-14.921.64-29.775 2.868-44.227 6.709-6.6 1.576-11.507 7.517-11.507 14.599 0 1.312.172 2.618.512 3.885 15.32 57.142 52.726 100.35 96.309 125.509zM324.148 402.362c30.908-2.799 59.9-12.454 84.837-26.854 43.583-25.159 80.989-68.367 96.31-125.508.34-1.267.512-2.573.512-3.885 0-7.082-4.907-13.023-11.507-14.599-14.452-3.841-29.306-6.07-44.227-6.709-5.022 29.504-15.121 57.543-30.063 83.421-13.588 23.533-42.419 64.554-95.862 94.134zM187.301 366.948c-15.157-24.483-38.696-71.48-38.696-135.903 0-32.646 6.043-64.401 17.945-94.529-16.394-9.351-33.972-16.623-52.273-21.525-8.004-2.142-16.225 2.604-18.37 10.605-16.372 61.078-4.825 121.063 22.064 167.631 16.325 28.275 39.769 54.111 69.33 73.721zM324.684 366.957c29.568-19.611 53.017-45.451 69.344-73.73 26.889-46.569 38.436-106.553 22.064-167.631-2.145-8.001-10.366-12.748-18.37-10.605-18.304 4.902-35.883 12.176-52.279 21.529 11.9 30.126 17.943 61.88 17.943 94.525.001 64.478-23.58 111.488-38.702 135.912zM266.606 69.813c-2.813-2.813-6.637-4.394-10.615-4.394a15 15 0 00-10.606 4.394c-39.289 39.289-66.78 96.005-66.78 161.231 0 65.256 27.522 121.974 66.78 161.231 2.813 2.813 6.637 4.394 10.615 4.394s7.793-1.581 10.606-4.394c39.248-39.247 66.78-95.96 66.78-161.231.001-65.256-27.511-121.964-66.78-161.231z"/></svg>
     
</div>
   
</div>
   
<ul class="sidebar-list">
     
<li class="sidebar-list-item">
       
<a href="#">
         
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15.........完整代码请登录后点击上方下载按钮下载查看

网友评论0