使用CSS的页脚布局

我在设计页脚时遇到了问题，需要一些指导。这个名字的意思是在左边和右边的链接。链接已经崩溃了，我想知道是否有更好的方法可以更有效地将它们整合在一起。我曾尝试在这里使用flexbox，并取得了有限的成功。提前谢谢你的帮助。使用CSS的页脚布局

/* footer styles*/ 
 

 
footer { margin-top:1em; display: block; border-top: solid 2px #456e6e; 
 
margin-bottom: 1em; } 
 

 
top { 
 

 
float: right; 
 
text-decoration:none; 
 
color: #456e6e; 
 
margin-top: -2.25em; 
 
} 
 

 
top:hover{ 
 

 
color:black; 
 
} 
 

 
footer a { text-decoration: none; color: #456e6e; } 
 

 
footer a:hover{ color:black; } 
 

 
wrapper { 
 

 
min-height: 100vh; 
 
} 
 

 
/*NAV CSS*/ 
 

 
.tablet-info { 
 

 
display: none; 
 
} for small screen sizes 
 

 
for larger screen sizes 
 

 
.tablet-info { 
 

 
display: inline-block; 
 
float: right; 
 
margin-top: -2em; 
 
margin-right:.25em; 
 
margin-left:.25em; 
 
} 
 

 
student-name { 
 

 
margin-top: 1.8em; 
 
} 
 

 
.clearfix { content: ""; display: table; clear: both; } 
 

 
}

<div id="footer"> 
 
     <footer class="clearfix"> 
 
      <h3 id="student-name">Tracy Excell</h3> 
 
       <h3><a href="#home" id="top">Back To Top</a></h3> 
 
       <h3><a href="#home" class="tablet-info">Home</a></h3> 
 
       <h3><a href="#portfolio" class="tablet-info">Portfolio</a></h3> 
 
       <h3><a href="#contact" class="tablet-info">Contact</a></h3> 
 

 
     </footer> 
 
</div>

来源

2016-07-25 T.XL

你的CSS是无效的。通过验证器运行它并首先修复这些错误。 – Rob

您可以使用更新的页脚的布局和使用Flexbox的如下所示：

footer{ 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
footer .nav{ 
 
    display: flex; 
 
} 
 

 
.nav h3{ 
 
    margin-left: 15px; 
 
}

<footer> 
 
    <h3 id="student-name">Tracy Excell</h3> 
 
    <div class="nav"> 
 
    <h3><a href="#home" id="top">Back To Top</a></h3> 
 
    <h3><a href="#home" class="tablet-info">Home</a></h3> 
 
    <h3><a href="#portfolio" class="tablet-info">Portfolio</a></h3> 
 
    <h3><a href="#contact" class="tablet-info">Contact</a></h3> 
 
    </div> 
 
</footer>

来源

2016-07-25 02:51:18 takeradi

把名称和链接在同一个标签，让他们在同一行。您可以使用“& nbsp;”分开名称和链接。

每次创建新标题时，它总是从新行开始。

来源

2016-07-25 02:46:28

切勿使用实体来代替CSS样式。 – Rob

使用CSS的页脚布局

回答

相关问题