PHP Full Stack Development (eight): Cssⅹ navigation bar Production

After learning the CSS for so long, we can now try to sledgehammer a little bit, we use the CSS knowledge we learned to make a navigation bar.

As we all know, in the modern navigation bar, the most common is to use the unordered table to make navigation bar.

We can use the following code to make a horizontal navigation bar

    <ul>        <Li><ahref= "#home">Home</a></Li>        <Li><ahref= "#news">Notice</a></Li>        <Li><ahref= "#things">Order</a></Li>        <Li><ahref= "#contact">Contact information</a></Li>        <Li><ahref= "#gen">Personal</a></Li>        <Li><ahref= "#about">About</a></Li>    </ul>

This is a typical use of the UL-made navigation bar. This is the original thing.

And now we use CSS to style the navigation bar.

See what it's going to look like. Let's first get rid of its list style, and then set the internal and external margins all to 0.

{    list-style-type: none;     margin: 0;     padding: 0;}

This will then snap to the edge of the browser. and removed the list of flags.

The CSS code in the example above is the standard code used in the vertical and horizontal navigation bars.

To make the list different from the surrounding style, we add a background color to the list and set the width.

ul {    list-style-type: none;     margin: 0;     padding: 0;     width: 200px;     background-color: #f1f1f1;}

This is how the navigation bar works after the setup is complete.

But we feel that this link is still too crowded. Add some height clearance to the link.

The first thing we need to do when we increase the spacing is to turn <a> into a block element, or we can't add internal and external margins to inline elements.

So we use the following code to add margins to the link.

ul{List-style-type:None;margin:0;padding:0;width:200px;Background-color:#f1f1f1; }Li a{Display:Block;padding:8px 8px;text-decoration:None;}Li A:hover{Background-color:#555;Color: White;}

Such a simple vertical navigation bar is done.

If you need to make a horizontal navigation bar, just set the Li's float property to left.

Let's look at an example of a horizontal navigation bar:

ul{List-style-type:None;margin:0;padding:0;Background-color:#333;Overflow:Hidden; }Li{float: Left;}Li a{Display:Block;text-decoration:None;Color: White;padding:14px 16px; }Li A:hover{Background-color:#111;}

Here the float:left is used to achieve the display:inline, the same effect, but it is worth noting.

When using Float:left, for horizontal display, you must set overflow: hidden;

PHP full Stack Development (eight): Cssⅹ navigation bar production