删除图标上的边框单击菜单

时间:2016-06-14 13:12:16

标签: html css

我在这里成功创建了一个地铁菜单:

但是我有两个问题/问题:

  1. 点击商品时会显示边框,我不知道它来自哪里。
  2. 如何添加以屏幕为中心的标题,而不影响图标
  3. enter image description here

    我的菜单底部还有很大的空间,所以我想确保它只显示菜单之间的适当空间。我在body元素上添加了max-height但是没有用。有什么想法吗?

    这是我的CSS:

    @import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);
    
    body {
    font-family: 'Lato', sans-serif;
    background: #ecf0f1; 
    }
    
    a{ text-decoration: none; }
    h2 {  color: #fff; 
        font-size: 22px; 
        margin: 0 24px;
        font-weight: 300;
    }
    
    
    /*= ICON BOXES
    --------------------------------------------------------*/
    
    ul.icon-menu {margin-top: 16px;}
    li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
    li.icon-box.home {background: #2b99ce;}
    li.icon-box.design {background: #24cccd;}
    li.icon-box.coding {background: #9a639a;}
    li.icon-box.shop {background: #c44745;}
    li.icon-box.contact {background: #2d9a63;}
    .icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
    
    .icon-box a {display: block;}
    
    i.fa {
      position:absolute;
      pointer-events:none;
      color:white ;
      margin:16px 0 0 14px;
    }
    
    
    
    /*= TITLE BOXES
    --------------------------------------------------------*/
    .icon-box.home h2 { 
         z-index: -999;
         position: absolute; 
         top: 0; 
         left: 0; 
         opacity: 0; 
         background: #2b99ce; 
         line-height: 120px; 
         width: 120px; 
         -webkit-transition: all  .3s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
            border-left: 3px solid #247eaa;
    
    }
    
    .icon-box.home a:hover h2 { 
        opacity: 1; left: 120px; margin: 0;
        text-align: center;
    
    }
    
    .icon-box.design h2 { 
         z-index: -999;
         position: absolute; 
         top: 0; 
         left: 0; 
         opacity: 0; 
         background: #24cccd; 
         line-height: 120px; 
         width: 120px; 
         -webkit-transition: all  .3s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        border-left: 3px solid #1da7a8;
    }
    
    .icon-box.design a:hover h2 { 
        opacity: 1; left: 120px; margin: 0;
        text-align: center;
    
    }
    
    
    .icon-box.coding h2 { 
         z-index: -999;
         position: absolute; 
         top: 0; 
         left: 0; 
         opacity: 0; 
         background: #9a639a; 
         line-height: 120px; 
         width: 120px; 
         -webkit-transition: all  .3s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        border-left: 3px solid #6d466d;
    }
    
    .icon-box.coding a:hover h2 { 
        opacity: 1; left: 120px; margin: 0;
        text-align: center;
    
    }
    
    
    .icon-box.shop h2 { 
         z-index: -999;
         position: absolute; 
         top: 0; 
         left: 0; 
         opacity: 0; 
         background: #c44745; 
         line-height: 120px; 
         width: 120px; 
         -webkit-transition: all  .3s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        border-left: 3px solid #9b3735;
    }
    
    .icon-box.shop a:hover h2 { 
        opacity: 1; left: 120px; margin: 0;
        text-align: center;
    
    }
    
    .icon-box.contact h2 { 
         z-index: -999;
         position: absolute; 
         top: 0; 
         left: 0; 
         opacity: 0; 
         background: #2d9a63; 
         line-height: 120px; 
         width: 120px; 
         -webkit-transition: all  .3s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        border-left: 3px solid #1e6b44;
    }
    
    .icon-box.contact a:hover h2 { 
        opacity: 1; left: 120px; margin: 0;
        text-align: center;
    
    }
    
    
    
    /*= MENU ICONS
    --------------------------------------------------------*/
    
    
    span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat;  width: 32px; height: 32px; margin: 43px 40px;}
    span.icon.home { background-position: 0px 0px;}
    span.icon.aboutme { background-position: -36px 0px;}
    span.icon.portfolio { background-position: -72px 0px;}
    span.icon.blog { background-position: -109px 0px;}
    span.icon.contact { background-position: -145px 0px;}
    
    .icon-box a {
        padding: 120px;
    }
    
    .icon-menu i {
            border-radius: 50%;
            box-shadow: 0 0 0 50px transparent;
        padding: 0.2em 0.25em;
            background: rgba(255,255,255,0.1);
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -webkit-transition: box-shadow .6s ease-in-out;
            -moz-transition: box-shadow .6s ease-in-out;
            -o-transition: box-shadow .6s ease-in-out;
            -ms-transition: box-shadow .6s ease-in-out;
            transition: box-shadow .6s ease-in-out;
        }
    
    .icon-menu li:hover i,
    .icon-menu li:active i,
    .icon-menu li:focus i {     
            box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
            -webkit-transition: box-shadow .4s ease-in-out;
            -moz-transition: box-shadow .4s ease-in-out;
            -o-transition: box-shadow .4s ease-in-out;
            -ms-transition: box-shadow .4s ease-in-out;
            transition: box-shadow .4s ease-in-out;
    }
    

    感谢您的帮助。谢谢!

1 个答案:

答案 0 :(得分:1)

当您:focus或链接为:active时会显示。它是为了访问目的。使用以下CSS来摆脱它。

.icon-box a:focus,
.icon-box a:active {
  outline: none;
}

从那里删除填充将删除底部空格并将其替换为widthheight

.icon-box a {
  padding: 0;
  width: 120px;
  height: 120px;
}

创建<h1>或其他内容,您可以使用以下包装类:

&#13;
&#13;
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);
h2,
i.fa {
  color: #fff
}
.icon-box.design h2,
.icon-box.home h2 {
  z-index: -999;
  top: 0;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s
}
body {
  font-family: Lato, sans-serif;
  background: #ecf0f1
}
a {
  text-decoration: none
}
h2 {
  font-size: 22px;
  margin: 0 24px;
  font-weight: 300
}
ul.icon-menu {
  margin-top: 16px
}
li.icon-box {
  width: 120px;
  height: 120px;
  list-style: none;
  left: -47px;
  position: relative;
  margin-bottom: 3px
}
li.icon-box.home {
  background: #2b99ce
}
li.icon-box.design {
  background: #24cccd
}
li.icon-box.coding {
  background: #9a639a
}
li.icon-box.shop {
  background: #c44745
}
li.icon-box.contact {
  background: #2d9a63
}
.icon-box h2 {
  font-size: 20px;
  text-shadow: 1px 1px 2px rgba(150, 150, 150, 1)
}
.icon-box a {
  display: block;
  padding: 120px
}
i.fa {
  position: absolute;
  pointer-events: none;
  margin: 16px 0 0 14px
}
.icon-box.home h2 {
  position: absolute;
  left: 0;
  opacity: 0;
  background: #2b99ce;
  transition: all .5s;
  border-left: 3px solid #247eaa
}
.icon-box.home a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
.icon-box.design h2 {
  position: absolute;
  left: 0;
  opacity: 0;
  background: #24cccd;
  transition: all .5s;
  border-left: 3px solid #1da7a8
}
.icon-box.coding h2,
.icon-box.shop h2 {
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  z-index: -999;
  position: absolute;
  top: 0;
  line-height: 120px;
  width: 120px
}
.icon-box.design a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
.icon-box.coding h2 {
  left: 0;
  opacity: 0;
  background: #9a639a;
  transition: all .5s;
  border-left: 3px solid #6d466d
}
.icon-box.coding a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
.icon-box.shop h2 {
  left: 0;
  opacity: 0;
  background: #c44745;
  transition: all .5s;
  border-left: 3px solid #9b3735
}
.icon-box.shop a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
.icon-box.contact h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #2d9a63;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #1e6b44
}
.icon-box.contact a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
span.icon {
  display: inline-block;
  background: url(../img/icon-sprites.png) no-repeat;
  width: 32px;
  height: 32px;
  margin: 43px 40px
}
span.icon.home {
  background-position: 0 0
}
span.icon.aboutme {
  background-position: -36px 0
}
span.icon.portfolio {
  background-position: -72px 0
}
span.icon.blog {
  background-position: -109px 0
}
span.icon.contact {
  background-position: -145px 0
}
.icon-menu i {
  border-radius: 50%;
  box-shadow: 0 0 0 50px transparent;
  padding: .2em .25em;
  background: rgba(255, 255, 255, .1);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: box-shadow .6s ease-in-out;
  -moz-transition: box-shadow .6s ease-in-out;
  -o-transition: box-shadow .6s ease-in-out;
  -ms-transition: box-shadow .6s ease-in-out;
  transition: box-shadow .6s ease-in-out
}
.icon-menu li:active i,
.icon-menu li:focus i,
.icon-menu li:hover i {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .2);
  -webkit-transition: box-shadow .4s ease-in-out;
  -moz-transition: box-shadow .4s ease-in-out;
  -o-transition: box-shadow .4s ease-in-out;
  -ms-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out
}
.icon-box a:active,
.icon-box a:focus {
  outline: 0
}
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #000;
}
.icon-box a {
  padding: 0;
  width: 120px;
  height: 120px;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <ul class="icon-menu">
    <li class="icon-box home"> <i class="fa fa-home fa-4x"></i>
      <a href="#">
        <h2>Home</h2>
      </a>
    </li>
    <li class="icon-box design">
      <i class="fa fa-paint-brush fa-4x"></i>
      <a href="#">
        <h2>Design</h2>
      </a>
    </li>
    <li class="icon-box coding">
      <i class="fa fa-code fa-4x"></i>
      <a href="#">
        <h2>Coding</h2>
      </a>
    </li>
    <li class="icon-box shop">
      <i class="fa fa-shopping-cart fa-4x"></i>
      <a href="#">
        <h2>Shop</h2>
      </a>
    </li>
    <li class="icon-box contact">
      <i class="fa fa-envelope fa-4x"></i>
      <a href="#">
        <h2>Contact</h2>
      </a>
    </li>
  </ul>
  <div class="center">
    <h1>Hello</h1>
    <h2>How are you?</h2>
</div>
&#13;
&#13;
&#13;

预览

它对我来说就是这样:

enter image description here