The creation of a simple static navigation menu for Web pages

The creation of Web page navigation menu

Recently beginner Html/css, today learned a simple static navigation bar of the production. A very simple, very basic thing.
Idea: navigation menu –> Book directory, entry structure –> with no list to build the navigation menu

1. First build the UL in the HTML code:

    <ul>        <li><a href="#">首&nbsp;页</a></li>        <li><a href="#">新闻快讯</a></li>        <li><a href="#">产品展示</a></li>        <li><a href="#">售后服务</a></li>        <li><a href="#">联系我们</a></li>    </ul>

The effect is as follows (the display in the browser is underlined and we remove it in the second step):

• Home
• News Flash
• Product Show
• After - sales service
• Contact Us

2. This is where we have the basic directory, we create CSS files, introduced to HTML, and then do the style cleanup, both the original style erased, and build a new style:

• Basic style cleanup: *{margin:0;padding:0}

• Unordered list dot removal: Li{list-style-type:none;}

• Underline removal: A{text-decoration:none}

At the same time, some CSS customizations are made on this basis.

• A:hvoer is a CSS pseudo-class that is used when moving the mouse to a style
  Final CSS code:

   *{margin: 0;padding: 0;font-size: 20px};   ul{width:100px}li{list-style-type: none;}   a{text-decoration:none;display:block;height: 30px;line-height: 30px;width: 100px;background-color: #ccc;margin-bottom: 1px;text-indent: 10px}   a:hover{background-color: #f60;color: #fff};

You need to set the a tag as a block element to set the aspect, hover effect code:A{display:block}

Text indent label Text-indent does not affect the overall width

3. Effects

The creation of a simple static navigation menu for Web pages