header.css
body {
display: flex;
justify-content: center;
}
.box {
width: 600px;
height: 100px;
background-color:#D43C33;
display: flex;
justify-content: space-between;
align-items: center;
}
.box1 {
height: 50px;
width: 150px;
background-color: #D43C33;
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
height: 50px;
width: 150px;
align-items: center;
justify-content: center;
background-color: ghostwhite;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
wangyiyun.css
.box0 {
width: 600px;
height:200px;
background-color: white;
}
.box3 {
width: 600px;
height: 80px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 3px solid whitesmoke;
}
.box11 {
margin-right: 10px;
}
.box111 {
}
.you {
font-size: 20px;
background-color: whitesmoke;
width: 600px;
height: 30px;
display: flex;
align-items: center;
border-left: 3px solid red;
}
.she {
width: 600px;
height: 400px;
background-color: whitesmoke;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.she1 {
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.p{
position:absolute;
top: 0px;
right: 0px;
}
.q{
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp: 1 ;
overflow: hidden;
padding: 6px 2px 0px 6px;
}
daohanglan.css
.he {
display: flex;
justify-content: space-between;
align-items: center;
width: 600px;
height: 50px;
background-color: whitesmoke;
font-size: 20px;
border-bottom: 2px solid gray;
list-style: none;
}
a:hover {
color: #D43C33;
}
.he1 {
margin-left: 20px;
}
.he2 {
height: 50px;
margin-left: 20px;
border-bottom: 4px solid #D43C33;
display: flex;
align-items: center;
margin-right: 20px;
}
.he3 {
margin-right: 20px;
}
.he div:hover{
cursor: pointer;
color: #D43C33;
}
a{
color: #000000;
}
热歌榜.css
.banner{
width: 600px;
height: 180px;
background-image: url(./hot_music_bg_2x.jpg);
background-size: cover;
box-sizing: border-box;
padding-left: 20px;
display: flex;
align-items: center;
}
.could{
background: url('index_icon_2x.png') no-repeat -48px -60px;
width: 283px;
height: 133px;
}
.update{
margin-top: 10px;
font-size: 16px;
color: hsla(0,0%,100%,.8);
}
.gedan{
width: 600px;
height: 600px;
}
.ge{
width: 600px;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
}
.player{
width: 600px;
height: 80px;
border-bottom: 1px solid gray;
display: flex;
align-items: center;
justify-content: space-between;
}
.shuzi{
width: 50px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: red;
}
.shuzi1{
width: 50px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: gray;
}
.sq{
background: url('index_icon_2x.png') no-repeat 0 0;
width: 24px;
height: 16px;
}
.SQ{
display: flex;
justify-content: space-between;
align-items: center;
}