HTML，网页页脚部分的自定义问题

Question

代码：（在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 中构建一个具有 streamlit 结构的 Web 应用程序。我无法将图标和文本（“与我取得联系”）移动到页面中间。此外，我无法更改文本的大小（“与我取得联系”）。最后，我无法通过单击图标单独转到 https://www.whosebug.com and https://www.linkedin.com。你能帮我解决这些问题吗？

Answer 1


        <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 - 将文本对齐到元素的中心

要使图片可点击，您需要将它们放在标签内。

到resize/style您需要在css

中引用它们的元素

.text-center{
    text-align: center;
}
.footer-text{
    font-size: 1rem;
}
.icons{
    display: flex;
    justify-content: center;
}

Answer 2

在您的样式中，您为 .footer 设置了样式规则，但在容器 div 中，您将 class 属性值设置为等于页眉。你可以检查这个代码片段：

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;
}

<div class="footer">
  <p><b>Get In Touch With Me</b></p>
  <a href="https://whosebug.com/"><img src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
  alt="Whosebug 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>

Answer 3

您可以使用下面的代码。每个图像和标题都有动画。

<div class="footer">
        <p class="headerStyle"><b>Get In Touch With Me</b></p>
        <a href="https://whosebug.com/"><img class="image1" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
                alt="Whosebug icon" width="60" height="60"></a>
        <a href="https://www.linkedin.com"><img class="image2" 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%;
        
        }
        
        .headerStyle {
            transition: transform .2s;
        }
        
        .headerStyle:hover {
            
             transform: scale(1.5);
            transition: 0.2s;
        }
        .image1 { 
            padding: 10px;
             transition: transform .2s;
        }
        .image2 
        { 
            padding: 10px;
             transition: transform .2s;
        }
        .image1:hover {  
            ##border: 4px solid green;
            ##border-radius: 15px;
             transform: scale(1.5);
            transition: 0.2s;
        }

        .image2:hover {  
            ##border: 4px solid green;
            ##border-radius: 15px;
             transform: scale(1.5);
            transition: 0.2s;
        }
        
        a:link,
        a:visited {
            color: blue;
            background-color: transparent;
            text-decoration: underline;
        }

        a2:hover {
            border-style: solid;
            },
        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>

HTML，网页页脚部分的自定义问题

HTML, Customization Problems in Web Page's Footer Section

html

css

python-3.x

streamlit