效果

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网易云音乐</title><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/common.css">
</head><body><!-- header部分 --><header><!--  --><div class="header-top"><div class="header-top-box"><h1><a href="#"></a></h1><ul class="header-top-ul"><li><a id="findMusic" href="#">发现音乐</a><em></em></li><li><a id="myMusic" href="#">我的音乐</a><em></em></li><li><a id="follow" href="#">关注</a><em></em></li><li><a id="shop" href="#">商城</a><em></em></li><li><a id="musician" href="#">音乐人</a><em></em></li><li><a id="download" href="#">下载客户端</a><em></em></li></ul><div class="search"><input type="text" placeholder="音乐/视频/电台/用户" name="" id=""></div><a href="#" class="designer">创作者中心</a><a href="#" class="login">登录</a></div><!--  --><div class="header-none-box"></div><!--  --><div class="header-bottom"><div class="header-bottom-box"><ul class="header-bottom-ul"><li><a id="intro" href="#"><span>推荐</span></a></li><li><a id="ranking" href="#"><span>排行榜</span></a></li><li><a id="songList" href="#"><span>歌单</span></a></li><li><a id="radio" href="#"><span>主播电台</span></a></li><li><a id="singer" href="#"><span>歌手</span></a></li><li><a id="newDisk" href="#"><span>新碟上架</span></a></li></ul></div></div></div></header></body></html>

css

* {margin: 0px;padding: 0px;box-sizing: border-box;
}a {text-decoration: none;
}li {list-style: none;
}
header {width: 100%;
}header .header-top {width: 100%;height: 70px;background-color: #242424;
}header .header-top .header-top-box {width: 1100px;height: 100%;margin: auto;
}header .header-top .header-top-box h1 {float: left;width: 176px;height: 70px;padding-right: 20px;
}header .header-top .header-top-box h1 a {display: block;width: 100%;height: 100%;background: url("../logo/topbar.png") no-repeat 0px 0px;
}header .header-top .header-top-box ul {float: left;height: 100%;line-height: 70px;
}header .header-top .header-top-box ul li {float: left;position: relative;
}header .header-top .header-top-box ul li a {position: relative;display: block;color: #cccccc;font-size: 14px;height: 100%;padding: 0px 20px;
}header .header-top .header-top-box ul li a:hover {color: #ffffff;background-color: #000000;
}header .header-top .header-top-box ul li em {position: absolute;left: 45%;/* display: none; */top: 91%;width: 12px;height: 7px;background: url("../logo/topbar.png") no-repeat -226px 0px;
}header .header-top .header-top-box ul li:last-child>a::before {content: "";display: block;/*让为元素可以设置宽高*/position: absolute;left: 95px;top: 20px;width: 28px;height: 15px;background: url("../logo/topbar.png") no-repeat -191px 1px;
}header .header-top .header-top-box .search {float: left;width: 158px;height: 32px;/* background-color: green; */border-radius: 16px;margin: 19px 0px 0px 85px;background-color: #ffffff;position: relative;
}header .header-top .header-top-box .search::before {content: "";display: block;width: 16px;height: 16px;position: absolute;left: 8px;top: 8px;background: url("../logo/topbar.png") no-repeat -9px -107px;
}header .header-top .header-top-box .search input {width: 74%;/* height: 16px; */position: absolute;left: 27px;top: 8px;background-color: #fff;outline: none;border: none;
}header .header-top .header-top-box .designer {display: block;float: left;width: 90px;height: 30px;font-size: 12px;color: #ccc;border: 1px solid #4f4f4f;border-radius: 15px;line-height: 30px;margin: 20px 0px 0px 15px;padding-left: 16px;
}header .header-top .header-top-box .designer:hover {color: #fff;border-color: #fff;
}header .header-top .header-top-box .login {display: block;float: left;width: 28px;height: 16px;font-size: 12px;color: #787878;margin: 28px 0px 0px 15px;}header .header-top .header-top-box .login:hover {text-decoration: underline;
}/*  */
header .header-none-box {width: 100%;height: 5px;/* display: none; */background-color: #d80000;
}/*  */
header .header-bottom {width: 100%;height: 35px;/* display: block; */background-color: #c11515;
}header .header-bottom .header-bottom-box {width: 1100px;height: 100%;margin: auto;
}header .header-bottom .header-bottom-box ul {height: 100%;width: 100%;padding-left: 180px;
}header .header-bottom .header-bottom-box ul li {height: 100%;float: left;line-height: 35px;
}header .header-bottom .header-bottom-box ul li a {display: block;height: 100%;line-height: 35px;color: #fff;font-size: 12px;padding: 0px 15px;
}header .header-bottom .header-bottom-box ul li a span {padding: 2px 15px 3px 15px;border-radius: 20px;
}header .header-bottom .header-bottom-box ul li a span:hover {background-color: #8f1515;
}