背景導航欄

的按鈕，我有了一個存儲按鈕的這樣的形象 psd design 背景導航欄

背景的PSD設計，但我不能編寫代碼的時候是完全一樣的PSD設計。這是我的代碼：

<nav class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <div class="collap"></div> 
       <div class="collap" style="width : 10px"></div> 
       <div class="collap" style="width : 14px"></div> 
       </button> 
       <a class="navbar-brand" href="#"><img src="image/logo.png" alt="Pixels logo"/></a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#">HOME <span class="sr-only">(current)</span></a></li> 
       <li><a href="#">ABOUT US</a></li> 
       <li><a href="#">FEATURES</a></li> 
       <li><a href="#">RESERVE</a></li> 
       <li><a href="#">CONTACT US</a></li> 
       <li class="back"><a href="#">STORE</a></li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
     </nav>

CSS代碼

.back { 
background-color: #3dc1f1; 
border-radius: 5px; 
height: 48px; 
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.15); 
}

，這是我的輸出 my output

來源

2016-12-02 Beginner1

所以有什麼問題？ – RSSM

看起來和我很相似。只是按鈕的高度看起來不對，文字不同。如果你剛剛開始從設計師手中開始HTML和CSS，那麼你將有一段時間試圖獲得像素完美（從我這裏拿走）。我最好的建議是溝渠像素>像素轉換，特別是涉及到文本。不要這麼想，只需使用鉻檢查器將其更改爲看起來像您的設計的東西。像素不能通過不同的設備/屏幕尺寸進行轉換。所以讓它看起來夠好。 – ntgCleaner

試試這個代碼

ul li a{ 

font-size:15px; 

text-decoration:none; 

}

希望這有助於！

文卡特

來源

2016-12-02 20:27:04 Venkat

回答

相關問題