1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>LOL</title>
    8.     <style>
    9.         body {
    10.                /* 设置背景颜色 */
    11.             /* background-color: pink; */
    13.                /* 设置背景图 */
    14.             /* background-image: url("imgs/zhihu.png"); */
    16.               /* 是否重复图片铺满标签 */
    17.             /* background-repeat: no-repeat; */
    19.           /* 背景图位置 */
    20.           /* background-position: center -10px; */
    23.           /* 背景图大小：contain、cover */
    24.             /* background-size: 1150px; */
    26.             /* 默认背景滚动：scroll  不滚动背景图：fixed  */
    27.             /* background-attachment: fixed; */
    29.             /* 综合写法 */
    30.             background: pink url(imgs/zhihu.png) no-repeat fixed center center;
    31.             background-size: cover;
    32.         }
    34.         /* 半透明背景 */
    35.         /* div {
    36.             height: 350px;
    37.             color: #000;
    38.             background:rgba(0, 0, 0, 0.5) url('imgs/油菜花.jpg') no-repeat;
    39.             background-attachment:fixed;
    41.                   背景图平铺，和cover的区别在于cover在不失真的情况下，保证宽高和标签相等
    42.                   会截取部分图片。而contain在保证一个宽或者高相等即可。
    43.             background-size: contain;
    44.         } */
    46.         /* 设置文字凸起，文字凹入只需要将 */
    47.         div p:first-child {
    48.             font: normal 700 48px "微软雅黑";
    49.             color: white;
    50.             text-shadow: 1px 1px 1px rgba(17, 5, 15, 0.3), -1px -1px 1px rgba(17, 5, 15, 0.3);
    51.             /* background-color: grey; */
    52.         }
    54.         div p {
    55.             font: 700 18px "微软雅黑";
    56.         }
    58.         a {
    59.             /* 标签的宽高 */
    60.             width: 200px;
    61.             height: 20px;
    63.             /* 以行内块标签显示，使宽高设置生效 */
    64.             display: inline-block;
    66.             /* 设置标签内文本字体和颜色 */
    67.             font: normal 700 18px "微软雅黑";
    68.             color: rgb(108, 6, 224);
    70.              /* 使用line-height与height相等使文字垂直居中 */
    71.             line-height: 20px;
    72.             /* 文字水平居中 */
    73.             text-align: center;
    75.             /* 上划线: overline  下划线underline 删除线 line-through*/
    76.             text-decoration: none;
    78.             /* 设置边框宽度、风格、颜色 */
    79.             border: 1px dashed white;
    80.         }
    82.         /* 当鼠标经过时显示背景图片 */
    83.         a:hover {
    84.             background-image: url('imgs/油菜花.jpg');
    85.             background-size: cover;
    86.             color: olivedrab;
    87.         }
    88.     </style>
    89. </head>
    91. <body>
    93.     <a href="#">首页</a>
    94.     <a href="#">故事</a>
    95.     <a href="#">诗歌</a>
    96.     <a href="#">小说</a>
    99.     <div>
    100.         <p>我是段落</p>
    101.         <p>我是段落</p>
    102.         <p>我是段落</p>
    103.         <p>我是段落</p>
    104.         <p>我是段落</p>
    105.         <p>我是段落</p>
    106.         <p>我是段落</p>
    107.         <p>我是段落</p>
    108.         <p>我是段落</p>
    109.         <p>我是段落</p>
    110.         <p>我是段落</p>
    111.         <p>我是段落</p>
    112.         <p>我是段落</p>
    113.         <p>我是段落</p>
    114.         <p>我是段落</p>
    115.         <p>我是段落</p>
    116.         <p>我是段落</p>
    117.         <p>我是段落</p>
    118.         <p>我是段落</p>
    119.         <p>我是段落</p>
    120.         <p>我是段落</p>
    121.         <p>我是段落</p>
    122.     </div>
    124. </body>
    126. </html>

    image.png