代碼：（footer="""和"""之間包含html格式代碼）
footer="""<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link , a:visited{
color: blue;
background-color: transparent;
text-decoration: underline;
}
a:hover, a:active {
color: red;
background-color: transparent;
text-decoration: underline;
}
.footer {
position: static ;
left: 0;
bottom:0;
width:100%;
background-color:white ;
color: black;
text-align: center;
}
</style>
<div class="header">
<p><b>Get In Touch With Me</b>
<a style='display: block; text-align: center;' href="https://www.linkedin.com" target="_blank"></a></p>
<a href="https://www.linkedin.com">
<img alt="Qries" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
width=50" height="50"><img alt2="Qries" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
width=50" height="50">
</a>
</div>
"""
st.markdown(footer,unsafe_allow_html=True)
您好，我正在用 Python 和 HTML 構建一個具有流線結構的 Web 應用程式。我無法將圖示和文本（“與我聯系”）移動到頁面中間。此外，我無法更改文本的大小（“與我取得聯系”）。最后，我無法通過單擊圖示分別訪問
uj5u.com熱心網友回復：
在您的樣式中，您為 .footer 設定樣式規則，但在容器 div 中，您將 class attr 值設定為等于 header。你可以檢查這個代碼片段：
<div class="footer">
<p><b>Get In Touch With Me</b></p>
<a href="https://stackoverflow.com/"><img src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
alt="stackoverflow icon" width="60" height="60"></a>
<a href="https://www.linkedin.com"><img src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
alt="linkedin icon" width="60" height="60">
</a>
</div>
<style>
img {
max-width: 100%;
}
a:link,
a:visited {
color: blue;
background-color: transparent;
text-decoration: underline;
}
a:hover,
a:active {
color: red;
background-color: transparent;
text-decoration: underline;
}
.footer {
position: static;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center;
}
</style>
uj5u.com熱心網友回復：
<div>
<p class="text-center footer-text">
Contact me
</p>
<p class="icons">
<a href="#">
<img url="img1.jpg">
</a>
<a href="#">
<img url="img2.jpg">
</a>
</p>
</div>
text-center - 將文本與元素的中心對齊
要使影像可點擊，您需要將它們放在標簽內。
調整您需要在 css 中參考它們的元素的大小/樣式
.text-center{
text-align: center;
}
.footer-text{
font-size: 1rem;
}
.icons{
display: flex;
justify-content: center;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475033.html
標籤：html css python-3.x 流线型