给index.html文件中的内容添加样式

相顾不得体

于 2024-07-06 14:05:07 发布

阅读量407

点赞数 10

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_61913550/article/details/140228553

版权

根据下列要求，给index.html文件中的内容添加样式。

给body和container设置背景色，并使得容器居中显示。
给大标题“第一卷一个正直的人”设置颜色，字体为斜体，文字居中。
作者“维克多·雨果”设置文字居中，并在文字附近添加作者图标。
给正文文本添加浅红色阴影，并且每一段落首行缩进两个字符。放大段落第一个文字，将文字颜色设置为红色，段落首行字体加粗。
为第一段文本中的人名添加下划线，并且鼠标悬浮改变字体颜色，光标样式显示为一只手。
为注释部分的文本添加样式：缩小字体大小，改变字体颜色（为灰色）。第一条注释的英文全部转换为大写。为奇数条注释添加红色双实线类型的下划线。
给全文设置适当的行高和边距。

注：具体颜色可以用工具拾取，或者颜色相近即可。页面效果如上图。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      background-color: rgb(231, 228, 213);
      line-height: 30px;
    }
    .container{
      background-color: rgb(253, 253, 253);
      width: 800px;
      height: 1000px;
      margin: 0 auto;
    }
    h1{
      color: rgb(134, 115, 92);
      font-style: italic;
      text-align: center;
    }
    h4{
      text-align: center;
    }
    p{
      text-shadow: 1px 1px 1px rgb(240, 93, 105);
      text-indent: 2em;
      
    }
    .container>p::first-letter{
      color: red;
      font-size: 25px;
    }
    .container>p::first-line{
      font-weight: 800;
    }
    span{
      text-decoration: underline;
    }
    span:hover{
      color: rgb(45, 164, 228);
      cursor: pointer;
    }
    .note{
      font-size: x-small;
      color: rgb(122, 138, 145);
      text-transform: uppercase;
    }
    .note>p:nth-child(odd){
      text-decoration: underline double red;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>第一卷　一个正直的人</h1>
    <h4>维克多·雨果<svg t="1720146807592" class="icon" viewBox="0 0 2267 1024" version="1.1" 
      xmlns="http://www.w3.org/2000/svg" p-id="4258" width="25" height="25"><path d="M2121.142857 0a146.285714 146.285714 0 0 1 146.285714 146.285714v731.428572a146.285714 146.285714 0 0 1-146.285714 146.285714H146.285714a146.285714 146.285714 0 0 1-146.285714-146.285714V146.285714a146.285714 146.285714 0 0 1 146.285714-146.285714h1974.857143z m0 36.571429H146.285714a109.714286 109.714286 0 0 0-109.714285 109.714285v731.428572a109.714286 109.714286 0 0 0 109.714285 109.714285h1974.857143a109.714286 109.714286 0 0 0 109.714286-109.714285V146.285714a109.714286 109.714286 0 0 0-109.714286-109.714285z" fill="#FF6C18" p-id="4259"></path><path d="M680.813714 273.554286h47.396572v619.666285h64.073143v-204.507428h261.558857v-60.562286h-261.558857V479.817143h256.292571v-61.44h-256.292571V273.554286h294.912V211.236571H708.022857c14.043429-35.986286 28.086857-74.605714 42.130286-114.980571l-63.195429-14.043429c-49.152 148.333714-113.225143 268.580571-190.464 359.862858l44.763429 53.540571c52.662857-63.195429 99.181714-136.923429 139.556571-222.061714z m-280.868571 126.390857v493.275428h64.950857V305.152a1066.496 1066.496 0 0 0 88.649143-192.219429l-59.684572-28.086857c-43.008 133.412571-112.347429 251.026286-207.140571 353.718857l21.065143 66.706286a1041.590857 1041.590857 0 0 0 92.16-105.325714z m861.915428-221.184v58.806857h240.493715v104.448h-318.610286v59.684571h399.36c-124.635429 71.972571-261.558857 126.390857-411.648 161.499429l26.331429 58.806857a4105.874286 4105.874286 0 0 0 147.456-50.907428v322.998857h64.073142v-39.497143h380.050286v39.497143h63.195429v-394.971429h-331.776c50.907429-23.698286 97.426286-47.396571 137.801143-71.972571l39.497142-25.453715h267.702858V342.016h-187.830858c58.806857-47.396571 114.102857-102.692571 165.888-164.132571l-48.274285-35.108572a1182.610286 1182.610286 0 0 1-217.673143 199.241143h-110.592V237.568h207.140571V178.761143h-207.140571V85.723429H1502.354286v93.037714h-240.493715z m147.456 523.995428h380.050286v95.670858H1409.316571v-95.670858z m380.050286-56.173714H1409.316571v-92.16h380.050286v92.16z" fill="#FF6C18" p-id="4260"></path></svg>
</h4>
    <p>一八一五年，迪涅①的主教是<span>查理·佛朗沙·卞福汝·米里哀</span>先生。他是个七十五岁左右的老人；从一八○六年起，他已就任迪涅区主教的职位。</p>
    <p>虽然这些小事绝不触及我们将要叙述的故事的本题，但为了全面精确起见，在此地提一提在他就任之初，人们所传播的有关他的一些风闻与传说也并不是无用的。大众关于某些人的传说，无论是真是假，在他们的生活中，尤其是在他们的命运中所占的地位，往往和他们亲身所作的事是同等重要的。米里哀先生是艾克斯法院的一个参议的儿子，所谓的司法界的贵族。据说他的父亲因为要他继承②那职位，很早，十八岁或二十岁，就按照司法界贵族家庭间相当普遍的习惯，为他完了婚。米里哀先生虽已结婚，据说仍常常惹起别人的谈论。他品貌不凡，虽然身材颇小，但是生得俊秀，风度翩翩，谈吐隽逸；他一生的最初阶段完全消磨在交际场所和与妇女们的厮混中。革命③爆发了，事变叠出，司法界贵族家庭因受到摧毁，驱逐，追捕而东奔西散了。米里哀先生，当革命刚开始时便出亡到意大利。他的妻，因早已害肺病，死了。他们一个孩子也没有。此后，他的一生有些什么遭遇呢？法国旧社会的崩溃，他自己家庭的破落，一般流亡者可能因远道传闻和恐怖的夸大而显得更加可怕的九三年①的种种悲剧，是否使他在思想上产生过消沉和孤独的意念呢？一个人在生活上或财产上遭了大难还可能不为所动，但有时有一种神秘可怕的打击，打在人的心上，却能使人一蹶不振；一向在欢乐和温情中度日的他，是否受过那种突如其来的打击呢？没有谁那样说，我们所知道的只是：他从意大利回来，就已经当了教士了。</p>
    <div class="note">
      <p>①迪涅（Digne）在法国南部，是下阿尔卑斯省的省会。</p>
      <p>②当时法院的官职是可以买的，并可传给儿孙。</p>
      <p>③指一七八九年法国资产阶级革命。</p>
      <p>④一七九三年是革命达到高潮的一年。</p>
    </div>
  </div>
</body>
</html>