html - 尝试将社交媒体图标添加到顶部栏的左上角
问题描述
需要帮助使用 html 在我们网站的顶部栏左侧添加社交媒体图标。我使用 html 添加了这个顶部栏,所以我不介意添加一个带有左对齐社交媒体图标的新代码,我有照片,所以只需要代码。另外,尝试为每个项目添加菜单分隔符,我也不知道该怎么做。网站: http: //www.stephensengineering.com/stephens33/
#navbar ul {
margin: 0;
padding: 10px;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
<div id="navbar">
<ul>
<li style="float:left"><a class="active" href="about">facebook</a></li>
<li style="float:left"><a class="active" href="#about">twitter</a></li>
<li style="float:left"><a class="active" href="#about">linkedin</a></li>
<li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li>
<li><a href="+18883000642">888-300-0642</a></li>
<li><a href="http://github.com">Stephens University</a></li>
<li><a href="http://github.com">Submit Assignment</a></li>
</ul>
</div>
解决方案
这是我的解决方案。我在 css 文件的底部添加了几行代码。在 html 文件中,我在相应的标签内添加了 img 标签。希望它会帮助你。
#navbar ul {
margin: 0;
padding: 10px;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 20px;
vertical-align: top;
}
<div id="navbar">
<ul>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li>
<li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li>
<li><a href="+18883000642">888-300-0642</a></li>
<li><a href="http://github.com">Stephens University</a></li>
<li><a href="http://github.com">Submit Assignment</a></li>
</ul>
</div>
推荐阅读
- bash - bash 从 urls.txt 获取目录名
- mysql - MYSQL:如何获得行级别的安全性?
- unity3d - 身份验证未授权
- google-apps-script - setFormulasR1C1 可能没有#ERROR!?
- python - MSSQL 更新语句 - 字符串或二进制数据将被截断。[pyodbc]
- reporting - Odoo 10 QWeb 编码不正确
- javascript - Vimeo 频道和视频未显示
- java - 如何调用具有 JFrame 的公共 void
- android - 如何更改 React Native 和 Metro Bundler 端口
- python - 如何从 Dash 回调的数据帧中获取计数