樂
喜
安
平

HTML5-12

1.QQMusic2-QQ音乐案例-新版

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>QQMusic2</title>
  6         <link rel="stylesheet" type="text/css" href="css/zixuereset.css"/>
  7         <link rel="stylesheet" type="text/css" href="css/QQMusic2.css"/>
  8     </head>
  9     <body>
 10         <!-- 顶层菜单区 -->
 11         <div id="top">
 12             <div id="logo">
 13                 <img src="img/qqLogo.png" >
 14             </div>
 15             <!-- 中间菜单 -->
 16             <ul id="topmenu">
 17                 <li>音乐馆</li>
 18                 <li>我的音乐</li>
 19                 <li>客户端</li>
 20                 <li>音乐号</li>
 21                 <li>VIP</li>
 22             </ul>
 23             <div id="search">
 24                 <input type="text" name="" id="text" value="" placeholder="搜索音乐 MV 歌单 用户" />
 25             </div>
 26             <div id="login">
 27                 登录
 28             </div>
 29             <div id="haohua">
 30                 开通绿钻豪华版
 31             </div>
 32             <div id="fufeibao">
 33                 开通付费包
 34             </div>
 35         </div>
 36         <!-- 中部菜单区 -->
 37         <div id="middle">
 38             <ul>
 39                 <li>首页</li>
 40                 <li>歌手</li>
 41                 <li>新碟</li>
 42                 <li>排行榜</li>
 43                 <li>分类歌单</li>
 44                 <li>电台</li>
 45                 <li>MV</li>
 46                 <li>数字专辑</li>
 47                 <li>票务</li>
 48             </ul>
 49         </div>
 50         <!-- 底层音乐区 -->
 51         <div id="bottom">
 52             <h2 id="recommend" >歌单推荐</h2>
 53             <!-- 菜单 -->
 54             <ul id="ul1">
 55                 <li>为你推荐</li>
 56                 <li>情歌</li>
 57                 <li>轻音乐</li>
 58                 <li>笛子</li>
 59                 <li>官方歌曲</li>
 60                 <li>网络歌曲</li>
 61             </ul>
 62             <ul id="ul2">
 63                 <li>
 64                     <div>
 65                         <img src="img/music1.png" >
 66                     </div>
 67                     <p>古风电子</p>
 68                     <p class="bofangliang">播放量:3.8万</p>
 69                 </li>
 70                 <li>
 71                     <div>
 72                         <img src="img/music2.png" >
 73                     </div>
 74                     <p>古风电子</p>
 75                     <p class="bofangliang">播放量:3.8万</p>
 76                 </li>
 77                 <li>
 78                     <div>
 79                         <img src="img/music3.png" >
 80                     </div>
 81                     <p>古风电子</p>
 82                     <p class="bofangliang">播放量:3.8万</p>
 83                 </li>
 84                 <li>
 85                     <div>
 86                         <img src="img/music4.png" >
 87                     </div>
 88                     <p>古风电子</p>
 89                     <p class="bofangliang">播放量:3.8万</p>
 90                 </li>
 91                 <li>
 92                     <div>
 93                         <img src="img/music5.png" >
 94                     </div>
 95                     <p>古风电子</p>
 96                     <p class="bofangliang">播放量:3.8万</p>
 97                 </li>
 98             </ul>
 99         </div>
100     </body>
101 </html>

QQmusic2.css

  1 *{
  2     /* border: 1px solid red; */
  3 }
  4 html,body{
  5     /* width: 100%;
  6     height: 100%; */
  7 }
  8 body{
  9     /* 去掉滚动条 */
 10     /* overflow: hidden; */
 11 }
 12 /* 将顶层菜单区top中的各项均设置为浮动样式 */
 13 #logo,#topmenu,#search,#login,#haohua,#fufeibao{
 14     float: left;
 15 }
 16 
 17 #logo img{
 18     /* height: 40px; */
 19 }
 20 /* 顶层菜单区样式 */
 21 #topmenu li{
 22     float: left;
 23     font-size: 18px;
 24     margin-right: 38px;
 25 }
 26 #top{
 27     overflow: hidden;
 28     height: 90px;
 29     width: 1230px;
 30     margin: 0 auto;
 31     border-bottom: 1px solid #DCDCDC;
 32 }
 33 #topmenu{
 34     height: 90px;
 35     line-height: 90px;
 36     margin-left: 40px;
 37 }
 38 /* 搜索区样式 */
 39 #search{
 40     height: 90px;
 41     line-height: 90px;
 42 }
 43 #search input{
 44     width: 224px;
 45     height: 40px;
 46     text-align: center;
 47     font-size: 14px;
 48     /* border: none; */
 49     outline: none;
 50     margin-left: 24px;
 51 }
 52 /* 登录区 */
 53 #login{
 54     height: 90px;
 55     line-height: 90px;
 56     font-size: 18px;
 57     padding: 0 24px;
 58 }
 59 /* 开通豪华版样式 */
 60 #haohua{
 61     font-size: 14px;
 62     margin-top: 26px;
 63     height: 40px;
 64     width: 110px;
 65     text-align: center;
 66     line-height: 40px;
 67     background-color: #31C27C;
 68     color: white;
 69 }
 70 /* 开通付费包样式 */
 71 #fufeibao{
 72     font-size: 14px;
 73     margin-top: 26px;
 74     height: 38px;
 75     width: 84px;
 76     text-align: center;
 77     line-height: 38px;
 78     margin-left: 10px;
 79     border: 1px solid #c9c9c9;
 80 }
 81 #logo{
 82     padding-top: 24px;
 83 }
 84 #middle{
 85     width: 1230px;
 86     /* height: 90px; */
 87     margin: 0 auto;
 88 }
 89 #middle ul li{
 90     float: left;
 91     margin-right: 44px;
 92     font-size: 16px;
 93 }
 94 #middle ul{
 95     overflow: hidden;
 96     height: 54px;
 97     line-height: 54px;
 98     margin-left: 230px;
 99 }
100 #recommend{
101     text-align: center;
102     font-size: 30px;
103     letter-spacing: 12px;
104     padding-top: 46px;
105     /* font-weight: bolder; */
106 }
107 #bottom{
108     background-color: #F3F3F3;
109     height: 470px;
110 }
111 #bottom #ul1 li{
112     float: left;
113     font-size: 16px;
114     margin: 0 22px;
115 }
116 #bottom #ul1{
117     overflow: hidden;
118     height: 80px;
119     line-height: 80px;
120     width: 580px;
121     margin: 0 auto;
122 }
123 /* 音乐列表样式 */
124 #ul2 li{
125     float: left;
126     margin: 10px 10px 0;
127 }
128 #ul2{
129     width: 1230px;
130     overflow: hidden;
131     margin: 0 auto;
132 }
133 #ul2 li div{
134     margin: 0 0 10px ;
135 }
136 #ul2 li p{
137     font-size: 14px;
138     margin: 4px 0 0 ;
139 }
140 .bofangliang{
141     color: gray;
142 }

 

posted @ 2021-07-09 20:15  喵酱爱吃鱼  阅读(116)  评论(0)    收藏  举报