Web page navigation exercises (2)

My other NavigationExercise was carried out with reference to the navigation of Guoker.com. When I checked the source code, I found that the css code of this website was really clear and classy. The organization is also great. Although I don’t understand it very well, I just like it when I look at it.

Guoke.com Navigation

When I see this navigation for the first time, there are a few things that I need to think about carefully
1. In which element should the small house icon in front of the homepage be nested?
2. How to implement the small triangle at the bottom of the homepage?
3. More triangles at the back?
4. How to implement the drop-down menu that appears after clicking More?
I will only implement the left side first, so that I can connect many knowledge points.

• Step one: Design the corresponding html structure, and mark the id and class

           <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. This html structure is also a two-layer p package content #gheader .gh-wrapThe outer layer is to indicate the head, and the inner layer can be used for style and position adjustment of the entire head part
  2. Different from the previous navigation exercise, this There is another layer surrounding ul because the head of the original web page has navigation+search on the left and message reminders on the right. One left float and one right float. This makes the structure clearer.
  3,

• The front icon of link a.

  
  

  ##Web page navigation exercises (2)
  When I set the icon and text to be centered on the homepage, the reason is that IE6 and 7 The rendering of vertical-line: mid

  dle; is inconsistent.

  
  

  Modern browsers
  There is no additional code. Let me describe it. The height of the content framed by the red border is set. row height, and both are equal. Then the text content is naturally centered.

  Setting vertical-line:middle; for
  picture means placing the picture in the middle of the line, so the picture finds the bottom (short picture) or top ( Picture height).

  
  

  IE6 and 7
  have the same settings as modern browsers, but produce different viewing effects. I can’t explain why, but I can see the pattern. IE6 and 7 choose to put both pictures and text at the top, and align them in the center.

  So I thought of a compatible solution, choose to set the height of the front icon and the peripheral element of the text
  a to the same height as the picture, and set the height equal to the line height, then the text can be Centered, and the image setting vertical-line: middle; can be aligned with the top or bottom of the text within a. Can also be aligned horizontally (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. If you are careful, you can find that I have reset the style of

  a because I need to set the height for a. I am worried that the width will fill the parent element as I worried about in the previous note, so I converted inline elements to inline block-level elements. The conversion method is also mentioned in this note. In fact, I have also made notes about the performance of vertical-line modern browsers here. 2. When the front-end engineer of Guoke.com set the front icon style, he made settings separately. A common setting, set the source of the background image, converted the presentation form, and set the centering. So when except for the home page, Front icons can also use this public style.
  Then set a separate style, set the position of the image, size, and special settings such as margins.
  

• Set the equilateral and inverted triangles

  
  ##Web page navigation exercises (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 page navigation exercises (2)会发现识别不出透明色，然后通过分别设置前景色来改变border的颜色。
  3、绿色箭头采用绝对定位。下拉箭头采用行内块级元素进行定位。

• 设置子菜单

  
  

  Web page navigation exercises (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里面有很对<b></b> <span></span> <i></i>这类标签，注意，我都放在了<a></a>里,因为这些行内元素，我们通过将其修饰，然后放置一些下拉箭头，首页图标，鼠标点击标记。

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

  
  

  Web page navigation exercises (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视频教程

The above is the detailed content of Web page navigation exercises (2). For more information, please follow other related articles on the PHP Chinese website!