如何使页脚响应而不出现故障?

所以我现在对我的页脚非常满意，而且它的响应速度相当快。问题：它非常小故障。调整窗口大小时，文本和链接将相互堆叠，依此类推。有人可以帮助我解决这个问题吗？如果中间链接保持并排，社交媒体链接也留在一个块中，我会很高兴。

非常感谢。

.footer {
	position: static;
	flex-shrink: 0;
bottom: 0px;
left: 0px;
right: 0px;
padding: 0px;
width: 100%;
background-color: #F9F9F9;
text-align: center;
	box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
	z-index: 99;
/*outline: 2px dashed orange;*/
}
.footerline {
	padding: 50px;
display: flex;
font-family: 'Source Code Pro', monospace;
font-style: normal;
font-weight: 400;
font-size: 15px;
color: #D5D5D5;
justify-content: center;
align-items: center;
/*outline: 2px dashed orange;*/
}
#footerlineshadow {
	color: rgba(240,240,240, 0.9);
text-shadow: 1px 1px 1px #fff, 0 0 0 #000, 1px 1px 1px #fff;
}
.subfooter {
height: 40px;
background-color: #E5E5E5;
box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
}
.footercontent {
display: flex;
font-family: lato;
color: #ABABAB;
font-style: normal;
font-weight: 100;
font-size: 12px;
text-align: center;
justify-content: center;
height: 100%;
}
#footertext {
	text-align: center;
	margin-right: 20%;
	/*outline: 2px dashed orange;*/
}
#footerlinks {
	text-align: center;
	/*outline: 2px dashed orange;*/
}
#footerlinks a {
margin: 0px 40px;
font-style: normal;
font-weight: 100;
font-size: 12px;
color: #ABABAB;
text-decoration: none;	/*outline: 2px dashed orange;*/
}
#footerlinks a:hover {
	opacity: 0.7;
	font-style: normal;
font-weight: 100;
font-size: 12px;
	text-decoration: none;
	/*outline: 2px dashed orange;*/
}
#footersocialmedia {
	margin-left: 20%;
}
/* Style all font awesome icons */
.fa {
padding: 5px;
font-size: 30px;
width: 25px;
	height: 100%;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}

<link rel="stylesheet" type="text/css" id="applicationStylesheet" href="header_footer.css"/>
<link rel="stylesheet" type="text/css" id="mainStylesheet" href="kontakt.css"/>
<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<footer class="footer">
	  <div class="footerline">
	    <p id="footerlineshadow">&ltp&gtThis is a Footer&lt/p&gt</p>
</div>
	<div class="subfooter">
		<div class="footercontent">
			<div id="footertext">
				<p>Copyright © 2020 Henning Frenzel</p>
			</div>
			
			<div id="footerlinks">
				<p>
				<a href="home.html">Home</a>
				<a href="ueber_mich_.html">Über Mich</a>
			    <a href="portfolio_galerie.html">Portfolio</a>
			    <a href="kontakt.html">Kontakt</a>
				<a href="Impressum.html">Impressum</a>
				</p>
			</div>
			<div id="footersocialmedia">
				<a href="#" class="fa fa-facebook"></a>
				<a href="#" class="fa fa-twitter"></a>
				<a href="#" class="fa fa-youtube"></a>
				<a href="#" class="fa fa-instagram"></a>
			</div>
		</div>
	</div>
</footer>
</html>

这是响应式页脚的代码

.footer {
display:flex;
flex-direction:row;
min-height:50px;
width: 100%;
background-color: #F9F9F9;
justify-content:center;
align-items:center;

text-align: center;
flex-wrap:wrap;
	box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
}
.footerline {
display: flex;
font-family: 'Source Code Pro', monospace;
font-style: normal;
font-weight: 400;
font-size: 15px;
color: #D5D5D5;
width:100%;
justify-content: center;
align-items: center;
flex-direction:row;
flex-wrap:wrap;
/*outline: 2px dashed orange;*/
}
#footerlineshadow {
	color: rgba(240,240,240, 0.9);
text-shadow: 1px 1px 1px #fff, 0 0 0 #000, 1px 1px 1px #fff;
}
.subfooter {
background-color: #E5E5E5;
box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
}
.footercontent {
display: flex;
font-family: lato;
color: #ABABAB;
font-style: normal;
font-weight: 100;
width:100%;
font-size: 12px;
text-align: center;
justify-content: center;
min-height:50px;
}
#footertext {
	text-align: center;
	/*outline: 2px dashed orange;*/
}
#footerlinks {
	text-align: center;
	/*outline: 2px dashed orange;*/
}
#footerlinks a {
font-style: normal;
font-weight: 100;
font-size: 12px;
padding:0 15px;
color: #ABABAB;
text-decoration: none;	/*outline: 2px dashed orange;*/
}
#footerlinks a:hover {
	opacity: 0.7;
	font-style: normal;
font-weight: 100;
font-size: 12px;
	text-decoration: none;
	/*outline: 2px dashed orange;*/
}
#footersocialmedia {
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
flex-wrap:wrap;
}
/* Style all font awesome icons */
.fa {
padding: 20px;
font-size: 30px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}

如果你想把页脚留在底部，请使用在css中将这些代码写到页脚属性

**位置：绝对;

底部：0;

左：0;

相关内容

最新更新

热门标签：