为什么我的微软雅黑字体没有生效
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="nav">
<ul>
<li>首页</li>
<li>图片</li>
<li>视频</li>
<li>手记</li>
</ul>
</div>
</div>
<!-- 主体 -->
<div class="body">
<div class="top">
<img src="img/1.jpeg">
</div>
<div class="topLayer"></div>
<div class="topLayer-top">
<div class="word">MY BEAUTIFUL LIFE</div>
<button>LOOK MORE ></button>
</div>
<div class="middle">
<div class="m-top">
<div class="commen weibo">
<img src="img/weibo.png">
<div class="comm">MICROBLOG</div>
</div>
<div class="commen weixin">
<img src="img/weixin.png">
<div class="comm">WECHAT</div>
</div>
<div class="commen qq">
<img src="img/QQ.png">
<div class="comm">QQ</div>
</div>
</div>
<div class="m-middle"></div>
<div class="m-bottom"></div>
</div>
<div class="bottom"></div>
</div>
<!-- 尾部 -->
<div class="footer"></div> </body>
</html>
css代码：
*{
padding: 0;
margin: 0;
}
.header{
height: 100px;
width: 100%;
/*开发前用在区域块用背景色辅助开发
background-color:#eee;*/
}
.header img{
height: 85px;
width: 300px;
padding-left: 100px;
padding-top: 8px;
}
.header .logo{
float: left;
}
.header .nav{
float: right;
}
.header ul{
padding-right: 20px;
}
.header li{
float: left;
padding-right: 80px;
line-height: 100px;
list-style-type: none;
font-size: 15px;
font-weight: bolder;
color: #7d7d7d;
}
.body .top{
width: 100%;
height: 600px;
}
.body .top img{
width: 100%;
height: 600px;
}
.body .topLayer{
position: absolute;
top: 100px;
left: 0px;
background-color: black;
width: 100%;
height: 600px;
opacity: 0.5;
}
.body .topLayer-top{
width: 500px;
height: 300px;
position: absolute;
top: 400px;
margin-top: -150px;
left: 50%;
margin-left:-250px;
/*开发前用在区域块用背景色辅助开发*/
/*background-color: lightcoral;*/
z-index: 2;
}
.body .topLayer-top .word{
padding-top: 100px;
font-size: 45px;
font-family: "Microsoft YaHei";
text-align: center;
font-weight: bolder;
color: white;
}
button{
width: 200px;
height: 60px;
margin-top: 50px;
font-family: "Microsoft YaHei";
background-color: #F5704F;
color: #fff;
margin-left:150px;
font-weight: bolder;
font-size: 14px;
border-radius: 8px;
}
.body .middle{
width: 1000px;
margin: 0 auto;
}
.body .middle .m-top .commen{
float: left;
width: 33.3%;
padding-top: 50px;
text-align: center;
}
.body .middle .m-top .comm{
font-weight: bolder;
padding-top:20px;
color: #7d7c7f;
font-size: 17px;
}
.body .middle .m-top img{
width: 100px;
height: 100px;
}
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星