刪除的圖標邊框單擊菜單

Question

我成功創建了地鐵的菜單這裏：

不過，我有兩個問題/，我有問題：

1. 沒有呈現出邊境時，點擊上的項目，我不知道它來自哪裏。
2. 我如何可以添加在屏幕上爲中心的標題W/O影響圖標

也有很大的空間，在我的菜單底部，所以我想確保它只顯示我的菜單之間的適當空間。我在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; 
} 

我感謝你的幫助。謝謝！

Answer 1

當您:focus或鏈接爲:active時出現。它用於可訪問性目的。使用下面的CSS來擺脫它。

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

---

取出填充從那裏將擺脫底部空間和width和height替換它們：

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

---

創建<h1>或東西，定心，你可以使用以下包裝類：

@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; 
 
}

<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>

預覽

它顯示了這樣的對我來說：