为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我.nav1 a:hover,.nav1 a:active{}里的 background-color:#BE3948;没有用?我直接改了ul标签的才成功的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.1页面头部制作练习题</title>
<style type="text/css">
/*在此定义相关样式,控制列表的显示形式*/
.nav1 li{
    list-style-type: none;
    float:left;
    width:50px;
    height:30px;
    text-align:center;
}
.nav1 a:link,.nav1 a:visited{
 text-decoration: none;
 color: #000;
 font-size: 16px;
 font-family: "微软雅黑";
 
}
.nav1  a:hover,.nav1  a:active{
 text-decoration: none;
 color: #FF0;
 font-size: 16px;
 font-family: "微软雅黑";
 background-color:#BE3948;
 display:block;
}
ul a:hover,a:active{
    background-color:#BE3948;
 display:block;
}

</style>
</head>

<body>
<h3>课程难度</h3>

<!--在此制作一个无序列表-->
<div>
    <ul class="nav1">
        <li><a href="#" >全部</a></li>
        <li><a href="#" >初级</a></li>
        <li><a href="#" >中级</a></li>
        <li><a href="#" >高级</a></li>
    </ul>
</div>

</body>
</html>


正在回答

2 回答

首先line-height;是一种垂直居中的方法;一般高度和你的盒子高度相同(line-height: 顾名思义行高(行间距),指在文本中,行与行之间的 基线间的距离 )
- **弊端**:当文字内容的长度大于块的宽时,就有内容脱离了块。)

------

display:block;是将元素显示为块级元素

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

块状元素也可以通过代码display:inline将元素设置为内联元素(看一看加深印象)内联元素特点:

1、和其他元素在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变


希望能记住这两个特点,加油!!

1 回复 有任何疑惑可以回复我~

找到了,.nav1  a:hover,.nav1  a:active{}中要设置line-height的值,具体这个值是多少好像都没影响。

解决的办法是把a标签变为块级元素,display:block这句话意思是a标签变成块级元素后就自动占满了ul标签吗?而且是自动分摊了ul标签么?宽度?

0 回复 有任何疑惑可以回复我~
#1

MWHx

display:block这句话意思是a标签变成块级元素后就自动占满了ul标签吗? --------不是 它是沾满它父级的也就是li 我刚才把你的代码粘了下来发现还有两个中文分号 ,就是微软雅黑后面那个都是中文的分号
2019-09-03 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么我.nav1 a:hover,.nav1 a:active{}里的 background-color:#BE3948;没有用?我直接改了ul标签的才成功的

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信