css自适应个人简历页面效果-html代码-BFW代码库

css自适应个人简历页面效果

代码语言：html

代码描述：css自适应个人简历页面效果

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


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

<style>
*,
*::before,
*::after {
    box-sizing: border-box;

}

/* Custom Properties, update these for your own design */

:root {
    --ff-primary: 'Lato', sans-serif;
    --ff-secondary: 'Lato', sans-serif;

    --fw-reg: 300;
    --fw-bold: 700;

    --clr-light: #fff;
    --clr-dark: #4d4646;
    --clr-accent: #0081AF;

    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;

    --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25),
          0.125em 0.125em 0.25em rgba(0,0,0,.15);
}

@media (min-width: 800px) {
    :root {
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.125rem;
    }
  
    
   
  
}

/* General styles */
html{
scroll-behavior:smooth;
}
body {
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
}

section {
    padding: 5em 2em;
}

img {
    display: block;
    max-width: 100%;
}

strong { font-weight: var(--fw-bold) }

:focus {
    outline: 3px solid var(--clr-accent);
    outline-offset: 3px;
}

/* Buttons */

.btn {
    display: inline-block;
    padding: .5em 2.5em;
    background: var(--clr-accent);
    color: var(--clr-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: var(--fw-bold);
    transition: transform 20.........完整代码请登录后点击上方下载按钮下载查看