如何創建一個類似風格的按鈕裏面

內容我最近碰到的部位：https://www.airbnb.com/locations/new-york/neighborhoods 如何創建一個類似風格的按鈕裏面

其中有一個非常不錯的功能，其中每個LI都有一個按鈕，裏面的一些跨度。

我試圖模擬相同的，但無法找到所有的樣式。

這是我到目前爲止有：

<style> 
ul { 
    list-style-type: none; 
} 
.btn { 
    font-weight: bold; 
    display: inline-block; 
    padding: 0.4em 1.2em; 
    -moz-box-sizing: border-box; 
    text-align: center; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    vertical-align: middle; 
    margin-bottom: 0px; 
    border-radius: 5px; 
    box-shadow: 0px 0px 0.2em rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.2), 0px 0px 0px #000; 
    background-image: -moz-linear-gradient(center top , #00AEFF 0%, #018FE1 100%); 
    border-width: 1px; 
    border-style: solid; 
    -moz-border-top-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    border-image: none; 
    border-color: #0195EB #0083C7 #0175B8; 
    font-size: 12px; 
    line-height: 16px; 
    color: #FFF; 
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); 
} 
.btn.large { 
    line-height: normal; 
    font-size: 15px; 
    padding: 0.6em 1.3em; 
} 
.btn:link, .btn:visited { 
    color: #FFF; 
} 
.traits li a { 
    display: inline-block; 
} 
.traits li { 
    margin: 0px 8px 11px 0px; 
    display: inline-block; 
    position: relative; 
} 
</style> 
<ul id="trait_selector" class="traits"> 
    <li class="trait" data-trait-id="66"> 
     <a class="premote trait-link large btn" data-trait-id="66" href="/locations/new-york/neighborhoods?tags[]=66"> 
      <span class="check"></span> 
      <span class="name"></span> 
      <span class="count"></span> 
     </a> 
    </li> 
    <li class="trait" data-trait-id="8"> 
     <a class="premote trait-link large btn" data-trait-id="8" href="/locations/new-york/neighborhoods?tags[]=8"></a> 
    </li> 

</ul>

這絕對不像添加的鏈接什麼。

我該如何實現它？

來源

2014-05-06 Si8

因此，您使用了瀏覽器的元素檢查器工具，無法找到與該網站上的元素相關的所有CSS信息？請考慮設置小提琴。 –

是的，我檢查了開發者帳戶，並沒有顯示所有的樣式。 – Si8

這怎麼可能？ –

這裏是一個FIDDLE

複製他們的整個<ul>元素，整體風格表，

我刪除了大部分無關的風格，只是經歷什麼是留下和刪除與用戶列表無關的內容。

來源

2014-05-06 18:21:52 Banana

謝謝。真的幫助我了！ – Si8

很高興我可以幫助:) – Banana

@Banana ...出於某種原因，我的代碼在IE瀏覽器無法正常工作，而網站卻是這樣。任何想法？ – Si8

<ul> 
<li><a href="#"><img src="checkbox.png" alt=""/>Menuitem</a></li> 
</ul>

或

<ul> 
<li><a href="#"><span class="checkbox"></span>Menuitem</a></li> 
</ul> 

.checkbox { 
    background: url(images/checkbox.png); 
}

來源

2014-05-06 18:17:21

如何創建一個類似風格的按鈕裏面

回答

相關問題