Question

需要帮助使用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>

Answer 1

这是我的解决方案。我在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>

尝试将社交媒体图标添加到顶部栏的左上方

1 个答案: