0

やあみんなはあなたが私を助けることができることを望んでいた。

1時間以上この場所にいて、それが私を夢中にさせました。

基本的に私はCSSに関しては初心者ですが、学んでいます。現時点では、次のようなメニューを複製しようとしています。

実際のメニュー

私がこれまでに持っているものは次のようになります（フォントが異なることは知っていますが、問題はありません）： ここに画像の説明を入力してください

ご覧のとおり、iveは背景を取得しましたが、各タブ間の開始、終了、および区切り（黒い線の部分）をどのように作成するかがわかりません。

また、基本的には開始、中断、終了は.jpg画像として持っています。これを行うためのhtml5またはcss3曲線などを探していません。シンプルにしたいだけです:)。

これは私がこれまでに得たものです。残されたものを作成する方法についていくつかのヒントを教えていただければ幸いです。また、あまり優れていないアプローチを使用した場合は、より良いアプローチを提案してください。

html：

    <div id="header">

            <ul id="header-list">
                <li class="header-list-item">
                    <span class= "header-list-item-span" >Home</span>

                </li>

                <li class="header-list-item">
                  <span class= "header-list-item-span" >About Us</span>

                </li>
                <li class="header-list-item">
                   <span class= "header-list-item-span" >Services</span>

                </li>
            </ul>

    </div><!--END OF HEADER -->

css：

#header-list{
  display: table;

 position: relative;
 left: -3em;

  table-layout: fixed;
  margin-bottom: 0PX;
  margin-top: 0;
  margin-left: auto;

}

.header-list-item-span{
    background-image: url("img/menubody.jpg");
    color: white;
    display: inline-block;
    width: 5em;
    font-size: large;
    text-align: center;
    padding: .2em;
}

.header-list-item{
     display: table-cell;

 height: 4.2em;
  vertical-align:  bottom;

}
4

2 に答える 2

1

ここにアイデアがあります：

で包みulますdiv。最初のjpgをそのdivの背景画像として設定しpadding-left、画像が表示されるようにいくつか追加します。最後のjpgをulの背景画像として設定しpadding-right、画像も表示されるようにいくつか追加します。

また、私の意見では、CSSセレクターをさらに活用してHTMLを単純化する必要があります。

ヘッダーリストはとして選択できますdiv#header > ul。クラスで選択している項目は、で選択header-list-itemできますdiv#header > ul > li。スパンは実際には必要ないと思います。スタイルをli要素に直接適用できます。

于 2012-07-11T14:56:11.043 に答える
0

ulを別のdivでラップし、左側の内側にパディングを追加すると、開始画像を背景として配置できます。次に、右側の画像をulの背景にし、右側にパディングを追加します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <style>
        div,li,ul,span { margin: 0;padding: 0;}

        body  { width: 700px; margin: 0 auto; }

        #header 
        {
            background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
            padding-top: 50px;
            position: relative;
        }

        #header .nav 
        {
            background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
            float: right;
            width: 413px;
            padding-left: 26px;
            margin-right: 20px;
        }

        #header .nav .nav-wrapper 
        {
            background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
            padding-right: 26px;
        }

        #header ul 
        {
            position: relative;
            list-style: none;
        }
        #header ul li   
        {
            background: red;
            width: 120px;
            float: left;
            text-align: center; 
        }
        #header ul li span 
        {
             color: white; 
             padding: 8px 0px;
        }
        .clear { clear: both;}
    </style>
</head>
<body>


    <div id="header">
        <div class="nav">
            <div class="nav-wrapper">
                <ul>
                    <li><span>Home</span></li>
                    <li><span>About Us</span></li>
                    <li><span>Services</span></li>
                </ul>   
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>


</body>

于 2012-07-11T14:54:39.717 に答える