Web ページのナビゲーション演習

ナビゲーションの演習を行っているとき、練習のために成功したWebサイトのソースコードを見て、これらの成功したコードを通して、コードの背後にあるフロントエンドエンジニアのプログラミングのアイデアを学ぶことができればと思います。 。 ソースコードを見ながら、これまで見落としていた細かい部分も知ることができ、とてもためになったと感じています。

Lagou.com の CSS ファイルを開くと、最初の部分では

コメント を使用して、文書の作成時刻、作成者、スタイルシート内の特定の要素の色、幅、高さをマークし、見やすくしています。 2 番目の部分は、いくつかの初期化された要素スタイルと初期化されたパブリック クラスです。
3 番目の部分は、Web ページの各部分のスタイルです。

• 私が行った最初のナビゲーション演習は、Lagou.com のナビゲーションでした。

  
  

  Web ページのナビゲーション演習
  観察と思考

  1. このナビゲーションには何レベルのネストを記述する必要がありますか?
  2. 幅を設定しますか、それとも 100% を使用しますか?
  3. 中央に配置するにはどうすればよいですか?
  4. ログインと登録の間の紙一重を実現する方法。
  これらは私が発見した問題であり、今後も必ず問題が発生するでしょう。
  

• 周囲の要素のスタイルを設定します

    #header{
        background: #fafafa;
        height: 60px;
        min-width: 1024px;
        border-top: 3px solid #00B38A;
    }
    #header .wrapper{
        width: 1024px;
        margin: 0 auto;
    }

  1. 一番外側の #header は、ナビゲーションの高さとナビゲーションの背景色を設定し、境界線の上部のスタイルを追加します。

  2. 内部 .wrapper は幅を設定し、外部 #header は両方とも 属性 #header设置了导航的高度，以及导航的背景色，增添了border-top的样式。
  2、内部.wrapper设置了宽度，外部#header设置了最小宽度，二者属性值一样。当然显示屏的宽度肯定大于1024px,这样在加上在.wrapper里进行margin: 0 auto;可以实现宽度为1024的内容居中。

• 对导航元素进行基本布局

  
  

  Web ページのナビゲーション演習

    .wrapper .logo{
        float: left;
        margin-top: 7px;
        width: 229px;
        height: 43px;
        background: url(image/logo.png) no-repeat;
    }
    .wrapper .navheader{
        float: left;
        margin-left: 30px;
    }
    .navheader li{
        float: left;
    }
    .wrapper .loginTop{
        float: right;
    }
    .loginTop li{
        float: left;
    }

  1、设置logo时，图片原来的尺寸就是229×43，所以这样设置并不会拉伸图片。
  2、logo与导航菜单均左浮动，登录注册按钮向右浮动。

• 对导航菜单进行基本样式修饰
  注意：当鼠标经过a时，需要有一个3px的border-bottom，但是这个3px不能超过#header，需要做的就是让li的高度为60px，让a的高度为57px，这样当鼠标经过时，显示底边，不会突出。

  
  

  Web ページのナビゲーション演習

    .navheader li{
        height: 60px;
        padding: 0px 20px;                
    }
    .navheader li a{
        display: block;
        line-height: 57px;
        text-decoration: none;
        color: #999;
        font-size: 20px;
    }
    .navheader li a:hover{
        color: #333;
        border-bottom: 3px solid #00B38A;
    }
    .loginTop li{
        height: 30px;
        line-height: 30px;
        color: #FFF;
        background: #00B38A;
    }
    .loginTop li a{
        display: block;
        line-height: 30px;
        padding: 0px 10px;
        color: #fff;
        text-decoration:none ;
    }
    .loginTop li a:hover{
        color: #CCEAE3;
    }

  1、a为行内元素需要将他转化为块级元素，这样才能够设置高度。行内元素如果不设置为块级，直接设置行高，虽然也可以改变高度，并且占据文档流，但是行高所占据的空白并不会是属于a的。
  2、细心的可以发现，我为每一个a只设置了行高，并没有设置高度，因为在IE6、7版本的浏览器，我发现未设置高度时，我发现a并没有具备真正的块级元素具备的那样，宽度充斥父元素。但是设置了高度后，发现他们一下子具备了块级元素的特点。但是我们不想让他那样，所以我就不写高度了。这样效果均兼容。如果写了呢，也很简单只要为a补上一个float<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>
  3、ie6，并不支持png格式的图片。。。。。

• 其实乍一看，貌似具备了长相，但是我发现，我鼠标经过菜单，菜单的变化是一个渐变的，而不是突然，。

    .navheader a,.loginTop a{
        transition: all .2s ease-in-out ;
        -webkit-transition: all .2s ease-in-out ;
        -moz-transition: all .2s ease-in-out ;
        -o-transition: all .2s ease-in-out ;
    }

  transition这个属性可以设置，当某个元素的某个样式改变时，可以进行渐变的变化。他可以实现更精彩的画面，需要学习html5的相关知识。会继续学习的。

• *{<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>:none;}设置所有元素的轮廓默认为无。

• body,p,a,span,ul,li{margin: 0;padding: 0;} の値は同じです。もちろん、表示画面の幅は 1024px 以上である必要があるため、.wrapper に margin: 0 auto; を追加することで、幅 1024 のコンテンツを表示できます。中心にあります。

  🎜 ナビゲーション要素の基本レイアウト🎜🎜🎜🎜🎜Web ページのナビゲーション演習🎜

      <p>
          </p><p>
              </p><p>
                  <a></a>
                  </p>

                      
  • 首页
                      
  • 论坛
                      
  • 我的简历
                      
  • 发布职位
                  
                  
                      
  • 登录
                      
  • |
                      
  • 注册
                  
                                             

      

  🎜1. ロゴを設定する場合、画像🎜元のサイズは 229×43 なので、この設定では画像は引き伸ばされません。 🎜2. ロゴとナビゲーション メニューは両方とも フローティング🎜、ログイン登録 ボタン 🎜 が右側にフロートします。 🎜🎜🎜🎜ナビゲーション メニューの基本スタイルを変更します🎜注: マウスが a の上を通過するときは、3 ピクセルの境界線 bottom🎜 ですが、この 3px は #header を超えることはできません。行う必要があるのは、高さを li にすることです。 > 60px にして a の高さを 57px にすると、マウスが上を通過したときに下端がはみ出さずに表示されます。 🎜🎜🎜🎜🎜2015 -01-18_200656.jpg🎜rrreee🎜1. a はインライン要素であり、高さを設定できるようにブロックレベル要素に変換する必要があります。インライン要素がブロック レベルに設定されておらず、行の高さが直接設定されている場合、高さを変更してドキュメント フローを占有することはできますが、行の高さが占めるスペースは a に属しません。 🎜2. 注意してみると、各 a の行の高さを設定しているだけであり、IE6 および 7 バージョンのブラウザでは高さを設定していないことがわかります。高さが設定されていないため、a には、真のブロックレベル要素のように親要素を満たす幅がないことがわかりました。しかし、高さを設定した後、それらが突然ブロックレベルの要素の特性を持つことがわかりました。でも、そんなことはしてほしくないので、身長は書きません。この効果は互換性があります。作成する場合は、float<a href="http://www.php.cn/wiki/974.html" target="_blank">:left🎜 コードを追加するだけです。 >🎜3、ie6はpng形式の画像をサポートしていません。 。 。 。 。 🎜🎜🎜🎜実際、一見するとそのように見えますが、マウスがメニューを通過すると、メニューの変更は突然ではなく徐々に行われることがわかりました。 🎜rrreee🎜<code>transition この属性は、要素の特定のスタイルが変更されるときに設定でき、グラデーションを変更できます。もっとエキサイティングな写真を作成するには、html5🎜 の関連知識を学ぶ必要があります。これからも学び続けます。 🎜🎜🎜🎜*{<a href="http://www.php.cn/wiki/938.html" target="_blank">outline🎜:none;}</a>すべての要素を設定します アウトラインデフォルトは「なし」です。 🎜🎜🎜🎜body,p,a,span,ul,li{margin: 0;padding: 0;}すべての要素の内側🎜外側マージン🎜を 0 に設定します。 🎜

• ul.<a href="http://www.php.cn/wiki/1081.html" target="_blank">reset</a>{list-style:none;}去除掉列表的默认样式

• 首先分出body与footer两个部分。这里面还涉及相应的height与min-height设置，但是这些又涉及一些兼容的问题，所以我就先不写了，回头再另写一篇。

• 最外层嵌套使用id='header'标记，方便寻找里面子元素，里面就可以用class啦，.wrapper可以用作包围元素做公共类使用。class="navheader"与class="loginTop"可以作为查找元素使用。

• ul>li>a，一般的导航基本上都是这样的结构。

• ul前的a可以以背景为图片，做链接。

• 第一步：设计出html结构，并为元素设置相应的id与类

      <p>
          </p><p>
              </p><p>
                  <a></a>
                  </p>

                      
  • 首页
                      
  • 论坛
                      
  • 我的简历
                      
  • 发布职位
                  
                  
                      
  • 登录
                      
  • |
                      
  • 注册
                  
                                             

      

• 对网页进行全局的css设置。
  我先写下做导航时我用到的

• 对导航进行css设置

以上がWeb ページのナビゲーション演習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。