导航栏超链接的写法

制作导航栏步骤分析：
1、首先需要先设置导航栏的宽高、位置；
2、添加ul列表，定义ul的宽高、背景、显示位置；
3、设置导航栏 li 浮动并排显示；
4、设置文本样式，给a标签转换成块元素，设置大小和样式；
5、设置鼠标滑过效果：文字颜色、背景颜色、边框颜色等。

         /*全局样式*/
        *{margin: 0;padding: 0;}
        li{list-style:none;}
        a{text-decoration: none;}
        /*nav样式*/
        .nav{width: 260px;height: 60px;margin: auto; background-color: black;text-align: center;}
        .nav li{float: left; height: 60px;margin-right: 25px;}
        .nav li a{display: block;width: 60px;height: 60px; color: #ffffff;font-size: 14px; line-height: 60px;text-align: center;}
        a:hover{background-color: coral;}/*鼠标滑过*/

    <ul class="nav">
        
            <li><a href="http://www.baidu.com">首页a>li>
            <li><a href="http://www.baidu.com">主要介绍a>li>
            <li><a  href="http://www.baidu.com">联系我们a>li>
    
    ul>

在制作网页中用户体验感很重要，如果只给导航栏文字设置超链接区域，在文字所占的li空白区域内，点击时没有反应，这样会造成用户体验差，所以在写导航超链接的时候，最好将内联元素超链接a标签，转换成块元素，给a写宽高，使得li=a的宽高，这样即使点击文字的空白区域也会触发超链接的效果。

体会：
1、a是内联元素，想要给a写宽高，以及伪类效果，需要用display：block；转换成块元素。
2、在给a写宽高之后，不必再给li写，因为li本身有自适应宽高效果。

/------------------------------------------------------------------------------更新---------------------------------------------------------------------------------/
今天又学习到了一个好玩的鼠标滑过效果：鼠标滑过中文，显示英文

        .nav a span{display: none;}/*1、英文隐藏*/            
        .nav a:hover{background-color: coral;}/*2、设置当鼠标滑过a的时候改变背景颜色*/
        .nav a em:hover{display: none;}/*在改变颜色的同时，设置em中的中文隐藏*/
        .nav a:hover span{display: inline;}/*中文隐藏之后，设置鼠标滑过显示span标签中的英文*/

在这里，html中a标签中包含两个标签，分别是span和em（em需要在样式表中添加上取消斜体样式的属性 em{font-style: normal;}）,span 标签中写的是英文，em中写的中文。

 <ul class="nav">
        
            <li><a href="http://www.baidu.com"><em>首页em><span>Homespan>a>li>
            <li><a href="http://www.baidu.com"><em>主要介绍em><span>Introducespan>a>li>
            <li><a  href="http://www.baidu.com"><em>联系我们em><span>Contactspan>a>li>
    
    ul>

总结：
1、在展示界面中，英文是看不到的，所以需要使用display：none；隐藏起来；
2、当鼠标滑过a标签时，改变背景颜色；
3、与此同时，设置鼠标滑过em时，隐藏中文，使其显示英文，所以需要将em中的中文隐藏起来；
4、由于第一步设置了span隐藏，所以鼠标滑过a标签显示，就需要使用display：inline；将span标签变回本身的内联元素，才能够在中文隐藏的时候，英文显示在界面上。

注意：
鼠标滑过标签的伪类不可写错，否则不能实现效果。例如最后一步，如果把伪类：hover写给了span，则无法正常显示。