超链接样式
2018-11-10 本文已影响0人
敏姐姐_e9d0
学点不同的超链接
<!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>
此时鼠标停留在一个超链接时会出现白色背景。效果看下图
效果图
