自适应响应式服务页面布局效果-html代码-BFW代码库

代码语言：html

所属分类：响应式

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --color-brand-primary: hsl(var(--color-brand-primary-h), 43%, 43%);
  --color-brand-primary-h: 251;
  --color-brand-primary-s: 43%;
  --color-brand-primary-l: 43%;
  --color-brand-accent: hsl(var(--color-brand-accent-h), 96%, 61%);
  --color-brand-accent-h: 16;
  --color-brand-accent-s: 96%;
  --color-brand-accent-l: 61%;
  --color-brand-accent-bg: hsl(calc(var(--color-brand-accent-h) + 17), 100%, 96%);
  --ratio: 1.4;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: calc(1.05rem + 0.333vw);
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  font-size: 62.5%;
  line-height: 1.6;
  box-sizing: border-box;
}
@media (min-width: 40.625em) {
  :root {
    --s0: calc(1.25rem + 0.333vw);
  }
}
@media (min-width: 48em) {
  :root {
    --s0: calc(1.4rem + 0.333vw);
  }
}
@media (min-width: 62em) {
  :root {
    --s0: calc(1.6rem + 0.333vw);
  }
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-size: 1.4rem;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  background-color: white;
  min-height: 100vh;
}
@media (min-width: 48em) {
  body {
    font-size: 1.5rem;
  }
}

@supports (font-variation-settings: normal) {
  body {
    font-family: "Inter var", sans-serif;
  }
}
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
}
ul li {
  /* Remove li Bullets with zero-width space for accessability */
  list-style-type: none;
}
ul li:before {
  content: "\200B";
  /* add zero-width space */
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  position: absolute;
}

.c-section {
  padding: 0 var(--s3);
}
.c-section__title {
  padding: var(--s2) var(--s3) calc(var(--s6) * 1.8);
  margin: 0 calc(var(--s3) * -1);
  color: #fff;
  font-size: var(--s4);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-align: center;
}
@media (min-width: 40.625em) {
  .c-section__title {
    padding: var(--s2) var(--s3) var(--s4);
  }
}
@media (min-width: 40.625em) {
  .c-section__title {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: self-start;
            align-items: self-start;
    -webkit-box-pack: end;
            justify-content: flex-end;
    position: relative;
    text-align: unset;
  }
}
.c-section__title:after {
  content: '';
  display: block;
  background-size: calc(var(--s5) * 3) calc(var(--s5) * 3);
  width: calc(var(--s5) * 3);
  height: calc(var(--s5) * 3);
  background-repeat: no-repeat;
  background-position: center;
  margin-left: auto;
  margin-right: auto;
  -webkit-transform: translateY(11rem);
          transform: translateY(11rem);
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='aadef149-4ba5-4382-9e09-7df651a328a5' data-name='Layer 1' width='704' height='745.19433' viewBox='0 0 704 745.19433' class='injected-svg modal__media modal__lg_media' data-src='https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/mobile_web_2g8b.svg'%3E%3Ctitle%3Emobile_web%3C/title%3E%3Cpath d='M344.69391,661.25125l-8.38722-33.073A429.46111,429.46111,0,0,0,290.74208,611.834l-1.05792,15.37062L285.39,610.2712c-19.202-5.482-32.265-7.89648-32.265-7.89648s17.64872,67.09731,54.6606,118.39272l43.124,7.57249-33.50125,4.83219A173.75069,173.75069,0,0,0,332.395,749.05228c53.84043,49.96979,113.80669,72.89422,133.93843,51.20309s-7.1946-79.78376-61.035-129.75355c-16.69106-15.49113-37.65818-27.92221-58.646-37.70546Z' transform='translate(-248 -77.40283)' fill='%23fb6f3c'/%3E%3Cpath d='M424.44317,625.32976l9.91563-32.64732a429.46451,429.46451,0,0,0-30.557-37.54385L394.9511,567.7497l5.07688-16.71545c-13.60408-14.61837-23.53857-23.43755-23.53857-23.43755s-19.57459,66.561-14.40543,129.60362l33.00186,28.77326L363.9095,672.79331a173.75138,173.75138,0,0,0,4.62073,21.34072c20.26038,70.60659,59.74453,121.22757,88.19038,113.06511s35.08143-72.01738,14.821-142.624c-6.28092-21.88874-17.80407-43.36822-30.71362-62.59176Z' transform='translate(-248 -77.40283)' fill='%23fb6f3c'/%3E%3Cellipse cx='352' cy='727.19433' rx='352' ry='18' fill='%233f3d56'/%3E%3Cpath d='M805.65354,250.35009h-3.99878V140.80476a63.40186,63.40186,0,0,0-63.40205-63.40193H506.16627a63.40186,63.40186,0,0,0-63.402,63.40193V741.77894a63.40186,63.40186,0,0,0,63.402,63.40193H738.25271a63.40186,63.40186,0,0,0,63.40205-63.40193V328.32631h3.99878Z' transform='translate(-248 -77.40283)' fill='%233f3d56'/%3E%3Cpath d='M788.16,141.24713v600.09a47.3508,47.3508,0,0,1-47.35,47.35H507.61a47.35084,47.35084,0,0,1-47.35-47.35v-600.09a47.35089,47.35089,0,0,1,47.35-47.35H535.9a22.50661,22.50661,0,0,0,20.83,30.99H689.69a22.50673,22.50673,0,0,0,20.83-30.99h30.29A47.35084,47.35084,0,0,1,788.16,141.24713Z' transform='translate(-248 -77.40283)' fill='%23fff'/%3E%3Cpath d='M788.16,612.40716v128.93a47.3508,47.3508,0,0,1-47.35,47.35H507.61a47.35084,47.35084,0,0,1-47.35-47.35v-116.36a222.97136,222.97136,0,0,1,327.9-12.57Z' transform='translate(-248 -77.40283)' fill='%23e6e6e6'.........完整代码请登录后点击上方下载按钮下载查看