css布局实现产品列表搜索显示详情效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现产品列表搜索显示详情效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Product List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">

<style>
    @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap");
:root {
  --main-color: #fc302b;
  --font: "Space Grotesk", sans-serif;
  --border-color: #08090a;
}

* {
  box-sizing: border-box;
  outline: none;
}

img {
  max-width: 100%;
}

body {
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  color: #08090a;
  display: grid;
  place-items: center;
  background-color: #d0d0d0;
  font-family: var(--font);
  background-image: url("//repo.bfw.wiki/bfwrepo/image/60505985a23e9.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-blend-mode: overlay;
  padding: 0 80px;
}
@media (max-width: 980px) {
  body {
    padding: 0;
  }
}

.container {
  max-width: 1250px;
  border-radius: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 960px;
  height: 90vh;
  width: 100%;
  display: flex;
  scroll-behavior: smooth;
  background-color: #f6f5f7;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.4);
}
@media (max-width: 980px) {
  .container {
    max-height: none;
    border-radius: 0;
    height: 100%;
  }
}

.nav {
  width: 100px;
  height: 100%;
  background-color: #08090a;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .nav {
    width: 60px;
  }
}
.nav__text {
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  transform: rotate(-180deg);
}
@media (max-width: 800px) {
  .nav__text {
    display: none;
  }
}
.nav__shop {
  width: 24px;
}
.nav__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.nav__cart span {
  background-color: var(--main-color);
  border: 2px solid #08090a;
  height: 20px;
  display: flex;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  width: 20px;
  color: #fff;
  line-height: 1;
  right: -6px;
  top: -8px;
  position: absolute;
}

.logo {
  color: var(--main-color);
  width: 32px;
}

.cover {
  background-image: url("//repo.bfw.wiki/bfwrepo/image/60505985a23e9.png");
  width: 500px;
  display: flex;
  justify-content: center;
  font-size: 48px;
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  align-items: center;
  background-position: center;
  text-align: center;
  font-weight: 500;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .cover {
    width: 300px;
  }
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px;
  background-color: #fff;
  width: 310px;
  overflow-y: auto;
  scroll-behavior: smooth;
  transition: 0.6s;
  flex-shrink: 0;
}
.product + .product {
  margin-left: 6px;
}
.product__img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 40px 0;
  max-width: 500px;
  transition: 0.3s;
}
.product__title {
  max-width: 12ch;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  margin: 20px 0;
  transition: 0.6s;
}
.product__brand {
  font-size: 14px;
  letter-spacing: 1px;
  transition: 0.6s;
}
.product__price {
  margin-bottom: 30px;
  transition: 0.6s;
}
.product__subtitle {
  color: #414041;
  line-height: 1.5em;
  font-size: 14px;
  margin-bottom: 20px;
}
.product__subtitle--expanded {
  display: none;
}
.product__detail {
  margin-top: auto;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
}
.product__detail-img {
  display: none;
}
.product__buttons {
  align-items: center;
  display: none;
  min-width: 80%;
  margin-bottom: 36px;
}
@media (max-width: 1010px) {
  .product__buttons {
    flex-direction: column;
    justify-content: center;
  }
}
.product__options {
  display: flex;
  align-items: center;
}
.product__option {
  background-color: transparent;
  border: 1px solid var(--border-color);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: var(--font);
  margin-right: -1px;
}
@media (max-width: 650px) {
  .product__option {
    padding: 8px 16px;
  }
}
.product__option:first-child {
  border-radius: 4px 0 0 4px;
}
.product__option:last-child {
  border-radius: 0 4px 4px 0;
}
.product__option--active {
  background-color: var(--border-color);
  color: #fff;
  border-color: var(--border-color);
}
.product__option.product__add {
  background-color: var(--main-color);
  color: #fff;
  margin-left: 16px;
  flex-grow: 1;
  border-radius: 4px;
  border-color: var(--main-color);
}
@media (max-width: 1010px) {
  .product__option.product__add {
    margin-left: 0;
    margin-top: 16px;
  }
}

.product--active {
  width: 70%;
  padding-left: 70px;
  padding-right: 70px;
  overflow-y: auto;
  padding-bottom: 0;
}
@media (max-width: 650px) {
  .product--active {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
  }
}
.product--active .product__title {
  font-size: 44px;
  max-width: none;
}
@media (max-width: 650px) {
  .product--active .product__title {
    font-size: 28px;
  }
}
.product--active .product__detail {
  display: none;
}
.product--active .product__price {
  font-size: 24px;
}
.product--active .product__brand {
  font-size: 16px;
}
.product--active .product__subtitle {
  display: none;
}
.product--active .product__detail-img {
  display: block;
  margin-top: 20px;
  margin: 20px -70px 0;
  max-width: none;
  width: calc(100% + 140px);
}
@media (max-width: 650px) {
  .product--active .product__detail-img {
    width: calc(100% + 60px);
  }
}
.product--active .product__subtitle--expanded {
  display: block;
  -webkit-animation-name: transform;
          animation-name: transform;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-delay: var(--delay);
          animation-delay: var(--delay);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.product--active .product__buttons {
  display: flex;
  -webkit-animation-name: transform;
          animation-name: transform;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-delay: var(--delay);
          animation-delay: var(--delay);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.product--active .product__table,
.product--active .product__grid,
.product--active .product__close {
  display: flex;
}

.product__table {
  background-color: #08090a;
  color: #fff;
  margin: 0 -70px;
  padding: 70px 100px;
  width: calc(100% + 140px);
  flex-direction: column;
  display: none;
}
@media (max-width: 650px) {
  .product__table {
    width: calc(100% + 60px);
    padding: 50px 30px;
  }
}
.product__table-title {
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 20px;
  margin-bottom: 30px;
}
.product__table-row {
  display: flex;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 650px) {
  .product__table-row {
    flex-direction: column;
  }
}
.product__table-cell {
  line-height: 1.5;
  font-size: 14px;
}
.product__table-cell:first-child {
  flex-shrink: 0;
  font-weight: 500;
  letter-spacing: 1px;
  width: 260px;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 650px) {
  .product__table-cell:first-child {
    width: auto;
    margin-bottom: 2px;
  }
}
.product__table .product__option {
  border-color: #323132;
  border-radius: 4px;
  text-align: center;
  margin-top: 30px;
  background-color: #323132;
}

@-webkit-keyframes transform {
  0% {
    opacity: 0;
    transform: translatey(100px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes transform {
  0% {
    opacity: 0;
    transform: translatey(100px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.product__grid {
  display: flex;
  margin: 0 -70px;
  width: calc(100% + 140px);
  flex-wrap: wrap;
  display: none;
}
@media (max-width: 650px) {
  .product__grid {
    width: calc(100% + 60px);
  }
}
.product__grid img {
  width: 33.333%;
  max-height: 320px;
  -o-object-fit: cover;
     object-fit: cover;
}
.product__grid img:nth-child(3) ~ img {
  width: 50%;
  max-height: none;
}

.product__close {
  position: -webkit-sticky;
  position: sticky;
  display: none;
  z-index: 1;
  top: 0;
  margin-right: -40px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-left: auto;
  color: transparent;
  flex-shrink: 0;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%23fff' stroke-width='2' fill='%23fff' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-position: center;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
}
@media (max-width: 650px) {
  .product__close {
    margin-top: -26px;
    margin-right: 0;
  }
}

.product__overlay {
  width: 80%;
  display: none;
  overflow: hidden;
  height: 40px;
  background-color: red;
  flex-shrink: 0;
}

.container--detail .product:not(.product--active) {
  opacity: 0.3;
}
.container--detail .product:not(.product--active):hover {
  opacity: 0.7;
}

.container:not(.container--detail) .product:hover {
  box-shadow: 0 4px 0 0 var(--main-color) inset;
}

.container:not(.container--detail) .product:hover .product__img {
  transform: scale(1.07);
}
</style>

</head>
<body>

<div class="container">
  <div class="nav">
    <div class="logo">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92.91 92.91" fill="currentColor">
        <path d="M51.6 92.51v-1.63c.01-5.24.03-10.48.02-15.72 0-2.5-.94-3.53-3.47-3.52-3.63.01-7.19-.44-10.64-1.56-10.43-3.37-15.76-10.83-17.06-21.46-.19-1.57-.28-3.17-.32-4.75-.05-2.2.86-3.27 3.04-3.63.6-.1 1.21-.08 1.82-.08l33.56-.01c1.86 0 2.47-.81 1.47-2.38-2.69-4.23-6.38-7.18-11.55-7.44-4.53-.22-9.08-.04-13.62-.04-3.03 0-3.8-.75-3.83-3.81-.03-3.42-.02-6.84-.02-10.25v-1.94c-7.96.63-19.36 16.97-20.46 28.2a36.48 36.48 0 0030.58 39.65v10.4a44.47 44.47 0 01-24.01-10.1C7.3 74.38 1.53 63.99.26 51.34-2.64 22.7 19.45 2.22 41.2.36v16.55c.01 2.6.56 3 3.21 3.22 3.02.25 6.07.53 9 1.24 10.29 2.5 17.18 10.4 18.45 20.9a49 49 0 01.32 5.72c0 1.88-1.06 2.91-2.94 3.06-.7.06-1.4.03-2.1.03-10.87 0-21.73.04-32.59-.05-2.1-.02-2.85 1.22-1.68 3.06 2.53 3.94 6.13 6.38 10.77 6.77 4.18.36 8.4.23 12.61.32.8.01 1.6-.03 2.4.05 2.34.25 3.43 1.4 3.45 3.76.04 3.98.01 7.96.02 11.94 0 .53.09 1.07.15 1.8a31.76 31.76 0 008.28-5.53c6.46-5.9 10.48-13.2 11.59-21.86 1.51-11.88-2.06-22.19-10.56-30.67-5.18-5.17-11.47-8.3-18.63-9.73-.42-.08-1.08-.48-1.1-.75-.07-3.26-.04-6.52-.04-9.8 20.01 1.8 39.98 18.95 41.05 43.93a46.21 46.21 0 01-41.25 48.2z"></path>
      </svg>
    </div>
    <div class="nav__text">Specialized - Mountain Bikes</div>
    <div class="nav__cart"><span>3</span>
      <svg class="nav__shop" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24">
        <circle cx="9" cy="21" r="1"></circle>
        <circle cx="20" cy="21" r="1"></circle>
        <path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"></path>
      </svg>
    </div>
  </div>
  <div class="cover">山地自行车</div>
  <div class="product" data-index="0">
    <div class="product__close">关闭</div>
    <div class="product__new">新款</div><img class="product__img" src="//repo.bfw.wiki/bfwrepo/image/605059a3804c5.png"/>
    <div class="product__brand">TURBO LEVO</div>
    <div class="product__title">Turbo Levo SL Expert Carbon</div>
    <div class="product__price">$13,200</div>
    <div class="product__buttons" style="--delay: 0.2s">
      <div class="product__options">
        <button class="product__option">SML</button>
        <button class="product__option product__option--active">MED</button>
        <button class="product__option">LRG</button>
        <button class="product__option">XLG</button>
      </div>
      <button class="product__option product__add">添加购物车</button>
    </div>
    <div class="product__subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id error mollitia veritatis odio repudiandae. Suscipit dolorum sunt rem aspernatur saepe sint sequi aut quis. Doloribus neque laborum fugiat officiis quae.</div>
    <div class="product__subtitle product__subtitle--expanded" style="--delay: 0.3s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id error mollitia veritatis odio repudiandae. Suscipit dolorum sunt rem aspernatur saepe sint sequi aut quis. Doloribus neque laborum fugiat officiis quae.</div>
    <div class="product__subtitle product__subtitle--expanded" style="--delay: 0.4s">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod, quos? Nesciunt quibusdam corporis quo repellendus sequi. Molestiae repellendus ab vitae mollitia distinctio quod molestias quis, suscipit magni id ex in?Nostrum quibusdam, sunt deleniti vel sapiente modi tempore ea omnis non adipisci earum totam illo esse quo voluptatem dignissimos excepturi saepe! Minima vero consequatur eos laudantium deleniti architecto ducimus quia?</div>
    <div class="product__subtitle product__subtitle--expanded" style="--delay: 0.5s">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod, quos? Nesciunt quibusdam corporis quo repellendus sequi. Molestiae repellendus ab vitae mollitia distinctio quod molestias quis, suscipit magni id ex in?Nostrum quibusdam, sunt deleniti vel sapiente modi tempore ea omnis non adipisci earum totam illo esse quo voluptatem dignissimos excepturi saepe! Minima vero consequatur eos laudantium deleniti architecto ducimus quia?</div><img class="product__detail-img" src="//repo.bfw.wiki/bfwrepo/image/605059cbafcf5.png"/>
    <div class="product__table">
      <div class="product__table-title">TECHNICAL SPECIFICATIONS</div>
      <div class="product__table-row">
        <div class="product__table-cell">FRAME</div>
        <div class="product__table-cell">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae optio a illo, earum, iste doloribus, quo id itaque veniam sapiente unde officia impedit maxime facere.</div>
      </div>
      <div class="product__table-row">
        <div class="product__table-cell">SEAT BINDER</div>
        <div class="product__table-cell">Lorem ipsum dolor</div>
      </div>
      <div class="product__table-row">
        <div class="product__table-cell">REAR SHOCK</div>
        <div class="product__table-cell">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae optio a illo, earum, iste doloribus.</div>
      </div>
      <div class="product__table-row">
        <div class="product__table-cell">FORK</div>
        <div class="product__table-cell">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae optio a illo, earum, iste doloribus, quo id itaque veniam sapiente unde officia placeat non libero ducimus</div>
      </div>
      <div class="product__table-row">
        <div class="product__table-cell">STEM</div>
        <div class="product__table-cell">Quae optio a illo</div>
      </div>
      <div class="product__table-row">
        <div class="product__table-cell">HANDLEBARS</div>
        <div class="product__table-cell">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae optio a illo, earum, iste doloribus.</div>
      </div>
      <div class="product__table-row">
        <div class="product__table-cell">GRIPS</div>
        <div class="product__table-cell">Iste doloribus.</div>
      </div>
      <div class="product__table-row">
        <div class="product__table-cell">SADDLE</div>
        <div class="product__table-cell">Minima vero consequatur eos laudantium iste doloribus. Lorem ipsum dolor sit amet consectetur.</div>
      </div>
      <div class="product__option">ALL SPECIFICATIONS</div>
    </div>
    <div class="product__grid"><img src="//repo.bfw.wiki/bfwrepo/image/605059e14d271.png"/><img src="//repo.bfw.wiki/bfwrepo/image/605059cbafcf5.png"/><img src="//repo.bfw.wiki/bfwrepo/image/605059f06c59d.png"/></div>
    <div class="product__detail">查看详情</div>
  </div>
  <div class="product" data-index="1">
    <div class="product__close">Close</div>
    <div class="product__new">新款</div><img class="product__img" src="//repo.bfw.wiki/bfwrepo/image/605059a3804c5.png"/>
    <div class="product__brand">ENDURO</div>
    <div class="product__title">Powerfly FS 9 Equipped</div>
    <div class="product__price">$9,200</div>
    <div class="product__buttons" style="--delay: 0.2s">
      <div class="product__o.........完整代码请登录后点击上方下载按钮下载查看