ホームページ > 記事 > ウェブフロントエンド > Web ページのナビゲーション演習 (2)

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

零下一度オリジナル: 2017-05-09 14:14:461308ブラウズ

私の他のナビゲーション演習は、Guoke.comのナビゲーションを参考にして実行されました。ソースコードを見ると、このWebサイトのCSSコードは非常に明確に記述されており、クラスの構成が明確であることがわかりました。これも素晴らしいです。よくわかりませんでしたが、気に入っています。

Guoke.com ナビゲーション

このナビゲーションを初めて見たとき、慎重に考える必要があることがいくつかあります
1. ホームページの前にある小さな家のアイコンはどの要素に配置する必要がありますか? 2. ホームページの下部にある小さな三角形を実現するにはどうすればよいですか? 3. 背面にさらに三角形があるか?
4. [詳細] をクリックした後に表示される
ドロップダウンメニュー
を実装するにはどうすればよいですか? 多くの知識ポイントを結び付けることができるように、最初に左側だけを実装します。

         <p id="gheader">
             <p class="gh-wrap">
                 <p class="fl">
                     <ul class="gh-nav reset">
                         <li>
                             <a href="">
                                 <span class="gnicon-home"></span>
                                 首页
                                 <b class="gnarrow-up"></b>                                    
                             </a>
                         </li>
                         <li><a href="">科学人</a></li>
                         <li><a href="">小组</a></li>
                         <li><a href="">问答</a></li>
                         <li><a href="">Mooc学院</a></li>
                         <li><a href="">知性</a></li>
                         <li id=&#39;moreNav&#39;>
                             <a href="" class="">
                                 更多
                                 <i class="gnarrow-down"></i>
                             </a>
                             <p class="gh-list">
                                 <ul class="reset">
                                     <li><a href="">日志</a></li>
                                     <li><a href="">活动</a></li>
                                     <li><a href="">在行</a></li>
                                     <li><a href="">十五言</a></li>
                                     <li><a href="">研究生</a></li>
                                 </ul>
                             </p>
                         </li>
                     </ul>
                 </p>
             </p>
         </p>

1 をマークします。この HTML 構造も 2 層の p パッケージコンテンツ #gheader .gh です。 - Wrap外側のレイヤーは頭部を示し、内側のレイヤーは頭部全体のスタイルと位置の調整に使用できます

2. 前のナビゲーション演習とは異なり、これは ul その理由は、元の Web ページの先頭にナビゲーション + 検索

があるためです。左側がメッセージリマインダーです。左のフロート #gheader .gh-wrap外层是为了表明头部，里层可以用作样式以及整个头部部分的位置调整
2、不同于上一个导航练习，这个在ul外部又包围了一层，是因为原来网页的头部，左面是导航+搜索，右面是消息提醒。一个左浮动一个右浮动。这样结构更清晰。
3、

链接a的前置图标。

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

当我设置图标与文本首页居中时遇到了麻烦，原因是由于Web ページのナビゲーション演習 (2)对vertical-line：middle;的渲染情况不一致。

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

就不附加代码了，我描述一下，被红色边框框住的内容设置了高度，设置了行高，且二者相等。那么文本内容自然居中。
为图片设置vertical-line:middle;的意思是把图片放在所在行的中部，于是该图片就找到了已经居中的文本内容的底部（图片矮）或顶部（图片高）。

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

与Web ページのナビゲーション演習 (2)一样的设置，却造成不一样的观赏效果。是因为什么，我也说不清楚，但是可以看出规律，ie6、7选择将图片与文本都放在最上部，且二者居中对齐。
所以就想到了一个兼容的解决方案，选择将前置图标与文本的外围元素a，的高度设为与图片一样高，并设置高度等于行高，则可以让文本居中，而图片设置vertical-line：middle;则可以与a内的文字顶部或底部对齐。也可以水平对齐（ie6、7）。
```
.gh-wrap .gh-nav li a{
    display: inline-block;
    height: 18px;
    line-height: 18px;
    padding: 11px;
    text-decoration: none;
    color: #d5d5d5;
}
.gh-nav li a:hover{
    background: #393939;
    color: #fff;
}
.gnicon-home{
    background: url(gk/5-icon.png) transparent no-repeat;
    display: inline-block;
    vertical-align: middle;
}
.gh-nav  a .gnicon-home{
    background-position: 0 0;
    height: 18px;
    width: 16px;
    margin-right:5px ;

}
```
1、细心的可以发现，我重新设置了a と右のフロート 1 つです。これにより、構造がより明確になります。
3.
リンク a の前面アイコン。

2015 -01-19_144747.jpg

アイコンとテキストをホームページの中央に配置するときに問題が発生しました。理由は、IE6 と 7 にvertical-line:middl
e; のレンダリングに一貫性がありません。 🎜🎜🎜🎜🎜Web ページのナビゲーション演習 (2)🎜🎜 アタッチなしコードでは、赤い枠で囲まれたコンテンツには高さが設定されており、行の高さが設定されており、この 2 つは等しいことを説明します。そうすれば、テキストコンテンツは自然に中央に配置されます。 🎜
画像にvertical-line:middle; を設定します 🎜 は画像を中央に配置することを意味しますしたがって、画像は、すでに中央に配置されているテキストコンテンツの下部 (短い画像) または上部 (高い画像) に配置されます。 🎜🎜🎜🎜🎜IE6, 7🎜🎜最新のブラウザと同じ設定ですが、表示効果が異なります。理由は説明できませんが、IE6 と 7 では画像とテキストの両方を上部に配置し、中央に配置するパターンがわかります。 🎜 そこで、互換性のある解決策を考えました。前面のアイコンとテキストの周囲の要素 a の高さを画像と同じ高さに設定し、その高さを行の高さと同じに設定することを選択しました。次に、テキストを中央揃えにすることができ、画像設定 vertical-line: middle; を使用して、a 内のテキストの上部または下部に揃えることができます。水平方向に揃えることもできます (ie6、7)。 🎜
```
 .gnarrow-down,.gnarrow-up{
     line-height: 0;
     height: 0;
     width: 0;
     border: 4px solid transparent;
     color: #4c4c4c;
 }
 .gnarrow-up{
     position: absolute;
     border-bottom-color: #85C155;
     bottom: 0;
     left: 50%;
     margin-left: -4px;
 }
 .gnarrow-down{
     display: inline-block;
     vertical-align: middle;
     border-top-color:#d5d5d5 ;
     border-width: 3px;
     margin-left: 3px;
 }
 .gh-nav li a:hover{
     background: #393939;
     color: #fff;
 }
 .gh-nav li a:hover i,.gh-nav li a:hover b{
     color: #393939;
 }
```
🎜1. 注意して見ると、a の高さを設定する必要があるため、幅が親要素を満たすかどうかを心配しているため、a のスタイルをリセットしていることがわかります。前回のメモで気になったので、インライン要素をインラインブロックレベル要素に変換する方法についても触れておきます。実は、縦線Web ページのナビゲーション演習 (2)のパフォーマンスについてもここでメモしておきます。 🎜2. Guoke.com フロントエンドエンジニアは、フロントアイコンのスタイルを設定する際に、共通の設定、背景画像のソースの設定、プレゼンテーションフォームの変換、およびセンタリングを設定しました。ホームページのようなフロントページのアイコンもこのパブリックスタイルを使用できます。 🎜次に、別のスタイルを設定し、画像の位置、サイズ、余白、およびその他の特別な設定を設定します。 🎜🎜🎜🎜正三角形と逆三角形を設定します🎜🎜🎜🎜🎜🎜Web ページのナビゲーション演習 (2)🎜
```
 .gnarrow-down,.gnarrow-up{
     line-height: 0;
     height: 0;
     width: 0;
     border: 4px solid transparent;
     color: #4c4c4c;
 }
 .gnarrow-up{
     position: absolute;
     border-bottom-color: #85C155;
     bottom: 0;
     left: 50%;
     margin-left: -4px;
 }
 .gnarrow-down{
     display: inline-block;
     vertical-align: middle;
     border-top-color:#d5d5d5 ;
     border-width: 3px;
     margin-left: 3px;
 }
 .gh-nav li a:hover{
     background: #393939;
     color: #fff;
 }
 .gh-nav li a:hover i,.gh-nav li a:hover b{
     color: #393939;
 }
```
1、设置这个三角，其实是很有技巧性的，觉得真的是对css了解的非常熟悉，才能想到这样的技巧。内容置空，宽度高度为0，设置其边框，然后通过分别设置上下左右的边框的颜色，可以获得各个方向的三角。
2、注意：color这个属性具有继承性，他表示前景色，不仅设置文本的颜色，还设置了边框的颜色。在Web ページのナビゲーション演習 (2)会发现识别不出透明色，然后通过分别设置前景色来改变border的颜色。
3、绿色箭头采用绝对定位。下拉箭头采用行内块级元素进行定位。
设置子菜单

Web ページのナビゲーション演習 (2)
```
 #moreNav .gh-list{
     position: absolute;
     right: 0;
     top: 40px;
     width: 80px;
     border: 1px solid #e0e0e0;
     box-shadow: 1px 1px 1px #f3f3f3;
     background: #fff;
     padding: 7px 0 8px;
 }
 #moreNav .gh-list li {
     /*之前设置过浮动*/
     width: 100%;
     height: 25px;
 }
 #moreNav .gh-list li a{
     /*之前设置过表现形式为行内块级元素，并设置过padding*/
     width: 100%;
     height: 25px;
     text-align: center;
     line-height: 25px;
     padding: 0;
 }
 #moreNav .gh-list li a:hover{
     background: #e0e0e0;
 }
```
1、子菜单需要进行绝对定位。
2、需要理解特制度的概念，我会专门写这个的，因为我们在编写css样式规则时，却发现这个规则先后顺序不一样，展示的效果不一样，css规则写的嵌套层次不一样，展示的结果可能也不一样，就像这里我们之前都设置过li>a的样式，所以会对子菜单的样式有影响。
3、继承的样式即使靠的再进，也没有专门写过的样式优先级高。例如，line-height具备继承性，所以我就不打算为a写行高，但是a的行高却被之前设置的覆盖了，却没有继承父元素的样子。
第二步设置包围元素样式
```
 #gheader{
 width: 100%;
 height: 43px;
 background: #4C4C4C;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
 }
 #gheader .gh-wrap{
 height: 40px;
 min-width: 1030px;
 padding: 0 30px;
 border-bottom: 3px solid #85c155;
 }
```
1、这是一个头部固定的网页，但是position:fixed一旦这么设置，必然导致其宽度收缩内容，这样就无法设置头部背景啦，于是设置宽度值为100%。
2、这里面的包围元素并没有要居中，而是以默认的格式。所以没有必要设置宽度，设置最小宽度就可以。当浏览器屏幕缩小时，也会有先收缩再维持的视觉效果。
3、发现a里面有很对  这类标签，注意，我都放在了<a></a>里,因为这些行内元素，我们通过将其修饰，然后放置一些下拉箭头，首页图标，鼠标点击标记。

第三步：对导航元素进行基本布局

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

       .fl{
       float: left;
   }
   #moreNav p{
       display: none;
   }
   .gh-wrap .gh-nav li{
       float: left;
       position: relative;
       height: 40px;
   }
   .gh-wrap .gh-nav li a{
       display: block;
       line-height: 40px;
       padding: 0 10px;
       text-decoration: none;
       color: #d5d5d5;
   }

1、我先隐藏了二级菜单
2、设置li为相对定位，目的是有助于二级菜单的定位
3、a的设置较之前一致

修饰导航

这就是基本的导航的设置。虽然看着很简单，但是只有自己编写了才会发现之间的一些小小的细节。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Shrinktofit (適応幅) の使用法とサンプルチュートリアルを共有します。次の記事：Shrinktofit (適応幅) の使用法とサンプルチュートリアルを共有します。

続きを見る