HTML 文本关联问题

为什么我的文本在运行时看起来像是组合在一起的？代码有问题吗？带有div 的部分。我试图将它们分开。我将"固定"更改为"底部"，它正在工作，但它只会使文本上升。我正在尝试在左下角制作水印，并为您提供意见，您可以将浅色模式更改为深色模式。请帮助我完成这个项目。不要担心内容，它只是为了演示。

</body>
</html>
<style type ="text/css" >
.footer{ 
position: fixed;     
text-align: left;    
bottom: 0px; 
width: 100%;
color: black;
}  
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020</div>
<div class="footer"><a href="D:dark mode uwu project rama.html" target="_self">use dark mode</a></div>
</body>

您需要包装所有元素并使它们固定。

我添加了.footer>*以将页脚的子项从左到右对齐。否则，它们将彼此重叠，因为div 标签正在填充孔宽。

.footer{ 
position: fixed;     
text-align: left;    
bottom: 0px; 
width: 100%;
color: black;
}
.footer>* {
display: inline-block;
}

<body div class="footer">
<div>Made by rama 4/6/2020</div>
<div><a href="D:dark mode uwu project rama.html" target="_self">use dark mode</a></div>
</div>

您只需要将 .footer 类应用于第一个div，删除第二个div，因为您不需要它。下面是一个示例。

.footer {
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}

</body>
</html>
</head>
<body>
<div class="footer">Made by rama 4/6/2020 <a href="D:dark mode uwu project rama.html" target="_self">use dark mode</a></div>
</body>

如果你想将"使用深色模式"向下移动一行，你需要做的就是添加一个html<br>标签。喜欢这个。。。

.footer {
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}

</body>
</html>
</head>
<body>
<div class="footer">Made by rama 4/6/2020 <a href="D:dark mode uwu project rama.html" target="_self"><br>use dark mode</a></div>
</body>

用<div class="footer">包裹你的两个<div>

</body>
</html>
<style type="text/css">
.footer {
position: fixed;
text-align: left;
bottom: 0px;
width: 100%;
color: black;
}
</style>
</head>
<body>
<div class="footer">
<div>Made by rama 4/6/2020</div>
<div><a href="D:dark mode uwu project rama.html" target="_self">use dark mode</a></div>
</div>
</body>

我对他的代码进行了更改，只是没有添加额外的样式和设计。

</body>
</html>
<style type ="text/css" >
.footer{ 
position: fixed;     
text-align: left;    
bottom: 0px; 
width: 100%;
color: black;
}  
</style>
</head>
<body>
<div class="footer">Made by rama 4/6/2020
<a href="D:dark mode uwu project rama.html" target="_self">use dark mode</a>
</div>

</body>

相关内容

最新更新

热门标签：