如何删除圆角的副本

时间:2013-09-05 21:23:20

标签: html css

此代码

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

正在转弯。

我有一个带有上述4行的圆形滚轮。这类圆形转换器用于两个选择器部分和页脚。

现在我已经添加了四行,使得圆角成为此选择器

    nav li a:link, 
    nav li a:visited

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

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>

2 个答案:

答案 0 :(得分:2)

只需将该类添加到链接:

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

但是,我只写border-radius,没有供应商前缀; http://caniuse.com/border-radius

答案 1 :(得分: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;
}   
  • P.S - 请注意两条-moz行联合成@Sparky建议的行。我个人认为最好停止使用这个前缀,因为在最后20个版本的FF中已经没有必要了。