Question

好的，所以我正在做一个任务，它希望我使用以下指示将css添加到文件中：

水平导航列表

背景颜色= rgb（0,0,0）
文字颜色= rgb（255,255,255）
粗体字
字体= 10像素
字距= 3像素
VI。悬停= rgb（255,0,0）

垂直导航列表
左边填充= 0像素
没有列表样式
缩进文字5像素
行高= 3 em
文字颜色= rgb（0,0,0）
悬停=下划线，颜色= rgb（255,64,64）

所以我编写了我的代码，但是当我运行它时，它看起来与下面的站点图片完全不同。我做错了什么？

nav.horizontal li {

background-color:rgb(0,0,0);
color: rgb(255,255,255);
font-weight: bold;
font-size:10px;

text-decoration: none;
float:left;
}

nav.horizontal li {
    letter-spacing:3px;
}
nav.horizontal li a:hover {
    color:(255,0,0)
}

nav.vertical li{

padding-left: 0px;
list-style: none;
text-indent: 5px;
line-height: 3em;
color: rgb(0,0,0)
}

 nav.vertical li:hover{
 color: rgb(255,64,64);
 text-decoration: underline;
 }

这是我的HTML表格

  <meta charset="UTF-8" />
  <title>The Gresham Children's Choir</title>

  <link href="gcc_styles.css" rel="stylesheet" type="text/css">

  <header>
     <h1><img src="proj2gcclogo.png" alt="Gresham's Children Choir" /></h1>
  </header>

  <nav class="horizontal">
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News &amp; Events</a></li>
        <li><a href="#">Bookings</a></li>
        <li><a href="#">Members Only</a></li>
        <li><a href="#">Support GCC</a></li>
     </ul>
  </nav>

  <nav class="vertical">
     <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Achievements</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Board</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Audio</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#">Youth Choir</a></li>
        <li><a href="#">Boy's Choir</a></li>
        <li><a href="#">Girl's Choir</a></li>
        <li><a href="#">Mixed Choir</a></li>
        <li><a href="#">Touring Choir</a></li>
     </ul>
  </nav>

  <section>
     <h1>About the GCC</h1>
     <p>
        Founded in 1965, the Gresham Children's Choir seeks to enhance 
        the musical development of children by instilling in them a love of
        ensemble singing. By striving for artistic excellence 
        and learning a diverse repertory of choral literature, our children
        build self-confidence and learn the joys of working together
        to create beautiful music for an appreciative audience.
     </p>

     <article>
        <h2>Artistic Director</h2>
        <img src="proj2chen.png" alt="photo" />
        <p>
           Born and raised in eastern Ohio, David Chen studied conducting, 
           voice, and piano at the University of Southern California's Thornton 
           School of Music. David returned to Gresham two years ago to take
           over direction of the GCC. The children appreciate David's demand
           for quality performances while still maintaining a fun and playful
           atmosphere.
        </p>
        <p>As a performer, he has sung in Los Angeles with the USC Thornton 
           Choral Artists under the direction of Helen Von Allen. He has
           also been working on a project to edit and perform the 
           sacred works of Hildegard of Bingen. Look for the premier
           of his efforts next summer.
        </p>
     </article>

  </section>

  <aside>
     <h2>Hear the Buzz</h2>
     <blockquote>
        <p>The Gresham Children's Choir, Boychoir, under the direction of 
          David Chen, is an outstanding cultural asset to our city. I've enjoyed
          working with them in past and look forward to future concerts
          together.<br />
          <cite>&mdash; Andrew Pauls, Director of Gresham Civic Opera</cite>
        </p>
     </blockquote>
     <blockquote>
        <p>These children are <em>artists!</em>. Don't miss them!<br />
          <cite>&mdash; Gresham Journal</cite>
        </p>
     </blockquote>
  </aside>


  <footer>
     <address>
        Gresham Children's Choir &#183;
        Mentor, OH 44061 &#183;
        (440) 555-3811
     </address>
  </footer>

垂直和水平导航css

0 个答案: