0

我正在尝试建立一个网站来宣传自己是一名钢琴家。我试图仅使用 html 和 css 来执行此操作，因为我对 javascript/flash 等（YET）一无所知。我 2 天前刚开始使用 html，所以这对我来说是全新的。

这里是这样：我有一个有趣的想法，将一组钢琴键放在网站顶部以用作导航面板。现在我只是将它们链接到谷歌。

现在我有几个问题：

  • 如何很好地将文本插入到 divs(keys) 中，而 divs 不会一直改变位置？
    我根本无法解决.. 由于某种原因，钥匙掉了下来。

  • 我是否忽略了一种更简单的单独定位所有键的方法？
    我已经尝试对它们进行分组，因为 C&F 基本上是相同的键，Csharp&Fsharp 等也是如此。我决定不对键进行分组，所以我可以轻松地单独管理它们。

任何其他有用的信息也受到高度赞赏。

索引文件如下所示：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>Thijs Waleson, pianist in Utrecht en omgeving</title>
</head>

<body>
<a href="www.google.com"><div class="white-key"ID="C"><p>HOI</p></div></a>
<a href="www.google.com"><div class="black-key"ID="Csharp"></div></a>
<a href="www.google.com"><div class="white-key"ID="D"></div></a>
<a href="www.google.com"><div class="black-key"ID="Dsharp"></div></a>
<a href="www.google.com"><div class="white-key"ID="E"></div></a>
<a href="www.google.com"><div class="white-key"ID="F"></div></a>
<a href="www.google.com"><div class="black-key"ID="Fsharp"></div></a>
<a href="www.google.com"><div class="white-key"ID="G"></div></a>
<a href="www.google.com"><div class="black-key"ID="Gsharp"></div></a>
<a href="www.google.com"><div class="white-key"ID="A"></div></a>
<a href="www.google.com"><div class="black-key"ID="Asharp"></div></a>
<a href="www.google.com"><div class="white-key"ID="B"></div></a>
<a href="www.google.com"><div class="white-key"ID="C"></div></a>
<a href="www.google.com"><div class="black-key"ID="Csharp"></div></a>
<a href="www.google.com"><div class="white-key"ID="D"></div></a>
<a href="www.google.com"><div class="black-key"ID="Dsharp"></div></a>
<a href="www.google.com"><div class="white-key"ID="E"></div></a>
<div class="footer"></div>
</body>
</html>

这就是 CSS 表的样子：

.white-key{
display: inline-block;
border-radius: 5px;
border: 3px solid black;
background: #FFFFFF;
height: 575px;
width: 100px;
margin-left: 0px;
padding: 0px;
z-index: 1;
position: relative;
}

.black-key{
display: inline-block;
border-radius: 5px;
border: 3px solid black;
background-color: #000000;
height:375px;
width: 60px;
vertical-align: top;
margin-left: 0px;
padding: 0px;
z-index: 2;
position: relative;
}

.footer{
background-color: #000000;
height: 3px;
width: auto;
padding: 0px;
margin: 0px;
}

a div:hover{
background-color: grey;
}

/*Positions of the piano keys */
#C {
margin-left: -5px;
}
#Csharp {
margin-left: -50px;
}
#D {
margin-left: -25px;
}
#Dsharp {
margin-left: -25px;
}
#E {
margin-left: -50px;
}
#F {
margin-left: -5px;
}
#Fsharp{
margin-left: -50px;
}
#G{
margin-left: -25px;
}
#Gsharp{
margin-left: -37.5px;
}
#A{
margin-left: -37.5px;
}
#Asharp{
margin-left: -25px;
}
#B{
margin-left: -50px;
}
4

2 回答 2

0

这成功了，感谢 Stefan Denchev

HTML：

<body>
<div id="menu">
<a href="www.google.com"><div class="key white"ID="C">C</div></a>
<a href="www.google.com"><div class="key black"ID="Csharp">C#</div></a>
<a href="www.google.com"><div class="key white"ID="D">D</div></a>
<a href="www.google.com"><div class="key black"ID="Dsharp">D#</div></a>
<a href="www.google.com"><div class="key white nosharp"ID="E">E</div></a>
<a href="www.google.com"><div class="key white"ID="F">F</div></a>
<a href="www.google.com"><div class="key black"ID="Fsharp">F#</div></a>
<a href="www.google.com"><div class="key white"ID="G">G</div></a>
<a href="www.google.com"><div class="key black"ID="Gsharp">G#</div></a>
<a href="www.google.com"><div class="key white"ID="A">A</div></a>
<a href="www.google.com"><div class="key black"ID="Asharp">A#</div></a>
<a href="www.google.com"><div class="key white nosharp"ID="B">B</div></a>
<a href="www.google.com"><div class="key white"ID="C"></div>C</a>
<a href="www.google.com"><div class="key black"ID="Csharp">C#</div></a>
<a href="www.google.com"><div class="key white"ID="D">D</div></a>
<a href="www.google.com"><div class="key black"ID="Dsharp">D#</div></a>
<a href="www.google.com"><div class="key white"ID="E">E</div></a>
<div class="footer"></div>
</div>
</body>

CSS：

.key{
float: left;
border-radius: 5px;
border: 3px solid black;
position: relative;
text-align:center;}

.white{
background: #FFFFFF;
height: 575px;
width: 100px;
z-index: 1;
margin-left: -66px;
left:66px;}

.black{
background-color: #000000;
height:375px;
width: 60px;
z-index: 2;
left:33px;}

.nosharp{
margin-right: 66px;}

body{
width: 1100px;}

.footer{
background-color: #000000;
height: 3px;
width: auto;
padding: 0px;
margin: 0px;}

a div:hover{
background-color: grey;}
于 2013-08-13T11:39:54.297 回答
0

以像素位置的形式为您的 div 设置固定位置可能不是最好的主意。我建议你看看像这样的 CSS 定位教程以获得更好的想法。

于 2013-08-11T12:32:48.393 回答