css实现自适应响应式图文卡片排列效果代码
代码语言:html
所属分类:响应式
代码描述:css实现自适应响应式图文卡片排列效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> section.card { background: #f6f6f6; border-radius: 24px 24px 24px 48px; padding: 48px 48px 48px 308px; margin: 84px 0; width: 60vw; max-width: 920px; min-width: 640px; display: flex; flex-direction: row; align-self: flex-start; position: relative; box-shadow: 5px 0 0 0 rgba(204, 204, 204, 0.3), -5px 0 0 0 rgba(204, 204, 204, 0.3), 0 5px 0 0 rgba(204, 204, 204, 0.3); } section.card .text-content { display: flex; flex-direction: column; width: calc(60vw - 192px); } section.card .text-content h3 { margin: 0; font-size: 1.5em; max-width: 20ch; } section.card .text-content p { margin: 16px 0 24px; max-width: 36ch; } section.card .text-content a { border: 3px solid #000; color: #000; align-self: flex-start; text-decoration: none; padding: 16px 32px; border-radius: 12px; transition: 400ms all; } section.card .text-content a:hover { background: #000; color: white; } section.card .visual { width: 240px; height: 100%; position: absolute; top: -24px; left: 24px; overflow: hidden; border-radius: 24px; box-shadow: 1px 2px 6px rgba(255, 255, 255, 0.25), 2px 6px 12px rgba(0, 0, 0, 0.25); } section.card .visual img { height: 110%; } section.card:nth-of-type(odd) { margin: 0 0 0 248px; border-radius: 24px 24px 48px 24px; padding: 48px 308px 48px 60px; } section.card:nth-of-type(odd) .visual { right: 24px; left: auto; } section.card:nth-of-type(odd) .text-content a { align-self: flex-start; } article { margin: auto; display: block; width: calc(60vw + 248px); max-width: calc(920px + 248px); min-width: calc(640px + 248px); } body { margin: 0; padding: 96px; font-size: 21px; background: #fff; color: #000; font-family: "gelica", sans-serif; font-weight: 400; font-style: normal; } @media all and (max-width: 1100px) { body { padding: 96px 48px 24px; } article { width: 100%; max-width: 100%; min-width: 100%; } section.card { width: 100%; max-width: 100%; min-width: 100%; } section.card .text-content { width: 100%; } section.card:nth-of-type(odd) { margin: 0; } } @media all and (max-width: 720px) { body { padding: 48px 24px 0; } section.card { margin: 64px 0; padding: 88px 36px 36px; flex-direction: column; border-radius: 24px; } section.card:nth-of-type(odd) { padding: 88px 36px 36px; border-radius: 24px; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0