数据结构
网络
关系型数据库管理系统 (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.com/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
广告