3

フッターを機能させるのに少し問題があります。divが目的の場所に移動しないためです。

画像がページの下部、フッターにあると想像してください。リンクをどのように取得しますか？それはページの下の部分全体に広がるでしょう、そして私が作っているこのウェブサイトは見事に見えなければならないので、皆さんが私を助けてくれないかと思っていました。

ここに画像の説明を入力してください

コードは次のとおりです。

@charset "utf-8";
/* CSS Document */

#nav {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
width: 600px;
list-style: none;
margin: 0 auto;

}
#nav li {
float: left;
}
#nav li a {
padding: 8px 15px;
text-decoration: none;
color:white;
display:inline-block;
font-size:18px;
}
#nav li a:hover {
color:black;
}
body {
margin: 0;
padding: 0;
}

a {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
color:#C7C7C7;
text-decoration:none;
}

a:hover {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
color:#009ACD;
text-decoration:none;
}

h1 {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
border-style:solid;
border-color:black;
color:white;
width:900px;
left:50%;
right:50%;
margin-top: 0;
font-size:36px;
}

#header {
margin-top: 0;
width:100%;
height:150px;
background-color:#09F;
}

font {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

フィドル

4

1 に答える 1

1 
#footer .nav li:nth-child(even) {
    top: 70px; /* eg. */
}

また

#footer .nav li:nth-child(2n+0) {
    top: 70px; /* eg. */
}

入れることを忘れないでください

#footer .nav li {
    position: relative;
}

アップデート

li 要素を正当化するコードを追加しました。jsfiddle リンクを参照してください。そして、好きなようにナビゲーションをスタイルできます。リンク

全画面表示全画面表示

于 2013-03-13T17:30:38.930 に答える