0

良い一日！html 5 と css3 で見栄えの良いメニューを作成する方法を学ぼうとしています。これらの言語の経験が少ないため、メニューの背後にあるロジックが不足している可能性があることにすぐに気付きました。このスレッドの目的は、メニューのロジックとスタイルの設定方法を確実に理解 (またはこのスレッドの後で理解) することです。

2 つの部分に分かれており、2 番目の部分はコーディング自体に焦点を当て、最初の部分は理論に焦点を当てます。

さて、私が読んだ/理解したことは、すべてのメニューのアイデアは、基本的にカスタムスタイルのリストになることです。ここまでは良いのですが、< li > 要素のスタイル設定でどのくらいの書式設定が行われているか、 < li > 内の要素のスタイル設定でどのくらい (そして何が) 行われているかを正確に把握できていません。これらの要素の中身について言えば、多くの人がボタンよりも < a > 要素を使用することを好むようです。それは標準ですか、それともスタイルの好みですか? < a > 要素を使用する利点はありますか?

これで、実際のコードに進むことができます。私が把握できるものを使用して、ゼロから小さなメニューを作成しました。css の一部など、li:last-child一部が機能していません。li:first-child

1) エラーがどこにあるか知りたいです。2) このコードを改善する方法を知りたいです。

以下は、いくつかのコメントを含むソースコード全体です。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
<style>
    /* this should remove all padding, margins and outlines*/
  * {
    margin: 0;
    padding: 0;
    outline: none;  
}
     /*This will style the list itself*/   
       ul {
      list-style: none;  
        margin: 3% 40%;
    }
      li:first-child {
          border-top-left-radius: 10px; 
          border-bottom-left-radius: 10px;  
      }
    li:last-child {
        border-top-right-radius: 10px; 
        border-bottom-right-radius: 10px; 
    }
     li {
        float : left;       
        }
    /*This will style the buttons*/
    .buttonStyle {
        width : 60px;
        height : 20px;
        border-radius: 1px;
        }
    /*This should make them change their color when they are hovered*/
    .buttonStyle:hover { 
                            background: #383;                            
      /*this line :*/      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0);
                       } 

</style>
</head>
<body>

    <!-- custom made list to store the buttons-->
    <ul >
        <!-- Just some buttons to make it look like a menu-->
        <li><input type="button" class="buttonStyle" /></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
    </ul>
</body>
</html>
4

1 に答える 1

1

A と INPUT/BUTTON の違いは、A が段落を構成しないことです。フレージング コンテンツのみが含まれていない場合。通常はこちらの方が好ましいと思います。

https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories

:first-child および :last-child 疑似クラスに関して、適切に使用されていない可能性があります。

多分あなたはこれをやろうとしている：

li:first-child input {
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;  
}
li:last-child input{
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}

http://jsfiddle.net/3uw6p/

于 2013-06-21T10:05:25.583 に答える