背景导航栏

的按钮，我有了一个存储按钮的这样的形象 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

回答

相关问题