【无标题】html作业问题

最新推荐文章于 2024-06-14 14:51:07 发布

不会咋办

最新推荐文章于 2024-06-14 14:51:07 发布

阅读量228

点赞数 2

文章标签： html css css3

本文链接：https://blog.csdn.net/qq_43201652/article/details/126103962

版权

标题间隔
&#12288==一个中文空格

渐变色背景
background-image: -webkit-linear-gradient(top, rgb(0, 247, 255,1), rgb(0, 229, 255,0));

提取图片颜色
ctrl+alt+a，鼠标指向要提取的颜色，会显色该颜色的rgb值，按c复制下来

给字体设置阴影
text-shadow: 5px 2px 6px gray;

字体倾斜
font-style: italic;

给段落加下划线
text-decoration: underline;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box{
        width:fit-content;
        height:fit-content;
        background-image: -webkit-linear-gradient(top, rgb(0, 247, 255,1), rgb(0, 229, 255,0));
       }
       div{
        font-size: 20px;
        color: black;
       }
       @font-face {
      /* 你给字体起的名字 */
      font-family:'xiyangyang' ;
      /* 引入字体的路径 */
      src: url(../../字体/MeowScript-Regular.ttf);
    }

    
    .p1{
        color: rgb(9,108,160);
      font-size: 40px;
      font-family:'xiyangyang';
      text-shadow: 5px 2px 6px gray;
      font-style: normal;
    }

    .p2{
        color: gray;
      font-size: 30px;
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      text-shadow: 5px 2px 6px gray;
    }

    .p3{
        color: rgb(103,45,230);
      font-size: 40px;
      font-family:'xiyangyang';
      text-shadow: 5px 2px 6px gray;
      font-style: normal;
    }

    .p4{
        color: blue;
      font-size: 35px;
      font-family:'xiyangyang';
      
      font-style: italic;
    }

    .p5{
        color: green;
        text-decoration: underline;
    }

    </style>
</head>
<body>
    <div class="box">
        <center><h1><span class="p1">初相遇</span>&#12288 <span class="p2">文/席慕容</span></h1></center>
        
    <div>
        <p><span class="p3">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常</p>
        <p>在最没能料到的时刻里出现。</p>
    </div>
    <br>
    <div>
        <p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可</p>
        <p>以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然</p>
        <p>都能重回时的狂喜与感激。<span class="p4">胸怀中满溢着幸</span></p>
        <p><span class="p4">福，只因你就在我眼前</span>，对我微笑，一如当</p>
        <p>年。</p>
    </div>
    <br>
    <div>
        <p class="p5">我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳</p>
        <p class="p5">草鲜美，落落英缤纷，好像你我才初相遇。</p>
    </div>
    </div>

</body>
</html>