Web page navigation exercises (ii)

My other navigation practice is to refer to the shell Web navigation, when viewing the source code, found that the site's CSS code is really clear, the organization of the class is also very good, although I do not understand, but it is looking very like.

Nutshell Web Navigation

The first time you see this navigation, there are a few things I need to think about.
1, home front of the small house icon should be nested within which element
2, the first page below the small triangle is how to realize
3, more behind the triangle?
4, click More after the drop-down menu appears, how to achieve?
I will only achieve the left, you can contact a lot of knowledge points.

• The first step: Design the appropriate HTML structure and tag the ID with the class

           <p id= "Gheader" > <p class= "gh-wrap" > <p class= "FL" >                                 <ul class= "Gh-nav reset" > <li> <a href= "" >                                 <span class= "Gnicon-home" ></span> Home                                                                 <b class= "gnarrow-up" ></b>                          </a> </li> <li><a href= "" > Science man </a></li> <li><a href= "> Group </a></li> <li><a href="                         "> Quiz </a></li> <li><a href=" ">mooc College </a></li>                             <li><a href= "" > </a></li> <li id= ' Morenav ' > <a HREf= "class=" "> More <i class=" Gnarrow-down "></i&                             Gt                                     </a> <p class= "gh-list" > <ul class= "Reset" >                                     <li><a href= "" > Log </a></li> <li><a href= "" > Activities </a></li> <li><a href= "" > Row </                                     a></li> <li><a href= "" > 15 words </a></li>                             <li><a href= "" > Graduate </a></li> </ul> </p> </li> </ul> </p > </p> </p>

  1, this HTML structure is also a two-layer p wrapping content #gheader .gh-wrap is to indicate the head, the inner layer can be used as a style and the entire head part of the position adjustment
  2, different from the previous navigation exercise, this ul outside and surrounded by a layer, is because the original page of the head, the left is navigation + search, the right is a message reminder. One left floats and one right floats. This makes the structure clearer.
  3.

• athe predecessor icon for the link.

  
  

  2015-01-19_144747.jpg

  I was in trouble when I set the icon to be centered on the first page of the text because of IE6, 7 vs. Vertical-line:middle, rendering is inconsistent.

  
  

  Modern browsers

  With no code attached, I describe the height of the contents of the red border, set the row height, and they are equal. Then the text content is naturally centered.
  Set vertical-line:middle for the picture, which means to put the picture in the middle of the row, so the picture finds the bottom of the text content that is already centered (the image is low) or the top (picture high).

  
  

  IE6, 7

  The same settings as the modern browser, but it creates a different viewing effect. Because of what, I also say not clear, but can see the law, IE6, 7 choose to put the picture and text in the top, and the two center alignment.
  So I think of a compatible solution, choose to set the front icon and the outer element of the text a , the height of the image as high as the picture, and set the height equal to the row height, you can let the text center, and the picture settings vertical-line：middle; can be the text within the top or bottom alignment. You can also align 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, careful to find, I reset the a style, because to set a height for a, worried as the previous note worried that the width will be filled with the parent element, so I convert inline elements into inline block-level elements, conversion method This note has also been mentioned, In fact, I have also made notes about Vertical-line's modern browser performance here.
  2, Shell net front-end engineer in setting the front icon style, he has set up, a common setting, set the background image source, converted the expression form, set the center, so when in addition to the first page such as the front icon can also use the public style. The
  then sets a style individually, sets the position of the picture, and the specific settings for the size, margin, and so on.

• Set the positive and inverted triangles

  
  

  2015-01-19_171118.jpg

   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, set this triangle, actually is very skillful, think really is to CSS understanding of very familiar, can think of such skills. The contents are empty, the width height is 0, the border is set, and the triangle of each direction can be obtained by setting the color of the border around the top and bottom respectively.
  2, Note: color This property has inheritance, and he represents the foreground color, not only the color of the text, but also the border. In IE6, 7, you will find that you cannot recognize the transparent color, and then you can change the color of the border by setting the foreground color separately.
  3, green arrows with absolute positioning. The drop-down arrows are positioned using inline block-level elements.

• Settings submenu

  
  

  2015-01-19_180822.jpg

   #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 {/* set before floating */width:100%; height:25px;     } #moreNav. gh-list li a{/* Previously set the representation as inline block-level elements and set over padding*/width:100%;     height:25px;     Text-align:center;     line-height:25px; padding:0; } #moreNav. gh-list li a:hover{background: #e0e0e0;} 

  1. Submenus need to be absolutely positioned.
  2, need to understand the concept of special system, I will specifically write this, because we write CSS style rules, but found that the rules are not the same sequence, the effect is different, CSS rules write nested levels are different, the results may be different, like here we have set before The style of the li>a , so it affects the style of the submenu.
  3, inherited styles even if the re-enter, there is no specifically written style priority. For example, line-height has inheritance, so I'm not going to write a row high for a , but the row height of a is overridden by the previous set, but does not inherit the parent element.

• The second step of setting the enclosing element style

   #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, this is a fixed-head page, but once the position:fixed is set, it inevitably causes its width to shrink, so the head background cannot be set, and the width value is set to 100%.
  2, the enclosing element of this polygon is not centered, but in the default format. So it is not necessary to set the width, set the minimum width. When the browser screen shrinks, there is also a visual effect of shrinking and then maintaining.
  3, found a there is a pair of <b> <span> <i> such tags, notice, I put them in the <a> , because of these inline elements, we decorate them by placing some drop-down arrows, home icons, and mouse click Marks.

• Step three: basic layout of navigation elements

  
  

  2015-01-19_112906.jpg

         . 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, I first hide the level two menu
  2, set li as the relative positioning, the purpose is to help the level two menu positioning
  3, a the setting is more consistent than before

• Retouch navigation

This is the basic navigation setting. Although it is easy to look at, it is only when you have written it that you will find some small details.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial