为什么不显示企鹅 而是方框
@font-face{
font-family: "pingfangscregular";
src: url('../fonts/PingFangSCRegular.ttf') format('truetype')
}
body{
font-family: "pingfangscregular";
}
.site-head{
height: 150px;
}
.site-head .topbar{
height: 32px;
background-color: #2a2a2a;
color: white;
line-height:32px;
}
.site-head .topbar a{
color: white;
}
.site-head .topbar .shortcut-links{
float: left;
}
.site-head .topbar .shortcut-links> ul> li{
float: left;
margin-inline: 18px;
font-size: 12px;
}
.site-head .topbar .shortcut-links> ul> li.have-menu{
padding-right: 12px;
position: relative;
}
.site-head .topbar .shortcut-links> ul> li.have-menu .arrow{
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: transform .2s ease 0s;
}
.site-head .topbar .shortcut-links> ul> li.have-menu:hover .arrow{
transform: rotate(180deg);
}
.site-head .topbar .shortcut-links> ul> li.have-menu .arrow b{
position: absolute;
left: 4px;
top: 2px;
width: 6px;
height: 6px;
background-color: #fff;
transform: rotate(45deg);
}
.site-head .topbar .shortcut-links> ul> li.have-menu .arrow i{
position: absolute;
left: 4px;
top: 0.5px;
width: 6px;
height: 6px;
background-color: #2a2a2a;
transform: rotate(45deg);
}
.site-head .topbar .topbar-r{
float: right;
width: 225px;
}
.site-head .main-nav{
height: 40px;
background-color: #20BD9A;
}
.site-head .main-nav ul li {
float: left;
margin-right: 18px;
}
.site-head .main-nav ul li.have-menu{
padding-right: 16px;
position: relative;
}
.site-head .main-nav ul li a{
line-height: 40px;
color: white;
font-size: 16px;
}
.site-head .main-nav ul li.have-menu::before {
content: '';
position: absolute;
right: 0;
top: 18px;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-bottom: none;
border-top-color: white;
transition: transform .5s ease 0s;
}
.site-head .main-nav ul li.have-menu:hover::before{
transform:rotate(180deg);
}
.site-head .header-con{
height: 36px;
padding: 21px 0;
}
.site-head .header-con h1 {
float: left;
font-size: 24px;
color: #20BD9A;
line-height: 36px;
font-weight: bold;
}
.site-head .header-con .soso-box {
float: left;
margin-left: 20px;
width: 405px;
padding-top: 2px;
}
.site-head .header-con .soso-box input{
float: left;
width: 361px;
height: 28px;
border: 1px solid #20BD9A;
/* 分别按四个角进行设置 */
border-radius: 4px 0 0 4px;
font-size: 14px;
/* 取消默认的外线（文本框特有的东西） */
outline: none;
padding-left: 10px;
}
.site-head .header-con .soso-box .btn{
float: left;
width: 32px;
height: 30px;
background-color: #20BD9A;
}
<!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">
<title>暮云游 - 机票、酒店、旅游攻略</title>
<meta name="keywords" content="机票、酒店、旅游攻略、签证、出国、自由行">
<meta name="description" charset="慕云游商城有10多年旅游、行业经验为你提供服务">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header class="site-head">
<div class="topbar">
<div class="center-wrap">
<nav class="shortcut-links">
<ul>
<li>
<a href="">目的地</a>
</li>
<li>
<a href="">锦囊</a>
</li>
<li class="have-menu">
<a href="">社区</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li>
<a href="">行程助手</a>
</li>
<li class="have-menu">
<a href="">商城</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li class="have-menu">
<a href="">酒店.民宿</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li>
<a href="">特价酒店</a>
</li>
</ul>
</nav>
<div class="topbar-r">
<span class="iconfont"></span>
<span>|</span>
<span class="iconfont"></span>
<span class="iconfont">󰆯</span>
<span class="iconfont">󰄆</span>
<a href="">登陆</a>
<a href="">注册</a>
</div>
</div>
</div>
<nav class="main-nav">
<div class="center-wrap">
<ul>
<li class="have-menu">
<a href="">机酒自由行</a>
</li>
<li>
<a href="">优惠机票</a>
</li>
<li class="have-menu">
<a href="">跟团游</a>
</li>
<li>
<a href="">酒店</a>
</li>
<li class="have-menu">
<a href="">当地玩乐</a>
</li>
<li>
<a href="">签证</a>
</li>
<li>
<a href="">邮轮</a>
</li>
<li>
<a href="">和轮</a>
</li>
<li>
<a href="">保险</a>
</li>
<li>
<a href="">租车自驾</a>
</li>
<li class="have-menu">
<a href="">深度旅游</a>
</li>
<li>
<a href="">私人地址</a>
</li>
</ul>
</div>
</nav>
<!-- 页面顶部主要内容 -->
<div class="header-con">
<div class="center-wrap">
<h1>慕云游商城</h1>
<div class="soso-box">
<input type="text" placeholder="查询目的地/酒店/机票攻略">
<a href="" class="btn"></a>
</div>
</div>
</div>
</header>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星