devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

pc酷狗网页最简洁代码2023最新_html酷狗网页

作者：小丑西瓜9 | 2024-03-18 02:19:50

赞

踩

html酷狗网页

做一个页面首先要做布局，布局订好，剩下的内容填充时不会太乱！
前几天老师讲的一个页面布局用flex布局来展示，

 首先做酷狗工作准备：

准备3gcss文件 

关于html 

 html

  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <!-- 网站说明 -->
  9. 		<meta name="description" content=""/>
  10. 		<!-- 关键字 -->
  11. 		<meta name="keywords" content="酷狗音乐-就是歌多！  小说相声也很多！"/>
  12.     <title>酷狗音乐 酷狗音乐-就是歌多！</title>
  13.     <!-- 引入futiocn -->
  14.     <link rel="shortcut icon" href="favicon.ico" />
  15.     <!-- 引入初始化样式 -->
  16.     <link rel="stylesheet" href="css/initialization.css">
  17.     <!-- 引入公共样式 -->
  18.     <link rel="stylesheet" href="css/public.css">
  19.     <!-- 引入酷狗样式 -->
  20.     <link rel="stylesheet" href="css/indext.css">
  21.     <!-- 引入js -->
  22.     <!-- <script src="js/flexible.js"></script> -->
  23. </head>
  24. <body>
  25.     <header class="header">
  26.         <div class="header-1 w">
  27.             <!-- //酷狗log部分制作 -->
  28.             <div class="header-kugou">
  29.                 <h1>
  30.                     <a href="#">酷狗音乐网站</a>
  31.                 </h1>
  32.             </div>
  33.             <div class="header-input">
  34.                 <div class="fam">
  35.                     <div class="icon">
  36.                     
  37.                     </div>
  38.                     <input type="search" value="郭德纲相声">
  39.                 </div>
  40.             </div>
  41.             <div class="header-3">
  42.                 <a href="#">音乐人</a>
  43.                 <a href="#">音频创造</a>
  44.                 <a href="#">VIP会员</a>
  45.                 <div class="d3">
  46.                     |
  47.                 </div>
  48.                 <div class="dl">
  49.                     登录
  50.                 </div>
  51.             </div>
  52.         </div>
  53.     </header>
  54.     <!-- //brann部分 -->
  55.     <div class="cmhead2">
  56.         <div class="esh w">
  57.             <ul style="display: flex;">
  58.                 <li class="font01">
  59.                     <a href="#">首页</a>
  60.                 </li>
  61.                 <li><a href="#">榜单</a></li>
  62.                 <li><a href="#">听书</a></li>
  63.                 <li><a href="#">直播</a></li>
  64.                 <li><a href="#">商城</a></li>
  65.                 <li><a href="#">下载酷狗</a></li>
  66.                 <li><a href="#">更多</a></li>
  67.             </ul>
  68.         </div>
  69.     </div>
  70.     <section class="section">
  71.         <ul>
  72.             <li>
  73.  
  74.             </li>
  75.         </ul>
  76.         <i class="section-left">
  77.  
  78.         </i>
  79.         <i class="section-2">
  80.             
  81.         </i>
  82.         <div class="span">
  83.             <a href="#">
  84.                 1
  85.             </a>
  86.             <a href="#">
  87.                 2
  88.             </a>
  89.             <a href="#">
  90.                 3
  91.             </a>
  92.         </div>
  93.         <div class="fnqb">
  94.             <a href="#" class="fnqb-1">
  95.                 <span class="wn-1">
  96.                 </span>
  97.                 下载电脑版
  98.             </a>
  99.             <a href="#" class="fnqb-1">
  100.                 <span class="wn-2">
  101.  
  102.                 </span>
  103.                 
  104.                 下载Android版
  105.             
  106.             </a>
  107.             <a href="#" class="fnqb-1">
  108.                 <span class="wn-3">
  109.  
  110.                 </span>
  111.                 
  112.                 下载iPhone版
  113.             
  114.             </a>
  115.         </div>
  116.     </section>
  117.     <!-- 以上是酷狗轮播图模块 -->
  118.     <section class="qonf w">
  119.         <div class="left">
  120.             <div class="heardmgn">
  121.                 <a href="#" class="oan">
  122.                     精选歌单
  123.                 </a>
  124.                 <a href="#" class="oen">
  125.                     更多
  126.                 </a>
  127.             </div>
  128.             <!-- 以上是酷狗内容区模块 -->
  129.             <div class="homep_d1_d1_d1">
  130.                 <div class="homep_d1_d1_d1-1">
  131.                     <a href="#" class="faonq">
  132.                         <img src="image/20220520134858418049.jpg" alt="">
  133.                         <span>
  134.                         
  135.                         </span>
  136.                         <div class="hunn">
  137.                             
  138.                         </div>
  139.                         <div class="iabg">
  140.                             <span>
  141.                                 1470.4万
  142.                             </span>
  143.                         </div>
  144.                     </a>
  145.                     <a href="#" class="qyub">
  146.                         白噪音：不一样的美妙声音
  147.                     </a>
  148.                 </div>
  149.                 <div class="homep_d1_d1_d1-2">
  150.                     <div class="fin">
  151.                         <div class="itron">
  152.                             <a href="#">
  153.                                 <img src="image/ne-1.jpg" alt="">
  154.                             </a>
  155.                             <h4>
  156.                                 米津玄師：日本“神”级音乐鬼才
  157.                             </h4>
  158.                             <span>
  159.                                 1394.31万 
  160.                              </span>
  161.                         </div>
  162.                         <div class="itron">
  163.                             <a href="#">
  164.                                 <img src="image/np-2.png" alt="">
  165.                             </a>
  166.                             <h4>
  167.                                 米津玄師：日本“神”级音乐鬼才
  168.                             </h4>
  169.                             <span>
  170.                                 14万 
  171.                              </span>
  172.                         </div>
  173.                         <div class="itron">
  174.                             <a href="#">
  175.                                 <img src="image/ne-3.jpg" alt="">
  176.                             </a>
  177.                             <h4>
  178.                                 米津玄師：日本“神”级音乐鬼才
  179.                             </h4>
  180.                             <span>
  181.                                 94万 
  182.                              </span>
  183.                         </div>
  184.                         <div class="itron">
  185.                             <a href="#">
  186.                                 <img src="image/ne-4.jpg" alt="">
  187.                             </a>
  188.                             <h4>
  189.                                 米津玄師：日本“神”级音乐鬼才
  190.                             </h4>
  191.                             <span>
  192.                                1394万 
  193.                             </span>
  194.                         </div>
  195.                     </div>
  196.                 </div>
  197.             </div>
  198.             <div class="homep_d1">
  199.                 <div class="homep_d1-hd">
  200.                     <h3>
  201.                         新歌首发
  202.                     </h3>
  203.                     <ul>
  204.                         <li>华语</li>
  205.                         <li>欧美</li>
  206.                         <li>日本</li>
  207.                         <li>韩国</li>
  208.                     </ul>
  209.                     <span>
  210.                         < 1/3 >
  211.                     </span>
  212.                 </div>
  213.                 <div class="homep_d1-bd">
  214.                     <ul>
  215.                         <li>
  216.                             <div class="qnenh">
  217.                                 <div class="qnenh-1">
  218.                                     <a href="#">
  219.                                         <img src="image/mqa-1.jpg" alt="">
  220.                                     </a>
  221.                                     <div class="fiang">
  222.                                         <p>
  223.                                             IAM
  224.                                         </p>
  225.                                         <p>
  226.                                             IVE
  227.                                         </p>
  228.                                     </div>
  229.                                 </div>
  230.                                 <div class="hyb">
  231.                                         
  232.                                 </div>
  233.                                 <div class="hyb-1">
  234.                                         
  235.                                 </div>
  236.                                 <div class="qnenh-2">
  237.                                     
  238.                                 </div>
  239.                             </div>
  240.                         </li>
  241.                         <li>
  242.                             <div class="qnenh">
  243.                                 <div class="qnenh-1">
  244.                                     <a href="#">
  245.                                         <img src="image/mpa-2.jpg" alt="">
  246.                                     </a>
  247.                                     <div class="fiang">
  248.                                         <p>
  249.                                             IAM
  250.                                         </p>
  251.                                         <p>
  252.                                             IVE
  253.                                         </p>
  254.                                     </div>
  255.                                 </div>
  256.                                 <div class="hyb">
  257.                                         
  258.                                 </div>
  259.                                 <div class="hyb-1">
  260.                                         
  261.                                 </div>
  262.                                 <div class="qnenh-2">
  263.                                     
  264.                                 </div>
  265.                             </div>
  266.                         </li>
  267.                         <li>
  268.                             <div class="qnenh">
  269.                                 <div class="qnenh-1">
  270.                                     <a href="#">
  271.                                         <img src="image/mpa-3.jpg" alt="">
  272.                                     </a>
  273.                                     <div class="fiang">
  274.                                         <p>
  275.                                             IAM
  276.                                         </p>
  277.                                         <p>
  278.                                             IVE
  279.                                         </p>
  280.                                     </div>
  281.                                 </div>
  282.                                 <div class="hyb">
  283.                                         
  284.                                 </div>
  285.                                 <div class="hyb-1">
  286.                                         
  287.                                 </div>
  288.                                 <div class="qnenh-2">
  289.                                     
  290.                                 </div>
  291.                             </div>
  292.                         </li>
  293.                         <li>
  294.                             <div class="qnenh">
  295.                                 <div class="qnenh-1">
  296.                                     <a href="#">
  297.                                         <img src="image/mpa-4.jpg" alt="">
  298.                                     </a>
  299.                                     <div class="fiang">
  300.                                         <p>
  301.                                             IAM
  302.                                         </p>
  303.                                         <p>
  304.                                             IVE
  305.                                         </p>
  306.                                     </div>
  307.                                 </div>
  308.                                 <div class="hyb">
  309.                                         
  310.                                 </div>
  311.                                 <div class="hyb-1">
  312.                                         
  313.                                 </div>
  314.                                 <div class="qnenh-2">
  315.                                     
  316.                                 </div>
  317.                             </div>
  318.                         </li>
  319.                         <li>
  320.                             <div class="qnenh">
  321.                                 <div class="qnenh-1">
  322.                                     <a href="#">
  323.                                         <img src="image/mpa-5.jpg" alt="">
  324.                                     </a>
  325.                                     <div class="fiang">
  326.                                         <p>
  327.                                             IAM
  328.                                         </p>
  329.                                         <p>
  330.                                             IVE
  331.                                         </p>
  332.                                     </div>
  333.                                 </div>
  334.                                 <div class="hyb">
  335.                                         
  336.                                 </div>
  337.                                 <div class="hyb-1">
  338.                                         
  339.                                 </div>
  340.                                 <div class="qnenh-2">
  341.                                     
  342.                                 </div>
  343.                             </div>
  344.                         </li>
  345.                         <li>
  346.                             <div class="qnenh">
  347.                                 <div class="qnenh-1">
  348.                                     <a href="#">
  349.                                         <img src="image/mpa-6.jpg" alt="">
  350.                                     </a>
  351.                                     <div class="fiang">
  352.                                         <p>
  353.                                             IAM
  354.                                         </p>
  355.                                         <p>
  356.                                             IVE
  357.                                         </p>
  358.                                     </div>
  359.                                 </div>
  360.                                 <div class="hyb">
  361.                                         
  362.                                 </div>
  363.                                 <div class="hyb-1">
  364.                                         
  365.                                 </div>
  366.                                 <div class="qnenh-2">
  367.                                     
  368.                                 </div>
  369.                             </div>
  370.                         </li>
  371.                         <li>
  372.                             <div class="qnenh">
  373.                                 <div class="qnenh-1">
  374.                                     <a href="#">
  375.                                         <img src="image/mpa-7.jpg" alt="">
  376.                                     </a>
  377.                                     <div class="fiang">
  378.                                         <p>
  379.                                             IAM
  380.                                         </p>
  381.                                         <p>
  382.                                             IVE
  383.                                         </p>
  384.                                     </div>
  385.                                 </div>
  386.                                 <div class="hyb">
  387.                                         
  388.                                 </div>
  389.                                 <div class="hyb-1">
  390.                                         
  391.                                 </div>
  392.                                 <div class="qnenh-2">
  393.                                     
  394.                                 </div>
  395.                             </div>
  396.                         </li>
  397.                         <li>
  398.                             <div class="qnenh">
  399.                                 <div class="qnenh-1">
  400.                                     <a href="#">
  401.                                         <img src="image/mpa-8.jpg" alt="">
  402.                                     </a>
  403.                                     <div class="fiang">
  404.                                         <p>
  405.                                             IAM
  406.                                         </p>
  407.                                         <p>
  408.                                             IVE
  409.                                         </p>
  410.                                     </div>
  411.                                 </div>
  412.                                 <div class="hyb">
  413.                                         
  414.                                 </div>
  415.                                 <div class="hyb-1">
  416.                                         
  417.                                 </div>
  418.                                 <div class="qnenh-2">
  419.                                     
  420.                                 </div>
  421.                             </div>
  422.                         </li>
  423.                     </ul>
  424.                 </div>
  425.             </div>
  426.         </div>
  427.         <div class="rigtch w">
  428.             <div class="rigtch-hd">
  429.                 <h3>
  430.                     热门榜单
  431.                 </h3>
  432.                 <a href="#">
  433.                     更多
  434.                 </a>
  435.             </div>
  436.             <div class="rigtch-bd">
  437.                 <a href="#" class="rigtch-bd-1">
  438.                     <div class="rigtch-bd-1-1">
  439.                         <img src="image/qin-1.png" alt="">
  440.                     </div>
  441.                     <ul class="qibb">
  442.                         <li>
  443.                             <span>
  444.                                1. Hillsong Young & Free - Wake (Studio Version)
  445.                             </span>
  446.                         </li>
  447.                         <li>
  448.                             <span>
  449.                                2. 邓超、陈赫、鹿晗、范志毅、宝石Gem、王勉 - WUHA
  450.                             </span>
  451.                         </li>
  452.                         <li>
  453.                             <span>
  454.                                3. Lil笑笑 - 山茶花读不懂白玫瑰
  455.                             </span>
  456.                         </li>
  457.                     </ul>
  458.                 </a>
  459.                 <a href="#" class="rigtch-bd-1">
  460.                     <div class="rigtch-bd-1-1">
  461.                         <img src="image/qin-2.png" alt="">
  462.                     </div>
  463.                     <ul class="qibb">
  464.                         <li>
  465.                             <span>
  466.                                1. Hillsong Young & Free - Wake (Studio Version)
  467.                             </span>
  468.                         </li>
  469.                         <li>
  470.                             <span>
  471.                                2. 邓超、陈赫、鹿晗、范志毅、宝石Gem、王勉 - WUHA
  472.                             </span>
  473.                         </li>
  474.                         <li>
  475.                             <span>
  476.                                3. Lil笑笑 - 山茶花读不懂白玫瑰
  477.                             </span>
  478.                         </li>
  479.                     </ul>
  480.                 </a>
  481.                 <a href="#" class="rigtch-bd-1">
  482.                     <div class="rigtch-bd-1-1">
  483.                         <img src="image/qin-3.png" alt="">
  484.                     </div>
  485.                     <ul class="qibb">
  486.                         <li>
  487.                             <span>
  488.                                1.好多倩 - 月亮不曾奔我而来
  489.                             </span>
  490.                         </li>
  491.                         <li>
  492.                             <span>
  493.                                2. H-Slang & Choco - You & Me
  494.                             </span>
  495.                         </li>
  496.                         <li>
  497.                             <span>
  498.                                3. 程响 - 可能
  499.                             </span>
  500.                         </li>
  501.                     </ul>
  502.                 </a>
  503.                 <a href="#"></a>
  504.                 <a href="#"></a>
  505.             </div>
  506.             <div class="fonn">
  507.                 <div class="rigtch-hd qjnv">
  508.                     <h3>
  509.                         热门榜单
  510.                     </h3>
  511.                     <a href="#">
  512.                         更多
  513.                     </a>
  514.                 </div>
  515.                 <div class="fonn-bd" >
  516.                     <a href="#" class="fonn-tu">
  517.                         <img src="image/ub-1.jpg" alt="" height="180px">
  518.                         <span class="fon">
  519.                             <div class="fonn-ico">
  520.  
  521.                             </div>
  522.                         </span>
  523.                     </a>
  524.                     <a href="#" class="iqnnn">
  525.                         <p>
  526.                             彩云是我写的信
  527.                         </p>
  528.                         <p>
  529.                             毛不易
  530.                         </p>
  531.                     </a>
  532.                 </div>
  533.                 <div class="iocnah">
  534.                     <div class="iocnah-1 eun">
  535.                         <a href="#">
  536.                             <img src="image/up-2.jpg" alt="">
  537.                         </a>
  538.                         <a href="#">
  539.                             <p>
  540.                                 Boat
  541.                             </p>
  542.                             <p class="aifa">
  543.                                 Ed Sheeran
  544.                             </p>
  545.                         </a>
  546.                     </div>
  547.                     <div class="iocnah-1">
  548.                         <div class="iocnah-1">
  549.                             <a href="#">
  550.                                 <img src="image/up-3.jpg" alt="" class="anqm">
  551.                             </a>
  552.                             <a href="#">
  553.                                 <p>
  554.                                     星辰如约
  555.                                 </p>
  556.                                 <p class="aifa">
  557.                                     刘惜君
  558.                                 </p>
  559.                             </a>
  560.                         </div>
  561.                     </div>
  562.                 </div>
  563.             </div>
  564.         </div>
  565.     </section>
  566.     <!-- 听书精选部分模块 -->
  567.     <div class="ptatr w">
  568.         <div class="ptatr-hd">
  569.             <div class="ptatr-bd-1">
  570.                 <div class="ptatr-bd-1-1">
  571.                     <h3>
  572.                         听书精选
  573.                     </h3>
  574.                 </div>
  575.                 <div class="ptatr-bd-1-2">
  576.                     <ul>
  577.                         <li>热门</li>
  578.                         <li>小说</li>
  579.                         <li>儿童</li>
  580.                         <li>相声</li>
  581.                         <li>感情</li>
  582.                     </ul>
  583.                 </div>
  584.             </div>
  585.             <div class="ptatr-bd-1-2">
  586.                 <a href="#">
  587.                     更多
  588.                 </a>
  589.             </div>
  590.         </div>
  591.         <div class="ptatr-bd">
  592.             <ul>
  593.                 <li>
  594.                     <div class="meng">
  595.                         <a href="#">
  596.                             <div class="mqb">
  597.                                 <img src="image/mm-1.jpg" alt="">
  598.                             </div>
  599.                         </a>
  600.                     </div>
  601.                     <div class="fontam">
  602.                         <p>
  603.                             凡人修仙传｜寻觅仙缘天道之路
  604.                         </p>
  605.                         <p class="annn">
  606.                             微媒有道
  607.                         </p>
  608.                     </div>
  609.                     <div class="ommma">
  610.                         <div>
  611.                             <img src="icon/aonnnah.png" alt="" width="20px">
  612.                         </div>
  613.                         <span>
  614.                             467.6万
  615.                         </span>
  616.                     </div>
  617.                 </li>
  618.                 <li><div class="meng">
  619.                         <a href="#">
  620.                             <div class="mqb">
  621.                                 <img src="image/mm-2.jpg" alt="">
  622.                             </div>
  623.                         </a>
  624.                     </div>
  625.                     <div class="fontam">
  626.                         <p>
  627.                             凡人修仙传｜寻觅仙缘天道之路
  628.                         </p>
  629.                         <p class="annn">
  630.                             微媒有道
  631.                         </p>
  632.                     </div>
  633.                     <div class="ommma">
  634.                         <div>
  635.                             <img src="icon/aonnnah.png" alt="" width="20px">
  636.                         </div>
  637.                         <span>
  638.                             467.6万
  639.                         </span>
  640.                     </div></li>
  641.                 <li><div class="meng">
  642.                         <a href="#">
  643.                             <div class="mqb">
  644.                                 <img src="image/mm-3.jpg" alt="">
  645.                             </div>
  646.                         </a>
  647.                     </div>
  648.                     <div class="fontam">
  649.                         <p>
  650.                             凡人修仙传｜寻觅仙缘天道之路
  651.                         </p>
  652.                         <p class="annn">
  653.                             微媒有道
  654.                         </p>
  655.                     </div>
  656.                     <div class="ommma">
  657.                         <div>
  658.                             <img src="icon/aonnnah.png" alt="" width="20px">
  659.                         </div>
  660.                         <span>
  661.                             467.6万
  662.                         </span>
  663.                     </div></li>
  664.                 <li><div class="meng">
  665.                         <a href="#">
  666.                             <div class="mqb">
  667.                                 <img src="image/mm-4.jpg" alt="">
  668.                             </div>
  669.                         </a>
  670.                     </div>
  671.                     <div class="fontam">
  672.                         <p>
  673.                             凡人修仙传｜寻觅仙缘天道之路
  674.                         </p>
  675.                         <p class="annn">
  676.                             微媒有道
  677.                         </p>
  678.                     </div>
  679.                     <div class="ommma">
  680.                         <div>
  681.                             <img src="icon/aonnnah.png" alt="" width="20px">
  682.                         </div>
  683.                         <span>
  684.                             467.6万
  685.                         </span>
  686.                     </div></li>
  687.                 <li><div class="meng">
  688.                         <a href="#">
  689.                             <div class="mqb">
  690.                                 <img src="image/mm-5.jpg" alt="">
  691.                             </div>
  692.                         </a>
  693.                     </div>
  694.                     <div class="fontam">
  695.                         <p>
  696.                             凡人修仙传｜寻觅仙缘天道之路
  697.                         </p>
  698.                         <p class="annn">
  699.                             微媒有道
  700.                         </p>
  701.                     </div>
  702.                     <div class="ommma">
  703.                         <div>
  704.                             <img src="icon/aonnnah.png" alt="" width="20px">
  705.                         </div>
  706.                         <span>
  707.                             467.6万
  708.                         </span>
  709.                     </div></li>
  710.                 <li><div class="meng">
  711.                         <a href="#">
  712.                             <div class="mqb">
  713.                                 <img src="image/mm-6.jpg" alt="">
  714.                             </div>
  715.                         </a>
  716.                     </div>
  717.                     <div class="fontam">
  718.                         <p>
  719.                             凡人修仙传｜寻觅仙缘天道之路
  720.                         </p>
  721.                         <p class="annn">
  722.                             微媒有道
  723.                         </p>
  724.                     </div>
  725.                     <div class="ommma">
  726.                         <div>
  727.                             <img src="icon/aonnnah.png" alt="" width="20px">
  728.                         </div>
  729.                         <span>
  730.                             467.6万
  731.                         </span>
  732.                     </div></li>
  733.                 <li><div class="meng">
  734.                         <a href="#">
  735.                             <div class="mqb">
  736.                                 <img src="image/mm-3.jpg" alt="">
  737.                             </div>
  738.                         </a>
  739.                     </div>
  740.                     <div class="fontam">
  741.                         <p>
  742.                             凡人修仙传｜寻觅仙缘天道之路
  743.                         </p>
  744.                         <p class="annn">
  745.                             微媒有道
  746.                         </p>
  747.                     </div>
  748.                     <div class="ommma">
  749.                         <div>
  750.                             <img src="icon/aonnnah.png" alt="" width="20px">
  751.                         </div>
  752.                         <span>
  753.                             467.6万
  754.                         </span>
  755.                     </div></li>
  756.                 <li><div class="meng">
  757.                         <a href="#">
  758.                             <div class="mqb">
  759.                                 <img src="image/mm-5.jpg" alt="">
  760.                             </div>
  761.                         </a>
  762.                     </div>
  763.                     <div class="fontam">
  764.                         <p>
  765.                             凡人修仙传｜寻觅仙缘天道之路
  766.                         </p>
  767.                         <p class="annn">
  768.                             微媒有道
  769.                         </p>
  770.                     </div>
  771.                     <div class="ommma">
  772.                         <div>
  773.                             <img src="icon/aonnnah.png" alt="" width="20px">
  774.                         </div>
  775.                         <span>
  776.                             467.6万
  777.                         </span>
  778.                     </div></li>
  779.                 <li><div class="meng">
  780.                         <a href="#">
  781.                             <div class="mqb">
  782.                                 <img src="image/mm-2.jpg" alt="">
  783.                             </div>
  784.                         </a>
  785.                     </div>
  786.                     <div class="fontam">
  787.                         <p>
  788.                             凡人修仙传｜寻觅仙缘天道之路
  789.                         </p>
  790.                         <p class="annn">
  791.                             微媒有道
  792.                         </p>
  793.                     </div>
  794.                     <div class="ommma">
  795.                         <div class="fianfas">
  796.                             <img src="icon/aonnnah.png" alt="" width="20px" >
  797.                         </div>
  798.                         <span>
  799.                             467.6万
  800.                         </span>
  801.                     </div></li>
  802.             </ul>
  803.         </div>
  804.     </div>
  805.     <!-- 热门频道模块 -->
  806.     <div class="Popular w">
  807.         <div class="ptatr-hd">
  808.             <div class="ptatr-bd-1">
  809.                 <div class="ptatr-bd-1-1">
  810.                     <h3>
  811.                         热门频道
  812.                     </h3>
  813.                 </div>
  814.             </div>
  815.              <a href="#"  class="afnann">
  816.                     更多
  817.             </a>
  818.         </div>
  819.         <div class="Popular-bd">
  820.             <ul>
  821.                 <li>
  822.                     <div class="njjj">
  823.                         <a href="#" class="qun">
  824.                             <img src="image/ii-.jpg" alt="">
  825.                         </a>
  826.                         <div class="afona">
  827.                             <span>
  828.  
  829.                             </span>
  830.                             <span>
  831.  
  832.                             </span>
  833.                         </div>
  834.                         <a href="#" class="ajnnn">
  835.                             健身房
  836.                         </a>
  837.                     </div>
  838.                 </li>
  839.                 <li>
  840.                     <div class="njjj">
  841.                         <a href="#" class="qun">
  842.                             <img src="image/ii-.jpg" alt="">
  843.                         </a>
  844.                         <div class="afona">
  845.                             <span>
  846.  
  847.                             </span>
  848.                             <span>
  849.  
  850.                             </span>
  851.                         </div>
  852.                         <a href="#" class="ajnnn">
  853.                             健身房
  854.                         </a>
  855.                     </div>
  856.                 </li>
  857.                 <li>
  858.                     <div class="njjj">
  859.                         <a href="#" class="qun">
  860.                             <img src="image/ii-.jpg" alt="">
  861.                         </a>
  862.                         <div class="afona">
  863.                             <span>
  864.  
  865.                             </span>
  866.                             <span>
  867.  
  868.                             </span>
  869.                         </div>
  870.                         <a href="#" class="ajnnn">
  871.                             健身房
  872.                         </a>
  873.                     </div>
  874.                 </li>
  875.                 <li>
  876.                     <div class="njjj">
  877.                         <a href="#" class="qun">
  878.                             <img src="image/ii-.jpg" alt="">
  879.                         </a>
  880.                         <div class="afona">
  881.                             <span>
  882.  
  883.                             </span>
  884.                             <span>
  885.  
  886.                             </span>
  887.                         </div>
  888.                         <a href="#" class="ajnnn">
  889.                             健身房
  890.                         </a>
  891.                     </div>
  892.                 </li>
  893.                 <li>
  894.                     <div class="njjj">
  895.                         <a href="#" class="qun">
  896.                             <img src="image/ii-.jpg" alt="">
  897.                         </a>
  898.                         <div class="afona">
  899.                             <span>
  900.  
  901.                             </span>
  902.                             <span>
  903.  
  904.                             </span>
  905.                         </div>
  906.                         <a href="#" class="ajnnn">
  907.                             健身房
  908.                         </a>
  909.                     </div>
  910.                 </li>
  911.             </ul>
  912.         </div>
  913.     </div>
  914.     <!-- 热门歌手模块制作 -->
  915.     <div class="singer">
  916.         <div class="ptatr-hd afin w">
  917.             <div class="ptatr-bd-1">
  918.                 <div class="ptatr-bd-1-1">
  919.                     <h3>
  920.                         热门歌手
  921.                     </h3>
  922.                 </div>
  923.                 <div class="ptatr-bd-1-2">
  924.                     <ul>
  925.                         <li>韩国</li>
  926.                         <li>华语</li>
  927.                         <li>欧美</li>
  928.                     </ul>
  929.                 </div>
  930.             </div>
  931.             <div class="ptatr-bd-1-2">
  932.                 <a href="#">
  933.                     更多
  934.                 </a>
  935.             </div>
  936.         </div>
  937.         <div class="singer w">
  938.             <ul>
  939.                 <li>
  940.                     <a href="#" class="jl">
  941.                         <img src="image/jielun-1.jpg" alt="">
  942.                     </a>
  943.                     <span class="in">
  944.                         周杰伦
  945.                     </span>
  946.                 </li>
  947.                 <li>
  948.                     <a href="#" class="jl">
  949.                         <img src="image/jielun-1.jpg" alt="">
  950.                     </a>
  951.                     <span class="in">
  952.                         周杰伦
  953.                     </span>
  954.                 </li>
  955.                 <li>
  956.                     <a href="#" class="jl">
  957.                         <img src="image/jielun-1.jpg" alt="">
  958.                     </a>
  959.                     <span class="in">
  960.                         周杰伦
  961.                     </span>
  962.                 </li>
  963.                 <li>
  964.                     <a href="#" class="jl">
  965.                         <img src="image/jielun-1.jpg" alt="">
  966.                     </a>
  967.                     <span class="in">
  968.                         周杰伦
  969.                     </span>
  970.                 </li>
  971.                 <li>
  972.                     <a href="#" class="jl">
  973.                         <img src="image/jielun-1.jpg" alt="">
  974.                     </a>
  975.                     <span class="in">
  976.                         周杰伦
  977.                     </span>
  978.                 </li>
  979.             </ul>
  980.         </div>
  981.     </div>
  982.     <!-- 推荐内容模块 -->
  983.     <div class="rmom w">
  984.         <div class="rmom-hd">
  985.             <h3>
  986.                 推荐内容
  987.             </h3>
  988.             <a href="#">
  989.                 < 1/2 >
  990.             </a>
  991.         </div>
  992.         <div class="rmom-bd">
  993.             <ul>
  994.                 <li>
  995.                     <a href="#">白眉大侠</a>
  996.                 </li>
  997.                 <li>
  998.                     <a href="#">白眉大侠</a>
  999.                 </li>
  1000.                 <li>
  1001.                     <a href="#">白眉大侠</a>
  1002.                 </li>
  1003.                 <li>
  1004.                     <a href="#">白眉大侠</a>
  1005.                 </li>
  1006.                 <li>
  1007.                     <a href="#">白眉大侠</a>
  1008.                 </li>
  1009.                 <li>
  1010.                     <a href="#">白眉大侠</a>
  1011.                 </li>
  1012.                 <li>
  1013.                     <a href="#">白眉大侠</a>
  1014.                 </li>
  1015.                 <li>
  1016.                     <a href="#">白眉大侠</a>
  1017.                 </li>
  1018.                 <li>
  1019.                     <a href="#">白眉大侠</a>
  1020.                 </li>
  1021.                 <li>
  1022.                     <a href="#">白眉大侠</a>
  1023.                 </li>
  1024.                 <li>
  1025.                     <a href="#">白眉大侠</a>
  1026.                 </li>
  1027.                 <li>
  1028.                     <a href="#">白眉大侠</a>
  1029.                 </li>
  1030.                 <li>
  1031.                     <a href="#">白眉大侠</a>
  1032.                 </li>
  1033.                 <li>
  1034.                     <a href="#">白眉大侠</a>
  1035.                 </li>
  1036.                 <li>
  1037.                     <a href="#">白眉大侠</a>
  1038.                 </li>
  1039.                 <li>
  1040.                     <a href="#">白眉大侠</a>
  1041.                 </li>
  1042.                 <li>
  1043.                     <a href="#">白眉大侠</a>
  1044.                 </li>
  1045.                 <li>
  1046.                     <a href="#">白眉大侠</a>
  1047.                 </li>
  1048.                 <li>
  1049.                     <a href="#">白眉大侠</a>
  1050.                 </li>
  1051.                 <li>
  1052.                     <a href="#">白眉大侠</a>
  1053.                 </li>
  1054.                 <li>
  1055.                     <a href="#">白眉大侠</a>
  1056.                 </li>
  1057.             </ul>
  1058.         </div>
  1059.     </div>
  1060.     <!-- 合作链接模块 -->
  1061.     <div class="rmom w">
  1062.         <div class="rmom-hd">
  1063.             <h3>
  1064.                 推荐内容
  1065.             </h3>
  1066.             <a href="#">
  1067.                 < 1/2 >
  1068.             </a>
  1069.         </div>
  1070.         <div class="rmom-bd">
  1071.             <ul>
  1072.                 <li>
  1073.                     <a href="#">白眉大侠</a>
  1074.                 </li>
  1075.                 <li>
  1076.                     <a href="#">白眉大侠</a>
  1077.                 </li>
  1078.                 <li>
  1079.                     <a href="#">白眉大侠</a>
  1080.                 </li>
  1081.                 <li>
  1082.                     <a href="#">白眉大侠</a>
  1083.                 </li>
  1084.                 <li>
  1085.                     <a href="#">白眉大侠</a>
  1086.                 </li>
  1087.                 <li>
  1088.                     <a href="#">白眉大侠</a>
  1089.                 </li>
  1090.                 <li>
  1091.                     <a href="#">白眉大侠</a>
  1092.                 </li>
  1093.             </ul>
  1094.         </div>
  1095.     </div>
  1096.     <!-- 酷狗底部模块 -->
  1097.     <footer class="footer">
  1098.         <div class="footer-r w">
  1099.             <div class="footer-b">
  1100.                 <ul>
  1101.                     <li>
  1102.                         <a href="#" class="qub">
  1103.                             <div class="tx">
  1104.                                 <img src="image/hub-1.png" alt="">
  1105.                                 <span>
  1106.                                     <img src="image/hub-1-1.png" alt="" class="q1">
  1107.                                 </span>
  1108.                             </div>
  1109.                             <p class="nn1" style="">
  1110.                                 腾讯音乐娱乐集团
  1111.                             </p>
  1112.                         </a>
  1113.                     </li>
  1114.                     <li>
  1115.                         <a href="#" class="qub">
  1116.                             <div class="tx">
  1117.                                 <img src="image/hub-2.png" alt="">
  1118.                             </div>
  1119.                             <p>
  1120.                                 腾讯音乐人
  1121.                             </p>
  1122.                         </a>
  1123.                     </li>
  1124.                     <li>
  1125.                         <a href="#" class="qub">
  1126.                             <div class="tx">
  1127.                                 <img src="image/hub-3.png" alt="">
  1128.                             </div>
  1129.                             <p>
  1130.                                 酷狗音乐人
  1131.                             </p>
  1132.                         </a>
  1133.                     </li>
  1134.                     <li>
  1135.                         <a href="#" class="qub">
  1136.                             <div class="tx">
  1137.                                 <img src="image/hub-4.png" alt="">
  1138.                             </div>
  1139.                             <p>
  1140.                                 星曜推歌
  1141.                             </p>
  1142.                         </a>
  1143.                     </li>
  1144.                     <li>
  1145.                         <a href="#" class="qub">
  1146.                             <div class="tx">
  1147.                                 <img src="image/hub-5.png" alt="">
  1148.                             </div>
  1149.                             <p>
  1150.                                 5sing原创音乐
  1151.                             </p>
  1152.                         </a>
  1153.                     </li>
  1154.                     <li>
  1155.                         <a href="#" class="qub">
  1156.                             <div class="tx">
  1157.                                 <img src="image/hub-6.png" alt="">
  1158.                             </div>
  1159.                             <p>
  1160.                                 听歌识曲
  1161.                             </p>
  1162.                         </a>
  1163.                     </li>
  1164.                     <li>
  1165.                         <a href="#" class="qub">
  1166.                             <div class="tx">
  1167.                                 <img src="image/hub-7.png" alt="">
  1168.                             </div>
  1169.                             <p>
  1170.                                 歌叽歌叽
  1171.                             </p>
  1172.                         </a>
  1173.                     </li>
  1174.                 </ul>
  1175.             </div>
  1176.             <div class="footer-c">
  1177.                 <ul>
  1178.                     <li><a href="#">关于酷狗</a></li>
  1179.                     <li><a href="#">关于酷狗</a></li>
  1180.                     <li><a href="#">关于酷狗</a></li>
  1181.                     <li><a href="#">关于酷狗</a></li>
  1182.                     <li><a href="#">关于酷狗</a></li>
  1183.                     <li><a href="#">关于酷狗</a></li>
  1184.                     <li><a href="#">关于酷狗</a></li>
  1185.                     <li><a href="#">关于酷狗</a></li>
  1186.                     <li><a href="#">关于酷狗</a></li>
  1187.                     <li><a href="#">关于酷狗</a></li>
  1188.                 </ul>
  1189.             </div>
  1190.             <div class="footer-m">
  1191.                 <ul>
  1192.                     <li><a href="#">粤网文（2022）1053-085号</a></li>
  1193.                     <li><a href="#">网络视听许可证 1910564号</a></li>
  1194.                     <li><a href="#">增值电信业务 粤B2-20060339</a></li>
  1195.                     <li><a href="#">粤ICP备09017694号</a></li>
  1196.                 </ul>
  1197.             </div>
  1198.             <div class="footer-qs footer-m">
  1199.                 <ul>
  1200.                     <li><a href="#">互联网不良信息举报中心</a></li>
  1201.                     <li><a href="#">互联网宗教信息服务许可证 粤（2022）0000022</a></li>
  1202.                     <li><a href="#">营业执照</a></li>
  1203.                 </ul>
  1204.             </div>
  1205.             <div class="footer-qs footer-m">
  1206.                 <ul>
  1207.                     <li><a href="#">粤公网安备 44030002000001号</a></li>
  1208.                     <li><a href="#">酷狗不良信息举报邮箱：jubao_music@kugou.net</a></li>
  1209.                     <li><a href="#">客服电话：020-29195668（7*24小时热线）</a></li>
  1210.                 </ul>
  1211.             </div>
  1212.             <div class="footer-qs footer-m">
  1213.                 <ul>
  1214.                     <li><a href="#">粤公网安备 44030002000001号</a></li>
  1215.                     <li><a href="#">互联网宗教信息服务许可证 粤（2022）0000022</a></li>
  1216.                     <li><a href="#">Copyright © 2004-2023 KuGou-Inc.All Rights Reserved</a></li>
  1217.                 </ul>
  1218.             </div>
  1219.         </div>
  1220.     </footer>
  1221. </body>
  1222. </html>

css代码区

  1. .w{
  2.     width: 1200px;
  3.     margin: 0px auto;
  4. }
  5. .header{
  6.     width: 100%;
  7.     height: 80px;
  8.     background-color:#00A9FF;  
  9.     .header-1{
  10.         position: relative;
  11.     }
  12.     .header-kugou{
  13.         position: absolute;
  14.         top: 20px;
  15.         width: 146px;
  16.         height: 38px;
  17.         h1 a{
  18.             display: block;
  19.             width: 146px;
  20.             height: 38px;
  21.             background: url(../image/kugou-1.png) no-repeat;
  22.             background-size: 146px 38px;
  23.             text-indent: -999px;
  24.  	        overflow: hidden;
  25.         }
  26.     }
  27.     .header-input{
  28.         position:absolute;
  29.         top:25px;
  30.         left:186px;
  31.         width: 280px;
  32.         height: 30px;
  33.         .fam{
  34.             position: relative;
  35.             z-index:2;
  36.             width: 280px;
  37.             height: 30px;
  38.             border-radius: 31px;
  39.             background-color: #54C0EB;
  40.             padding: 4px 10px 4px 40px;
  41.             // opacity: 0.3;
  42.             input{
  43.                 z-index: 1;
  44.                 width: 100%;
  45.                 height:100%;
  46.                 outline: none;
  47.                 border: none;
  48.                 font-size: 14px;
  49.                 color:white;
  50.                 background-color: #54C0EB;
  51.             }
  52.             .icon{
  53.                 position: absolute;
  54.                 left: 9px;
  55.                 top: 7px;
  56.                 width: 15px;
  57.                 height: 15px;
  58.                 background: url(../icon/icon-1.png) no-repeat;
  59.                 background-size: 15px 15px;
  60.             }
  61.         }
  62.     }
  63.     .header-3{
  64.         display: flex;
  65.         position: absolute;
  66.         top: 27px;
  67.         right:200px;
  68.         a{
  69.             display: block;
  70.             min-width: 52px;
  71.             font-size: 14px;
  72.             color: #fff;
  73.             margin-right: 30px;
  74.             opacity: 0.9;
  75.             text-align: center;
  76.             line-height: 30px;
  77.         }
  78.         .d3{
  79.             width: 1px;
  80.             color: white;
  81.             height: 14px;
  82.             margin-right:60px;
  83.             line-height: 30px;
  84.         }
  85.         .dl{
  86.             width: 90px;
  87.             height: 30px;
  88.             -webkit-border-radius: 15px;
  89.             border-radius: 15px;
  90.             background: #fff;
  91.             text-align: center;
  92.             line-height: 30px;
  93.             color: #00A9FF;
  94.             cursor: pointer;
  95.             font-size: 16px;
  96.             // margin-bottom: 100px;
  97.         }
  98.     }
  99. }
  100. .cmhead2{
  101.     display: flex;
  102.     flex-direction:column;
  103.     width: 100%;
  104.     height: 60px;
  105.     background-color: #CCDBE2;
  106.     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
  107.     .esh{
  108.         ul li{
  109.             flex: 1;
  110.             line-height:60px;
  111.         }
  112.         ul li a{
  113.             font-size: 16px;
  114.             color: black;
  115.         }
  116.         ul li a:hover{
  117.             color: #0DA9EB;
  118.         }
  119.     }
  120. }
  121. .section{
  122.     // position:absolute;
  123.     position: relative;
  124.     height: 560px;
  125.     background-color:red;
  126.     cursor: pointer;
  127.     ul li{
  128.         width: 100%;
  129.         height: 560px;
  130.         background: url(../image/pci-2.jpg) no-repeat top center;
  131.         // margin-left: 100px;
  132.     }
  133.     .section-left{
  134.         // display: none !important;
  135.         position: absolute;
  136.         top:50% ;
  137.         transform: translateY(-50%);
  138.         left: 0px;
  139.         display: block;
  140.         width: 90px;
  141.         height: 90px;
  142.         background:url(../icon/icon_arrow_left.png) no-repeat;
  143.         background-size:90px 90px;
  144.     }
  145.     .section-2{
  146.         position:absolute;
  147.         top:50%;
  148.         margin-top:-45px;
  149.         // transform: translateY(-50%) ;
  150.         right: 0px;
  151.         display: block;
  152.         width: 90px;
  153.         height: 90px;
  154.         background:url(../icon/icon_arrow_left.png) no-repeat;
  155.         background-size: 90px 90px;
  156.         transform: rotate(180deg) !important;
  157.     }
  158.     .span{
  159.         display: block;
  160.         position: absolute;
  161.         bottom: 70px;
  162.         left: 50%;
  163.         transform: translateX(-50%);
  164.         a{
  165.             display: inline-block;
  166.             width: 8px;
  167.             height: 8px;
  168.             background-color: white;
  169.             margin-right: 10px;
  170.             border-radius: 50%;
  171.             font-size: 0px;
  172.         }
  173.         a:hover{
  174.             width:20px;
  175.             border-radius: 20px;
  176.         }
  177.     }
  178.     .fnqb{
  179.         display: flex;
  180.         justify-content: center;
  181.         text-align: center;
  182.         position: absolute;
  183.         bottom: 0px;
  184.         left: 0px;
  185.         width: 100%;
  186.         height: 60px;
  187.         backdrop-filter: saturate(180%) blur(6px);
  188.         background: rgba(255, 255, 255, 0.5);
  189.         .fnqb-1{
  190.             display: flex;
  191.             flex-direction: row;
  192.             align-items: center;
  193.             width: 240px;
  194.             height: 60px;
  195.             font-size: 18px;
  196.     color: rgba(0, 0, 0, 0.6);
  197.             .wn-1{
  198.                 display: block;
  199.                 width: 46px;
  200.                 height: 46px;
  201.                 background-color:red;
  202.                 background: url(../icon/icon-2.png) no-repeat;
  203.                 background-size: 100%;
  204.             }
  205.             .wn-2{
  206.                 display: block;
  207.                 width: 46px;
  208.                 height: 46px;
  209.                 background-color:red;
  210.                 background: url(../icon/icon-4.png) no-repeat;
  211.                 background-size: 100%;
  212.             }
  213.             .wn-3{
  214.                 display: block;
  215.                 width: 46px;
  216.                 height: 46px;
  217.                 background-color:red;
  218.                 background: url(../icon/icon-3.png) no-repeat;
  219.                 background-size: 100%;
  220.             }
  221.         }   
  222.     }
  223. }
  224. .qonf{
  225.     display: flex;
  226.     justify-content: space-between;
  227.     .left{
  228.         width: 640px;
  229.         background-color: red;
  230.         .heardmgn{
  231.             display: flex;
  232.             // flex-direction: row;
  233.             justify-content: space-between;
  234.             margin-top: 60px;
  235.             margin-bottom: 20px;
  236.             .oan{
  237.                 font-size: 26px;
  238.                 font-weight: 500;
  239.                 color: #000000;
  240.             }
  241.             .oen{
  242.                 font-size: 14px;
  243.                 font-weight: 400;
  244.                 color: #858585;
  245.                 line-height:39px ;
  246.                 // margin-right: 19px;
  247.                 background: url(../icon/icon-5.png) no-repeat;
  248.                 background-size:16px;
  249.                 background-position: right 12px;
  250.                 padding-right: 19px;
  251.             }
  252.         }
  253.     }
  254.     .homep_d1_d1_d1{
  255.         // position: relative;
  256.         display: flex;
  257.         justify-content: space-between;
  258.         height: 362px;
  259.         .homep_d1_d1_d1-1{
  260.             .faonq{
  261.                 position: relative;
  262.                 display: block;
  263.                 img{
  264.                     width: 320px;
  265.                     border-radius: 8px;
  266.                 }
  267.                 span{
  268.                     z-index:999;
  269.                     position: absolute;
  270.                     top:50%;
  271.                     transform:translateY(-50%);
  272.                     left:50%;
  273.                     transform: translateX(-50%);
  274.                     display: block;
  275.                     width: 50px;
  276.                     height: 50px;
  277.                     background: url(../icon/icon_play_white.png) no-repeat;
  278.                     background-size: 50px;
  279.                     opacity: 0;
  280.                 }
  281.                 .iabg{
  282.                     position: absolute;
  283.                     right: 0px;
  284.                     bottom: 0px;
  285.                     width: 70px;
  286.                         height: 24px;
  287.                         font-size: 12px;
  288.                         font-weight: 500;
  289.                         color: #FFFFFF;
  290.                         // background-color: green;
  291.                         background-color: rgba(0, 0, 0, 0.6);
  292.                         border-radius: 10px;
  293.                         filter: blur(1px);
  294.                     .bofl{
  295.                         // z-index: 99999;
  296.                         i{
  297.                             // z-index: 9999;
  298.                             display: block;
  299.                             background: url(../icon/icon_play_white.png) no-repeat;
  300.                             width: 12px;
  301.                             height: 12px;
  302.                             background-size:12px;
  303.                         }
  304.                     }
  305.                 }
  306.             }
  307.             img:hover{
  308.                 display: block;
  309.                 transform: scale(1.1);
  310.                 overflow: hidden;
  311.             }
  312.             .hunn{
  313.                 border-radius: 8px;
  314.                 z-index: 2;
  315.                 position: absolute;
  316.                 top: 0px;
  317.                 left: 0px;
  318.                 width:320px;
  319.                 height:320px;
  320.                 background-color: rgba(0, 0, 0, 0.6);
  321.                 opacity:0;
  322.             }
  323.         }
  324.         .qyub{
  325.             font-size: 14px;
  326.             font-weight: 400;
  327.             color: #000000;
  328.             display: block;
  329.             height: 40px;
  330.             margin-top: 6px;
  331.             word-break: break-all;
  332.             overflow: hidden;
  333.         }
  334.     }
  335.     .rigtch{
  336.         width: 320px;
  337.         background-color: pink;
  338.         // justify-content: space-between;
  339.     }
  340. }

这里我用的是less选择器

这里就完结了

想要素材和源码的可以搜索：酷狗网站: 欢迎领取酷狗音乐网站素材 (gitee.com) 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/259707
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号