0

这段代码是

   -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  -webkit-border-radius: 3px 3px 0px 0px;
   border-radius: 3px 3px 0px 0px;

正在制作圆角。

我有一个具有上述 4 行的类圆形记录器。此类 roundcorder 用于两个选择器部分和页脚。

就像现在一样，我已经添加了四行使圆角到这个选择器

    nav li a:link, 
    nav li a:visited

这将导致我不想要的代码重复。所以我的问题是我如何才能使用选择器中的类roundcorder

nav li a:link, 
nav li a:visited

这是完整的标记和 css

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Inlämningsuppgift 1</title>
      <style type = "text/css">
         body
         {
            font-size:small;
            width:72em;
            text-align:center;
            background : #87a5be url(bg.jpg) no-repeat right bottom fixed;
            background-repeat:no-repeat;
            margin:0;
            padding:0;
            margin:0.2em auto;
         }

        .roundcorder
        {
           -moz-border-radius-topleft: 3px;
          -moz-border-radius-topright: 3px;
          -webkit-border-radius: 3px 3px 0px 0px;
           border-radius: 3px 3px 0px 0px;
        }

        header img
        {
           float:left;
        }

        header time
        {
           font-size:120%;
           float:right; 
           font-weight:bold;
        }

        header div:after, 
        nav:after
        {
           content :".";
           display:block;
           height:0;
           clear:both;
           visibility:hidden;
        }

        nav
        {
           margin-top:1em;
           font-weight:bold;
           color:#fff; 
        }

        nav ul
        {
           list-style:none;
           margin:0;
           padding:0;
        }

        nav li
        {
           float: left;
           min-width : 8em;
           text-align : center;   
           margin-right:0.5em; 
       }

       nav li a:link, 
       nav li a:visited
       {
           background-color: rgba(255,255,255,0.4);
           color: rgb(0,0,0);
           text-decoration: none;
           display: block;
           padding: 0.75em;
           -moz-border-radius-topleft: 3px;
           -moz-border-radius-topright: 3px;
           -webkit-border-radius: 3px 3px 0px 0px;
           border-radius: 3px 3px 0px 0px;
        }   

        #info nav li.info a:link, 
        #info nav li.info a:visited
        {
           background-color: #fff;
        }

        nav li a:hover 
        {
           background-color:grey;  
        }

        .content 
        {
           background-color: #fff;
           color: #000;
           padding: 0.2em;
        }

        .content h1
        {
           font-size:200%;
        }

        .content p
        {
           text-align:left;
           font-size:110; 
           padding:0.5em;
        }

        footer
        {
           background:#e3e3e3;
        }

        footer p
        {
           text-align:left;
        }
      </style>
   </head>

   <body id="info">
      <header>
         <div>
            <img src="logo.jpg" alt="Euro travel logo"  />
            <time>2013-09-05 16:00</time>
         </div>

         <nav>
            <ul>
               <li class="info"><a href="#">Information</a></li>
               <li class="tidtabell"><a href="#">Tidtabell</a></li>
               <li class="bokning"><a href="#">Bokning</a></li>
               <li class="kontakt"><a href="#">Kontakt</a></li>
            </ul>
         </nav>
      </header>

      <section class="content roundcorder">
         <h1>Välkommen till flygbolagets Euro Travel hemsida</h1>
         <p> Här kommer jag senare att fylla på med mer information.</p>
      </section>

      <footer class="roundcorder">
         <h4>&copy copyright</h4>
         <p>Flygbolaget Euro Travel är ganska nytt med sitt huvudkontor i Stockolm. 
            Euro Travel har som målsättning att bli värdsledande inom 3 år.</p> 
         <p> De har nyligen infört ett poängsystem
           som innebär att ju mer du flyger dessto fler poäng får du som du kan använda 
           vid  nästa flygbiljett.
          Dessutom ehålls alltid 20% rabatt om du köper en biljett 3månader före avresan.
         </p>

         <address>Adress: Euro Travel 
           <br />Kundservice Kungsgatan 123 45 Stockhom
           Email:EuroTravel@travel.se <br />
           Tel:08-57 27 489<br />
           www.eurotravel.se
         </address>
      </footer>
   </body>
</html>
4

2 回答 2

2

只需将类添加到链接中：

<li class="info roundcorder"><a href="#">Information</a></li>

但是，我只写border-radius，不带供应商前缀；http://caniuse.com/border-radius

于 2013-09-05T21:26:38.053 回答
0

如果您不使用动态样式表语言，例如LESS，这是唯一的方法：

.roundcorder,
nav li a:link, 
nav li a:visited
{
   -moz-border-radius: 3px 3px 0 0;
   -webkit-border-radius: 3px 3px 0px 0px;
   border-radius: 3px 3px 0px 0px;
}

nav li a:link, 
nav li a:visited
{ 
   background-color: rgba(255,255,255,0.4);
   color: rgb(0,0,0);
   text-decoration: none;
   display: block;
   padding: 0.75em;
}
  • PS - 请注意-moz像@Sparky 所建议的那样将两条线合二为一。我个人认为完全停止使用这个前缀是可取的，因为在最后 20 个版本的 FF 左右已经不需要它了。
于 2013-09-05T21:26:51.890 回答