css3實現頂部社會化分享按鈕示例

2024-07-11 08:31:02

字體：大中小

來源：轉載

供稿：網友

今天要分享一款純CSS3實現的社會化分享按鈕，它放置在網頁的頂部，你可以選擇將它固定在網頁頂部，這樣對用戶分享內容就十分方便。這些社會化分享按鈕的圖標文件來自google和bootstrap的字體文件，包含了個大社交網站的logo圖標，可以先來看看效果圖：

HTML結構代碼

復制代碼

代碼如下:
<div class="social">

<ul>
<li class="facebook">
<a href="#" target="_blank">

</a>
</li>
<li class="twitter">
<a href="#" target="_blank">

</a>
</li>
<li class="codepen">
<a href="#" target="_blank"><img src="http://www.gettyicons.com/free-icons/222/simple/png/256/codepen_256.png" alt="CODEPEN" width="48" height="48"></a>
</li>
<li class="youtube">
<a href="#" target="_blank">

</a>
</li>
<li class="instagram">
<a href="#" target="_blank">

</a>
</li>
<li class="pinterest">
<a href="#" target="_blank">

</a>
</li>
<li class="github">
<a href="#" target="_blank">

</a>
</li>
<li class="flickr">
<a href="#" target="_blank">

</a>
</li>
<li class="linkedin">
<a href="#" target="_blank">

</a>
</li>
</ul>
</div>

這里主要是利用了ul li列表結構，么一個li都定義了相應的class，比如第一個定義了class="facebook"，在之后的css中，將會對facebook類進行樣式定義，這樣做會非常方便。

然后再看看CSS代碼，也比較簡單：

復制代碼

代碼如下:
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

上一篇：css仿word首字下沉效果示例

下一篇：創建一個自己的bootstrap模板示例

發表評論

共有條評論