1

我想做的就是能够创建这个主页按钮。我想将图像和文本放在一个按钮中，当单击该按钮时，它会将我链接到主页。（稍后我会给它一个 <a href...） 我无法在按钮中调整或拉伸图像。

为了观察我的代码是什么，我扩展了 div 和按钮的尺寸。通常，我的按钮是 w:100px，h:30px，而 div 是 w:1000px，h:30px。它看起来像这样

我是 css & html 以及 asp.net 的新手。请帮忙，谢谢。

我的代码：

<div style="width:800px; height:1000px; margin-left:auto; margin-right: auto; background-color:#D9FFFF">
    <button style="width:725px; height:427px; background-size: 5%; background:url('pics/home.png') no-repeat 1px 1px; padding:0; margin:0;">Home Page</button>
</div>
4

1 回答 1

1

就像我在评论中说的那样，它不是一个button它是一个anchor。掌握基本的 HTML 和 CSS 知识应该不会太难。您可能遇到的问题是主页图标。最简单的方法是使用 font-awesome 库，将它添加到 head 元素中：<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

并将其作为 innerHTML 添加到锚点：<a href=""><i class="fas iconname"></i> TEXT</a>

a {
  text-decoration: none;
  color: black;
  background-color: lightgrey;
  display: inline-flex;
  padding: 5px;
  width: 100px;
  height: 30px;
  font-size: 14.5px;
  justify-content: space-between;
  align-items: center;
  
}

a > i {
  color: grey;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

<a href="#"><i class="fas fa-home"></i> MAIN PAGE</a>

于 2021-06-22T13:53:35.917 回答