码迷,mamicode.com
首页 > Web开发 > 详细

css

时间:2020-02-27 19:18:00      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:style   使用   pos   height   ima   header   play   lang   code   

1、hover是鼠标移动到当前标签上时,对应的css属性生效。

padding是给a标签按上、右、下、左的顺序加上边框

hover下面的属性:

background-color: blue;当鼠标移动到使用hover的标签上时,该属性生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position:fixed;
top:0;
right:0;
left:0;
height:48px;
background-color:#2459a2;
line-height:48px;
}
.pg-body{
margin-top:50px;
}
.w{
width: 980px;
margin: 0 auto;
}
/*padding:给menu加上样式,左右各增加10px边框*/
.pg-header .menu{
display:inline-block;
padding:0 10px 0 10px;
color:white;
}
/*当鼠标移动到当前标签上时,以下css属性才生效*/
.pg-header .menu:hover{
background-color:blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">抽屉新热榜</a>
<a class="menu">首页</a>
<a class="menu">专区</a>
<a class="menu">人类发布</a>
<a class="menu">视频</a>
<a class="menu">发现</a>
<a class="menu">话题</a>
</div>
</div>
<div class="pg-body">
<div>你问我答</div>
</div>
</body>
</html>

执行结果如下:

技术图片

如以上结果:

“人类发布”左右两边多了边框,是给a标签使用display属性,使其可以改变边距;

在padding属性,给其加上边框;

当鼠标放置上面时,背景变绿,这是hover的作用。

 

css

标签:style   使用   pos   height   ima   header   play   lang   code   

原文地址:https://www.cnblogs.com/wuxiaoru/p/12373430.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!