老师帮忙看一下，为什么我的字体会没有显示呢
来源：1-1 课程简介
慕粉1924517932
2022-03-03 19:07:01
问题描述：
老师请您帮忙检查一下代码为什么我的社区表格里字体会是白色的呢？
相关代码：HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行"> <meta name="Description" content="慕云游拥有10多年的旅游经验，可以为您提供全方位的旅游服务"> <title>慕云游-商城，机票，酒店，旅游攻略</title> <link rel="stylesheet" href="css/css.css"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <!-- 页首顶部大盒子 --> <header class="top-box"> <!-- 深色盒子 --> <div class="dark-box"> <!-- 深色盒子版心 --> <div class="core"> <ul> <li> <a href="javascript:;">目的地</a> </li> <li> <a href="javascript:;">锦囊</a> </li> <li class="cli"> <a href="javascript:;">社区</a> <em class="away"> <i></i> <b></b> </em> <div class="menus sqmenus"> <ul class="menus_list"> <li><a href="#">旅游论坛</a></li> <li><a href="#">旅游专栏</a></li> <li><a href="#">旅游问答</a></li> <li><a href="#">旅游生活分享平台</a></li> <li><a href="#">JEN旅游生活美学</a></li> <li><a href="#">BIU伴(原结伴同游)</a></li> <li><a href="#">负责任的旅行</a></li> <li><a href="#">特别策划</a></li> </ul> </div> </li> <li> <a href="javascript:;">行程助手</a> </li> <li class="cli"> <a href="javascript:;">商城</a> <em class="away"> <i></i> <b></b> </em> </li> <li class="cli"> <a href="javascript:;">酒店·民宿</a> <em class="away"> <i></i> <b></b> </em> </li> <li> <a href="javascript:;">特价酒店</a> </li> </ul> </div> <div class="right-layout"> <ul> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/fangdajing.png"> </a> </li> <li class="lis"> <a href="javascript:;"> <p></p> </a> </li> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/qq-fill.png"> </a> </li> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/xinlangweibo.png"> </a> </li> <li> <a href="javascript:;"> <img src="image/icon_x2vd2ugr8r/weixin.png"> </a> </li> <li> <a href="javascript:;"> <p>注册</p> </a> </li> <li> <a href="javascript:;"> <p>登录</p> </a> </li> </ul> </div> </div> <!-- 绿色的小盒子 --> <nav class="green-box"> <!-- 绿色盒子的版心 --> <div class="layout"> <ul> <li class="have"> <a href="javascript:;">机酒自由行</a> <p> <b></b> <i></i> </p> </li> <li> <a href="javascript:;">优惠机票</a> </li> <li class="have"> <a href="javascript:;">跟团游</a> <p> <b></b> <i></i> </p> </li> <li> <a href="javascript:;">酒店</a> </li> <li class="have"> <a href="javascript:;">当地玩乐</a> <p> <b></b> <i></i> </p> </li> <li> <a href="javascript:;">签证</a> </li> <li> <a href="javascript:;">邮轮</a> </li> <li> <a href="javascript:;">河轮</a> </li> <li> <a href="javascript:;">保险</a> </li> <li> <a href="javascript:;">租车自驾</a> </li> <li class="have"> <a href="javascript:;">深度旅游</a> <p> <b></b> <i></i> </p> </li> <li> <a href="javascript:;">私人定制</a> </li> </ul> </div> </nav> <!-- 图片LOGO和搜索框盒子 --> <nav class="logo-box"> <div class="log"> <div class="logo"> <h1>慕云游商城</h1> </div> <div class="Search-box"> <input type="search"> <!-- 放大镜盒子 --> <div class="magnifier"> <img src="image/icon_x2vd2ugr8r/fangdajing.png"width="20px"height="20px"> </div> </div> </div> </nav> </header> <!-- 宣传图片 --> <banner class=""> </banner> </body> </html>
相关代码：css3代码
@font-face{
font-family: "pingFangSCRegular";
src:url(../font/PingFangSCRegular.ttf)format('truetype');
}
body{
font-family:"pingFangSCRegular";
}
.top-box{
width:100%;
height: 150px;
}
.top-box .dark-box{
width:100%;
height:32px;
position: relative;
background-color: #2a2a2a;
display: block;
}
.top-box .dark-box .core{
width:1152px;
height:32px;
left: 107px;
margin:0 auto;
}
.top-box .dark-box .core ul{
}
.top-box .dark-box .core>ul>li{
float: left;
margin-left: 18px;
text-align: center;
line-height: 32px;
}
.top-box .dark-box .core>ul>li a{
color:white;
}
.top-box .dark-box .core>ul>li.cli{
padding-right: 15px;
position: relative;
}
.top-box .dark-box .core>ul>li.cli>.menus{
background-color: white;
position: absolute;
top:29px;
left:0;
/* 可以压盖住别的内容 */
z-index:9999;
/* 隐藏 */
/* display: none; */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
}
.top-box .dark-box .core>ul>li.cli .sqmenus{
width:121px;
}
.top-box .dark-box .core>ul>li.cli .sqmenus menus_list li{
height:20px;
}
.top-box .dark-box .core>ul>li.cli .sqmenus menus_list a{
font-size: 12px;
color:#1C1F21;
line-height: 20px;
}
.top-box .dark-box .core>ul>li.cli:hover>.menus{
display: block;
}
.top-box .dark-box .core>ul>li.cli .away{
width:12px;
height: 12px;
position:absolute;
top:50%;
right:0px;
margin-top:-6px;
transition:.2s ease 0s;
}
.top-box .dark-box .core>ul>li.cli .away i{
position:absolute;
width:8px;
height:8px;
left:2px;
top:1.5px;
background-color: white;
transform: rotate(45deg);
}
.top-box .dark-box .core>ul>li.cli .away b{
position: absolute;
width:8px;
height:8px;
left:2px;
top:-2px;
transform: rotate(45deg);
background-color:#2a2a2a;
}
.top-box .dark-box .core>ul>li.cli:hover .away{
transform: rotate(180deg);
}
.top-box .dark-box .right-layout{
width:300px;
height:32px;
position: absolute;
right:0px;
bottom:0px;
}
.top-box .dark-box .right-layout>ul>li{
float:left;
margin-right:18px;
line-height: 32px;
}
.top-box .dark-box .right-layout>ul>li>a{
color: white;
}
.top-box .dark-box .right-layout>ul>li>a>img{
width:20px;
height:20px;
line-height: 32px;
padding-top:7px;
}
.top-box .dark-box .right-layout>ul>li.lis p{
width:1px;
height:18px;
position: absolute;
bottom: 4px;
background-color:#D8D8D8;
}
.top-box .dark-box .right-layout>ul>li:nth-child(3){
margin-left: 16px;
}
.top-box .green-box{
height:40px;
background-color: #20BD9A;
}
.top-box .green-box .layout{
width:1115px;
height:18px;
margin:0 auto;
}
.top-box .green-box .layout ul li{
float: left;
margin-right:18px;
position: relative;
}
.top-box .green-box .layout ul li a{
font-size: 16px;
line-height: 40px;
color: white;
}
.top-box .green-box .layout ul li.have{
padding-right: 16px;
}
.top-box .green-box .layout ul li.have p{
width:0px;
height:0px;
border:6px solid transparent;
position: absolute;
right:0px;
top:50%;
margin-top: -3px;
border-top-color:white;
}
.top-box .green-box .layout ul li.have p:hover{
transform: rotate(90deg);
transition: .5s ease 0s;
}
.top-box .logo-box{
height:78px;
position: relative;
}
.top-box .logo-box .log{
width:1000px;
height:78px;
position: absolute;
left:50%;
left:190px;
}
.top-box .logo-box .logo{
width:120px;
height:36px;
position: absolute;
}
.top-box .logo-box .logo h1{
font-size: 24px;
color: #20BD9A;
text-align: center;
font-weight:bold;
margin-top: 21px;
}
.top-box .logo-box .Search-box{
width:405px;
height: 30px;
position: absolute;
left:140px;
margin-top: 21px;
}
.top-box .logo-box .Search-box input{
width:349px;
height:30px;
padding-right: 20px;
}
.top-box .logo-box .Search-box .magnifier{
width:30px;
height:30px;
background-color: #20BD9A;
float:right;
margin-right:26px;
position: relative;
}
.top-box .logo-box .Search-box .magnifier img{
position: absolute;
left:50%;
margin-left: -10px;
top:50%;
margin-top: -10px;
}写回答
1回答
-
好帮手慕星星
2022-03-04
同学你好，因为样式给a设置字体颜色为白色了，所以看不到
选择器中用的是空格，也就是所有后代元素a字体都是白色的。建议手动设置菜单项中a字体为黑色，参考：
祝学习愉快！
0
相似问题