Htmlメニューバーのウェブサイト

Question

ちょっとこのようなフロントページを持つウェブサイトを作りたいと思っています。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>

Answer 1

あなたがこれを行うことができ、単に以下のようにCSSで "李A" セクションに高さオプションを追加：

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

それがされます正方形の高さを設定すると、黄色の部分全体が白に変わります。黄色のバーのサイズとアイテム位置の場合は

：それはまた、「左」を削除し、最後に追加し、ブラウザ上で全体の利用可能なスペースを使用しますので、

」は100％にULの幅を設定「相対」、「左：20％」、「幅：10％ liセクション。

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

SOURCE：私の頭:-P

Answer 2

織り：marginに置き換えることができ、それが必要ではないです場所であなたがposition absoluteを使用しているので、単純なもののためにhttp://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77

。したがって、あなたのコードはかなりWETです（特に今私がタブレットに載っているので）simple mockupはDRYで、media-queriesを利用するとRWDでも使えます。

多くの不要な配置を削除しました。 ulタグをtext-align centerに設定すると、inline-blockと表示されるようにliタグを指定することでアンカーを中央に配置することができました。次に、幅を埋めました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>

Answer 3

利用display: inline-block;の代わりに、display: block;、あなたは水平方向のリストを取得します。