css产品服务列表页效果代码
代码语言:html
所属分类:布局界面
代码描述:css产品服务列表页效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@charset "UTF-8";
: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: "";
/* 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: flex;
align-items: self-start;
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;
transform: translateY(11rem);
z-index: 1;
background-image: url("//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png");
}
@media (min-width: 40.625em) {
.c-section__title:after {
margin-left: auto;
margin-right: 0;
transform: translateY(2rem);
}
}
.c-section span:before {
content: "";
display: block;
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 200%;
transform: skew(0deg, 10deg);
z-index: -1;
background: var(--color-brand-primary);
background-attachment: fixed;
background-image: url("index.svg");
}
@media (min-width: 40.625em) {
.c-section span:after {
font-size: 23%;
}
}
@media (min-width: 40.625em) {
.c-section span:after {
width: 47ch;
}
}
@media (min-width: 48em) {
.c-section span:after {
width: 57ch;
}
}
@media (min-width: 62em) {
.c-section span:after {
width: 67ch;
}
}
.c-services {
display: grid;
grid-gap: var(--s2);
margin: 0 c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0