資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用HTML和CSS建立粘性社交媒體欄
利用社交媒體可以幫助您的網際網路業務吸引更多客戶。任何網站都可以從社交媒體按鈕中獲益良多，這些按鈕使使用者可以直接從網站接收更新。此外，粘性社交欄有助於提升網站訪問量並增加您的社交媒體關注者。在本文中，我們將討論如何使用CSS製作粘性社交媒體欄，而不會影響網站的外觀和感覺。
有幾種jQuery外掛可用於浮動側邊欄，但它們可能會影響網站的速度和外觀。為了解決這個問題，我們將使用CSS程式碼在網站的左側或右側新增一個動畫粘性社交欄。使用CSS，我們可以建立一個帶有平滑懸停動畫的社交媒體浮動側邊欄。
示例
在下面的示例中，我們將使用CSS在右側建立一個粘性社交媒體欄。我們將新增流行的社交媒體，例如Google+、LinkedIn和YouTube。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial-container {
position: fixed;
right: -130px;
width: 209px;
}
.tutorial li {
background-color: #E5E8E8;
color: #efefef;
height: 45px;
transition: all 0.25s ease-in-out;
cursor: pointer;
}
.tutorial li:hover {
margin-left: -120px;
}
.tutorial li img {
float: left;
margin: 4px 3px;
}
.tutorial li p {
margin: 0px;
font-size: 12px;
}
.tutorial li p a {
text-decoration: none;
color: #8E44AD;
}
.tutorial li p a:hover {
text-decoration: underline;
}
</style>
</head>
<body style="background-color:#D5F5E3">
<h2 style="font-family:verdana; text-align:center; color:#DE3163">TutorialsPoint</h2>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. <br>
<br>The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.
</p>
<div class="tutorial-container">
<ul class="tutorial">
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSrNW5VdEv_P0zc9mR1ooJzvMzAFNe2USrKA&usqp=CAU" width="33" height="33">
<p>
<a href="https://tutorialspoint.tw/index.htm" target="_blank">Visit Our <br>Site </a>
</p>
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCuio9jEqxTntTove9RPgAasVVN4f2QQHxCw&usqp=CAU" width="33" height="33">
<p>
<a href="https://www.linkedin.com/authwall?trk=bf&trkInfo=AQEkqX2eckF__gAAAX-wMwEYvrsjBVbEtWQd4pgEdVSzkL22Nik1KEpY_ECWLKDGc41z8IOZWr2Bb0fvJplT60NPBtSw87J6QCpc7wD4qQ3iU13n6xJtBxME5o05Wmpg5JPm5YY=&originalReferer=&sessionRedirect=https%3A%2F%2Fwww.linkedin.com%2Fcompany%2Ftutorialspoint" target="_blank">Vist <br>LinkedIn Page </a>
</p>
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1oZOhTDRZfZ9IwTnZe7AGcny2DxCX1J7tTg&usqp=CAU" width="33" height="33">
<p>
<a href="https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg" target="_blank">Subscribe <br>YouYube Channel </a>
</p>
</li>
</ul>
</div>
</body>
</html>
執行以上程式碼後，它將生成一個包含文字和網頁上社交媒體欄的輸出。粘性社交媒體欄包含指向不同社交媒體網站（如LinkedIn和YouTube）上的網頁的網站連結。
更新於：2024年1月22日
瀏覽量：515
廣告