Html菜单栏网站

时间:2016-04-28 20:04:57

标签: html css menu html-lists

嘿我想创建一个像这样的首页网站:http://foreword.io/

我需要帮助水平列表才能像foreword.io上的那样获得它。

我希望黄色区域一直延伸到两侧。当我将鼠标悬停在链接上时,它只标记正方形的上半部分,因此我希望它标记每个链接的整个正方形。

请提前帮助和谢谢。

这是我的代码:



body {
  font-family: Times New Roman;
}

.h1 {
  position: absolute;
  height: 200px;
  top: 90px;
  width: 1585px;
  text-align: center;
  font-size: 350%;
  font-family: Times New Roman, Georgia;
}

u {
  text-decoration: none;
  border-bottom: 5px solid black;
}

.fakta {
  position: absolute;
  height: 190px;
  top: 340px;
  width: 700px;
  left: 500px;
  font-size: 50px;
}

ul {
  position: absolute;
  height: 100px;
  top: 600px;
  left: 100px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: yellow;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 20px;
  text-decoration: none;
  font-size: 20px;
}

li a:hover {
  background-color: white;
}

<div class="h1">
  <h1>
    <u>DatabaseNavn</u>
  </h1>
</div>
<div class="fakta">
  <p>Database med ansatte <br> og avdelinger</p>
</div>
<ul>
  <li><a href="side1.html">Side1</a></li>
  <li><a href="side2.html">Side2</a></li>
  <li><a href="side3.html">Side3</a></li>
  <li><a href="side4.html">Side4</a></li>
  <li><a href="side5.html">Side5</a></li>
</ul>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

你可以这样做,只需将高度选项添加到&#34; li a&#34; css部分如下:

li a {
    display: block;
    color: black;
    height: 100px;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    font-size:20px;
}

它将设置方块的高度,使整个黄色部分变为白色。

在黄色条形尺寸和项目位置的情况下:

将ul的宽度设置为100%,这样它将使用浏览器上的整个可用空间,同时删除&#34; left&#34;最后添加&#39; position:relative&#39;,&#39; left:20%&#39;和&#39;宽度:10%;到李节。

li {
    position: relative;
    left: 20%;
    width: 10%;
    float: left;
}

消息来源:我的头:-P

答案 1 :(得分:0)

编织: http://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77

对于非常简单的事情,您可以在不需要的地方使用margin,而ul可以替换text-align center。因此,您的代码相当WET(尤其是我现在在平板电脑上)所以我创建了一个simple mockup DRY,如果您使用RWD也可以使用media-queries {{3}}

我删除了很多不必要的定位。通过将li标记设置为inline-block,我可以通过告知width: 100%; margin: 0; padding: 0;标记显示为body { font-family: Times New Roman; } .h1 { width: 100%; text-align: center; font-size: 350%; font-family: Times New Roman, Georgia; } u { text-decoration: none; border-bottom: 5px solid black; } .fakta { width: 100%; font-size: 50px; text-align: center; } ul { list-style-type: none; width: 100%; margin: 0; padding: 0; overflow: hidden; background-color: yellow; text-align: center; } li { display: inline-block; } li a { display: block; color: black; text-align: center; padding: 20px; text-decoration: none; font-size: 20px; } li a:hover { background-color: white; }来使锚点居中。然后我使用<div class="h1"> <h1> <u>DatabaseNavn</u> </h1> </div> <div class="fakta"> <p>Database med ansatte og avdelinger</p> </div> <ul> <li><a href="side1.html">Side1</a></li> <li><a href="side2.html">Side2</a></li> <li><a href="side3.html">Side3</a></li> <li><a href="side4.html">Side4</a></li> <li><a href="side5.html">Side5</a></li> </ul>

填充宽度

此代码段有何帮助。

{{1}}
{{1}}

答案 2 :(得分:0)

使用display: inline-block;代替display: block;,您将获得一个水平列表。