0

このテーマの一番上にあるメニューバーの外観を (一種の) 複製しようとしています: http://elegantthemes.com/preview/Lucid/

私が苦労している部分は、要素が占める「ブロック」全体を占めるために借りたグラデーションを取得することです。<li>これは概念的に説明するのが少し難しいので、ここに私が現在持っているものがあります: http://jsfiddle.net/tCH39/

参考までに、HTML と CSS の関連部分を次に示します。

  <div id="top-menu">
    <ul>
      <li><a href="home">Home</a></li>
      <li><a href="about">About</a></li>
    </ul>
  </div>

CSS:

body { /* CSS Reset - http://meyerweb.com/eric/tools/css/reset/ */
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: 0; 
  font-size: 100%; 
  vertical-align: baseline; 
  background: transparent; 
}

ol, ul { list-style: none; }
li {
  display: inline;
  padding-left: 30px;
  padding-right: 30px;
}

a { 
  text-decoration: none;
  color: black;
}

#top-menu {
  position: relative;
  /*display: block;*/
  background-color: #f9f9f9;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 60px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#top-menu a {
  text-shadow: 1px 1px 0 #fff;
  color: #4b4b4b;
  width: auto;
  height: 100%;
  display: inline-block;
}

#top-menu > ul > li > a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li > a:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }
#top-menu li.sfHover > a { color: #fff; text-shadow: none; }

パディングやマージンなどで構成される領域全体ではなく、グラデーションがテキストのみに制限されているのはなぜですか?

前もって感謝します。

4

4 に答える 4

2

CSS に特定の変更を加えました。これがあなたが探していたものだと思います。

ライブデモ

ul, li {
    margin: 0;
    padding: 0;
}

#top-menu {
  position: relative;
  /*display: block;*/
  background-color: #f9f9f9;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eeeeee;
}
#top-menu ul{
    margin: 0 35px;
}
#top-menu ul li{
    display:inline-block;
    margin-left: -4px;
}
#top-menu a {
  text-shadow: 1px 1px 0 #fff;
  color: #4b4b4b;
  width: auto;
  height: 100%;
  display: inline-block;
    padding: 25px 30px;
}
于 2013-04-24T09:07:11.080 に答える
2

最初にグラデーションがありましたa

#top-menu > ul > li > a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li > a:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }

これは にあるはずliです。

#top-menu > ul > li { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li:hover  { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }

次に、の高さを上げましたli。

LI の例: http://jsfiddle.net/tCH39/1/

aそれ自体をスタイルしたい場合。

これを行う：

ol, ul { list-style: none; padding: 0; margin:0; }


a { 
    text-decoration: none;
    color: black;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
}

a-example を示すフィドル: http://jsfiddle.net/tCH39/7/

a はスタイルが必要な要素であり、「全体」をクリックできるため、これは私の本でははるかにクリーンな方法です。

于 2013-04-24T09:04:59.527 に答える
1

li の a タグにのみスタイルを指定しています。

試す-

#top-menu > ul > li { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }

多分それは助けます

リンク: http://jsfiddle.net/tCH39/2/

于 2013-04-24T09:02:45.340 に答える