2-9问题

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0px; margin:0px;}
/*头部*/
.head{
width:100%;
height:100px;
background-color: black
}
 
.logo{
width:300px;
height:100px;
background-image:url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png);
}
 
a{
color:white;
text-decoration: none
}
 
span{
padding-right:50px;
font-size:25px;
}
 
.headNav{
height:100px;/*使用这个方法让文字垂直居中*/
line-height:100px;
position:absolute;
right:0px;
top:0px;
}
/*--------------------------------------------------------------------------------------*/
/*主体内容*/
body{
width:100%;
height:600px;
background-color:#f2f2f2;
}
 
/*左边部分内容*/
.left{
/*border:1px solid red;*/
width:40%;
height:600px;
float:left;
/*background-color:gray;*/ 
/*text-align:center;*/
 
}
 
.leftContent{
/*border:1px blue solid;*/
width:310px;
margin:auto;
padding-top:100px;
/*font-size:16px;问题1：我想在这里设置内容的字体，为什么没效果*/
}
 
.leftContent a{
background-color:pink;
color:black;
text-decoration:none;
}
 
.leftContent span{
font-size:16px;/*问题2：为什么这里添加字体大小，连a标签的字体也跟这变小了？？*/
}
 
.leftContent div{
line-height:50px;
}
 
/*----------------------------------------------------------------------------------------------*/
/*右边内容*/
.right{
width:60%;
height:600px;
float:right;
/*background-color: pink;*/
}
 
.rightContent{
/*border:1px blue solid;*/
width:210px;
margin:auto;
padding-top:100px;
}
 
.rightContent div{
line-height:50px;
}
 
/*-----------------------------------------------------------------------------------*/
/*底部*/
.tail{
width:100%;
height:100px;
background-color: black;
clear:both;
}
 
.tailNav{
text-align:center;
/*border:1px yellow solid;*/
color:white;
line-height:100px;
}
 
</style>
</head>
<body>
<!--头部-->
<div class="head">
<div class="logo"></div>
<div class="headNav">
<span><a href=#>课程</a></span>
<span><a href=#>职业路径</a></span>
<span><a href=#>实战</a></span>
<span><a href=#>猿问</a></span>
<span><a href=#>手记</a></span>
</div>
</div>
 
<!--主体-->
<div class="body">
<!--左边部分-->
<div class="left">
<div class="leftContent">
<h3>课程推荐</h3>
<div><a href="#">职业路径</a><span> HTMLS与CSS3实习动态网页</span></div>
<div><a href="#">职业路径</a><span> 零基础入门Anddroid语法与界面</span></div>
<div><a href="#">职业路径</a><span> IOS基础语法与常用控件</span></div>
<div><a href="#">职业路径</a><span> PHP入门开发</span></div>
<div><a href="#">职业路径</a><span> JAVA入门开发</span></div>
</div>
</div>
 
<div class="right">
<div class="rightContent">
<h3>相关课程</h3>
<div>HTML &nbsp;&nbsp;CSS &nbsp;&nbsp;JavaScript</div>
<div>HTML &nbsp;&nbsp;CSS3 &nbsp;&nbsp;Jquery </div>
<div>移动端基础 &nbsp;&nbsp;移动端APP开发</div>
</div>
</div>
</div>
<!--底部-->
<div class="tail">
<div class="tailNav">
<span><a href=#>网站首页</a></span>
<span><a href=#>企业合作</a></span>
<span><a href=#>人才招聘</a></span>
<span><a href=#>联系我们</a></span>
<span><a href=#>常见问题</a></span>
<span><a href=#>友情链接</a></span>
</div>
</div>
</body>
</html>

请老师检查一下作业，有什么错的地方吗，另外我在评论里有两个问题，都是关于字体的，不是很明白，请老师讲解一下

慕丝6937110 2018-06-04

源自：CSS网页布局基础 2-10 编程练习

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2018-06-05 11:47:33

根据问题描述 , 如下:

leftContent设置内容的字体，为什么没效果
因为练习题设置span样式如下:
span在上面已经设置了字体大小 , 所以就不会继承leftContent设置的字体大小了.
为什么给span添加字体大小，连a标签的字体也跟这变小了,如下 ,
span设置字体大小后的a标签字体如下:

注释span中的字体效果
显示效果:
a标签并没有受到影响哦 , 希望能解答你的疑惑 ,祝学习愉快 !

收起回答

慕丝6937110 提问者 #1

哦哦哦，关于a标签的问题一定是我看当初错了，a标签具体自己的属性，不受其他样式设置的干扰但是关于span的字体问题，我在设置网页头部导航时确实已经设置了字体，但是不是根据class选择器的值10会大于标签选择器值1的吗，我之后设置body中的文字，是采用class的方式，应该字体会改变才对呀？？

2018-06-06 16:06:52
好帮手慕夭夭回复提问者慕丝6937110 #2

如果给元素直接设置的样式 , 那么它的优先级是要高于继承的 . 例如使用标签span设置的样式 , 和给他父元素class中设置的样式 . 那么span就不会继承父元素class中的样式哦

2018-06-06 16:39:06
慕丝6937110 提问者 #3

非常感谢！

2018-06-07 10:56:52