頂級酒吧的SCSS

-1

我想在鏈接後面放置一個背景漸變頂欄，但我無法弄清楚樣式。頂欄周圍有空白區域，儘管填充爲0px，並且鏈接不是白色。頂級酒吧的SCSS

這應該是很簡單的，但顯然不是這樣的造型新手跟我一樣 :-( 謝謝！

<main class="col-md-9 float-left col px-5 pl-md-2 pt-2 main"> 
    <div class="topbar"> 
     <a href="#" data-target="#sidebar" data-toggle="collapse"> 
      <i class="fa fa-navicon fa-2x py-2 p-1"></i> 
     </a> 
    </div> 
    <router-outlet></router-outlet> 
</main> 

.topbar { 
    background: linear-gradient(#004812, #0B7225, #3A9250); 
    padding : 0px; 
    &::a { 
    color:white 
    } 
}

來源

2017-11-18 Anand

你能提供一個例子在fiddler或plnkr嗎？ – Naresh217

創建plunker http://plnkr.co/edit/skIsC23kzsU5EvXUkrw9雖然沒有造型在那裏工作。至少在本地，我有一些問題最初提到的問題。感謝您的迴應！ @ Naresh217 – Anand

這是因爲已經設置的樣式。我是一個新手，所以我必須通過在'pl-md-0 pt-0'中設置填充來填充可以被刪除。

<main class="col-md-9 float-left col px-5 pl-md-2 pt-2 main">

來源

2017-11-20 14:48:46 Anand

你的代碼是否正常工作。我找不到任何問題。如果你的風格不工作，嘗試檢查，你必須和設置爲父母或div的

.topbar { 
    width:100px; 
    height:100px; 
    background: -webkit-linear-gradient(#004812, #0B7225, #3A9250); 
    background: -moz-linear-gradient(#004812, #0B7225, #3A9250); 
    background: -o-linear-gradient(#004812, #0B7225, #3A9250); 
    background: linear-gradient(#004812, #0B7225, #3A9250); 
    padding : 0px; 
    a { 
     color:white 
     } 
    }

jsfiddle

來源

2017-11-18 06:19:51

你必須給他其他的風格ight到topbar，最重要的可能是你的scss文件編譯不正確。試試這個代碼。

<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 
<body> 
<main class="col-md-9 float-left col px-5 pl-md-2 pt-2 main"> 
    <div class="topbar"> 
     <a href="#" data-target="#sidebar" data-toggle="collapse"> 
      <i class="fa fa-navicon fa-2x py-2 p-1"></i>Testing 
     </a> 
    </div> 
    <router-outlet></router-outlet> 
</main> 
</body> 
</html>

SCSS代碼

.topbar { 
    width:100%; 
    height:50px; 
    background: -webkit-linear-gradient(#004812, #0B7225, #3A9250); 
    background: -moz-linear-gradient(#004812, #0B7225, #3A9250); 
    background: -o-linear-gradient(#004812, #0B7225, #3A9250); 
    background: linear-gradient(#004812, #0B7225, #3A9250); 
    padding : 10px 0; 
    position:relative; 
    a { 
     color: #fff; 
     } 
    }

你可以檢查一下codepen鏈接如下。[https://codepen.io/varshaCodepen/pen/QOaEyK]

來源

2017-11-18 11:15:41

頂級酒吧的SCSS

回答

相關問題