超链接样式

作者: 敏姐姐_e9d0 | 来源:发表于2018-11-10 20:31 被阅读0次

html中修改超链接a标签的样式
超链接样式
超链接样式
超链接访问过后 hover 样式就不出现了
document下的集合
前端Day - 02
css知识点
兼容问题整理( 二)
10.超链接样式-CSS基础
前端教程：链接伪类控制超链接

学点不同的超链接


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>我的海贼</title>
</head>
<style>
    body{
        margin: 0;/*外边框*/
        margin-bottom: 80px;/*文本下边框*/
        background-color:lightblue;
    }
    #nav{
        width: 100%;
        background-color: skyblue;
        height: 80px;
        left: 0;
        top: 0;
        position: fixed;/*生成绝对定位的元素，相对于浏览器窗口进行定位。
                          元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定*/
        z-index: 2;/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
        /*text-align: center;*/
    }
    #inner-nav{
        width: 1000px;
        margin: 0 auto;/*第一个表示top和bottom，第二个表示left和right
因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）*/
        text-decoration: none;/*用于设置清除超链接的默认下划线:*/
        text-align: right;
        height: 80px;
        line-height: 80px;
    }
    #inner-nav a{
        margin: 0 20px;
        text-decoration: none;
        color: blue;
        font-size: 24px;
        display: inline-block;/*使段落生出行内框：*/
        height: 80px;
    }
    #inner-nav a:hover{
        background-color: white;/*选择鼠标指针浮动在其上的元素，并设置其样式：*/
    }
</style>
<body>
<div id="nav">
    <div id="inner-nav">
        <a href="#">我的海贼</a>
        <a href="#">路飞简介</a>
        <a href="#">索隆简介</a>
        <a href="#">娜美简介</a>
        <a href="#">其他人物简介</a>
    </div>
</div>

</body>
</html>

此时鼠标停留在一个超链接时会出现白色背景。效果看下图

效果图