admin管理员组文章数量:1650878
做一个页面首先要做布局，布局订好，剩下的内容填充时不会太乱！
前几天老师讲的一个页面布局用flex布局来展示，
首先做酷狗工作准备：
准备3gcss文件
关于html
html
<!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">
<!-- 网站说明 -->
<meta name="description" content=""/>
<!-- 关键字 -->
<meta name="keywords" content="酷狗音乐-就是歌多！ 小说相声也很多！"/>
<title>酷狗音乐 酷狗音乐-就是歌多！</title>
<!-- 引入futiocn -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入初始化样式 -->
<link rel="stylesheet" href="css/initialization.css">
<!-- 引入公共样式 -->
<link rel="stylesheet" href="css/public.css">
<!-- 引入酷狗样式 -->
<link rel="stylesheet" href="css/indext.css">
<!-- 引入js -->
<!-- <script src="js/flexible.js"></script> -->
</head>
<body>
<header class="header">
<div class="header-1 w">
<!-- //酷狗log部分制作 -->
<div class="header-kugou">
<h1>
<a href="#">酷狗音乐网站</a>
</h1>
</div>
<div class="header-input">
<div class="fam">
<div class="icon">
</div>
<input type="search" value="郭德纲相声">
</div>
</div>
<div class="header-3">
<a href="#">音乐人</a>
<a href="#">音频创造</a>
<a href="#">VIP会员</a>
<div class="d3">
|
</div>
<div class="dl">
登录
</div>
</div>
</div>
</header>
<!-- //brann部分 -->
<div class="cmhead2">
<div class="esh w">
<ul style="display: flex;">
<li class="font01">
<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><a href="#">更多</a></li>
</ul>
</div>
</div>
<section class="section">
<ul>
<li>
</li>
</ul>
<i class="section-left">
</i>
<i class="section-2">
</i>
<div class="span">
<a href="#">
1
</a>
<a href="#">
2
</a>
<a href="#">
3
</a>
</div>
<div class="fnqb">
<a href="#" class="fnqb-1">
<span class="wn-1">
</span>
下载电脑版
</a>
<a href="#" class="fnqb-1">
<span class="wn-2">
</span>
下载Android版
</a>
<a href="#" class="fnqb-1">
<span class="wn-3">
</span>
下载iPhone版
</a>
</div>
</section>
<!-- 以上是酷狗轮播图模块 -->
<section class="qonf w">
<div class="left">
<div class="heardmgn">
<a href="#" class="oan">
精选歌单
</a>
<a href="#" class="oen">
更多
</a>
</div>
<!-- 以上是酷狗内容区模块 -->
<div class="homep_d1_d1_d1">
<div class="homep_d1_d1_d1-1">
<a href="#" class="faonq">
<img src="image/20220520134858418049.jpg" alt="">
<span>
</span>
<div class="hunn">
</div>
<div class="iabg">
<span>
1470.4万
</span>
</div>
</a>
<a href="#" class="qyub">
白噪音：不一样的美妙声音
</a>
</div>
<div class="homep_d1_d1_d1-2">
<div class="fin">
<div class="itron">
<a href="#">
<img src="image/ne-1.jpg" alt="">
</a>
<h4>
米津玄師：日本“神”级音乐鬼才
</h4>
<span>
1394.31万
</span>
</div>
<div class="itron">
<a href="#">
<img src="image/np-2.png" alt="">
</a>
<h4>
米津玄師：日本“神”级音乐鬼才
</h4>
<span>
14万
</span>
</div>
<div class="itron">
<a href="#">
<img src="image/ne-3.jpg" alt="">
</a>
<h4>
米津玄師：日本“神”级音乐鬼才
</h4>
<span>
94万
</span>
</div>
<div class="itron">
<a href="#">
<img src="image/ne-4.jpg" alt="">
</a>
<h4>
米津玄師：日本“神”级音乐鬼才
</h4>
<span>
1394万
</span>
</div>
</div>
</div>
</div>
<div class="homep_d1">
<div class="homep_d1-hd">
<h3>
新歌首发
</h3>
<ul>
<li>华语</li>
<li>欧美</li>
<li>日本</li>
<li>韩国</li>
</ul>
<span>
< 1/3 >
</span>
</div>
<div class="homep_d1-bd">
<ul>
<li>
<div class="qnenh">
<div class="qnenh-1">
<a href="#">
<img src="image/mqa-1.jpg" alt="">
</a>
<div class="fiang">
<p>
IAM
</p>
<p>
IVE
</p>
</div>
</div>
<div class="hyb">
</div>
<div class="hyb-1">
</div>
<div class="qnenh-2">
</div>
</div>
</li>
<li>
<div class="qnenh">
<div class="qnenh-1">
<a href="#">
<img src="image/mpa-2.jpg" alt="">
</a>
<div class="fiang">
<p>
IAM
</p>
<p>
IVE
</p>
</div>
</div>
<div class="hyb">
</div>
<div class="hyb-1">
</div>
<div class="qnenh-2">
</div>
</div>
</li>
<li>
<div class="qnenh">
<div class="qnenh-1">
<a href="#">
<img src="image/mpa-3.jpg" alt="">
</a>
<div class="fiang">
<p>
IAM
</p>
<p>
IVE
</p>
</div>
</div>
<div class="hyb">
</div>
<div class="hyb-1">
</div>
<div class="qnenh-2">
</div>
</div>
</li>
<li>
<div class="qnenh">
<div class="qnenh-1">
<a href="#">
<img src="image/mpa-4.jpg" alt="">
</a>
<div class="fiang">
<p>
IAM
</p>
<p>
IVE
</p>
</div>
</div>
<div class="hyb">
</div>
<div class="hyb-1">
</div>
<div class="qnenh-2">
</div>
</div>
</li>
<li>
<div class="qnenh">
<div class="qnenh-1">
<a href="#">
<img src="image/mpa-5.jpg" alt="">
</a>
<div class="fiang">
<p>
IAM
</p>
<p>
IVE
</p>
</div>
</div>
<div class="hyb">
</div>
<div class="hyb-1">
</div>
<div class="qnenh-2">
</div>
</div>
</li>
<li>
<div class="qnenh">
<div class="qnenh-1">
<a href="#">
<img src="image/mpa-6.jpg" alt="">
</a>
<div class="fiang">
<p>
IAM
</p>
<p>
IVE
</p>
</div>
</div>
<div class="hyb">
</div>
<div class="hyb-1">
</div>
<div class="qnenh-2">
</div>
</div>
</li>
<li>
<div class="qnenh">
<div class="qnenh-1">
<a href="#">
<img src="image/mpa-7.jpg" alt="">
</a>
<div class="fiang">
<p>
IAM
</p>
<p>
IVE
</p>
</div>
</div>
<div class="hyb">
</div>
<div class="hyb-1">
</div>
<div class="qnenh-2">
</div>
</div>
</li>
<li>
<div class="qnenh">
<div class="qnenh-1">
<a href="#">
<img src="image/mpa-8.jpg" alt="">
</a>
<div class="fiang">
<p>
IAM
</p>
<p>
IVE
</p>
</div>
</div>
<div class="hyb">
</div>
<div class="hyb-1">
</div>
<div class="qnenh-2">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="rigtch w">
<div class="rigtch-hd">
<h3>
热门榜单
</h3>
<a href="#">
更多
</a>
</div>
<div class="rigtch-bd">
<a href="#" class="rigtch-bd-1">
<div class="rigtch-bd-1-1">
<img src="image/qin-1.png" alt="">
</div>
<ul class="qibb">
<li>
<span>
1. Hillsong Young & Free - Wake (Studio Version)
</span>
</li>
<li>
<span>
2. 邓超、陈赫、鹿晗、范志毅、宝石Gem、王勉 - WUHA
</span>
</li>
<li>
<span>
3. Lil笑笑 - 山茶花读不懂白玫瑰
</span>
</li>
</ul>
</a>
<a href="#" class="rigtch-bd-1">
<div class="rigtch-bd-1-1">
<img src="image/qin-2.png" alt="">
</div>
<ul class="qibb">
<li>
<span>
1. Hillsong Young & Free - Wake (Studio Version)
</span>
</li>
<li>
<span>
2. 邓超、陈赫、鹿晗、范志毅、宝石Gem、王勉 - WUHA
</span>
</li>
<li>
<span>
3. Lil笑笑 - 山茶花读不懂白玫瑰
</span>
</li>
</ul>
</a>
<a href="#" class="rigtch-bd-1">
<div class="rigtch-bd-1-1">
<img src="image/qin-3.png" alt="">
</div>
<ul class="qibb">
<li>
<span>
1.好多倩 - 月亮不曾奔我而来
</span>
</li>
<li>
<span>
2. H-Slang & Choco - You & Me
</span>
</li>
<li>
<span>
3. 程响 - 可能
</span>
</li>
</ul>
</a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="fonn">
<div class="rigtch-hd qjnv">
<h3>
热门榜单
</h3>
<a href="#">
更多
</a>
</div>
<div class="fonn-bd" >
<a href="#" class="fonn-tu">
<img src="image/ub-1.jpg" alt="" height="180px">
<span class="fon">
<div class="fonn-ico">
</div>
</span>
</a>
<a href="#" class="iqnnn">
<p>
彩云是我写的信
</p>
<p>
毛不易
</p>
</a>
</div>
<div class="iocnah">
<div class="iocnah-1 eun">
<a href="#">
<img src="image/up-2.jpg" alt="">
</a>
<a href="#">
<p>
Boat
</p>
<p class="aifa">
Ed Sheeran
</p>
</a>
</div>
<div class="iocnah-1">
<div class="iocnah-1">
<a href="#">
<img src="image/up-3.jpg" alt="" class="anqm">
</a>
<a href="#">
<p>
星辰如约
</p>
<p class="aifa">
刘惜君
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 听书精选部分模块 -->
<div class="ptatr w">
<div class="ptatr-hd">
<div class="ptatr-bd-1">
<div class="ptatr-bd-1-1">
<h3>
听书精选
</h3>
</div>
<div class="ptatr-bd-1-2">
<ul>
<li>热门</li>
<li>小说</li>
<li>儿童</li>
<li>相声</li>
<li>感情</li>
</ul>
</div>
</div>
<div class="ptatr-bd-1-2">
<a href="#">
更多
</a>
</div>
</div>
<div class="ptatr-bd">
<ul>
<li>
<div class="meng">
<a href="#">
<div class="mqb">
<img src="image/mm-1.jpg" alt="">
</div>
</a>
</div>
<div class="fontam">
<p>
凡人修仙传｜寻觅仙缘天道之路
</p>
<p class="annn">
微媒有道
</p>
</div>
<div class="ommma">
<div>
<img src="icon/aonnnah.png" alt="" width="20px">
</div>
<span>
467.6万
</span>
</div>
</li>
<li><div class="meng">
<a href="#">
<div class="mqb">
<img src="image/mm-2.jpg" alt="">
</div>
</a>
</div>
<div class="fontam">
<p>
凡人修仙传｜寻觅仙缘天道之路
</p>
<p class="annn">
微媒有道
</p>
</div>
<div class="ommma">
<div>
<img src="icon/aonnnah.png" alt="" width="20px">
</div>
<span>
467.6万
</span>
</div></li>
<li><div class="meng">
<a href="#">
<div class="mqb">
<img src="image/mm-3.jpg" alt="">
</div>
</a>
</div>
<div class="fontam">
<p>
凡人修仙传｜寻觅仙缘天道之路
</p>
<p class="annn">
微媒有道
</p>
</div>
<div class="ommma">
<div>
<img src="icon/aonnnah.png" alt="" width="20px">
</div>
<span>
467.6万
</span>
</div></li>
<li><div class="meng">
<a href="#">
<div class="mqb">
<img src="image/mm-4.jpg" alt="">
</div>
</a>
</div>
<div class="fontam">
<p>
凡人修仙传｜寻觅仙缘天道之路
</p>
<p class="annn">
微媒有道
</p>
</div>
<div class="ommma">
<div>
<img src="icon/aonnnah.png" alt="" width="20px">
</div>
<span>
467.6万
</span>
</div></li>
<li><div class="meng">
<a href="#">
<div class="mqb">
<img src="image/mm-5.jpg" alt="">
</div>
</a>
</div>
<div class="fontam">
<p>
凡人修仙传｜寻觅仙缘天道之路
</p>
<p class="annn">
微媒有道
</p>
</div>
<div class="ommma">
<div>
<img src="icon/aonnnah.png" alt="" width="20px">
</div>
<span>
467.6万
</span>
</div></li>
<li><div class="meng">
<a href="#">
<div class="mqb">
<img src="image/mm-6.jpg" alt="">
</div>
</a>
</div>
<div class="fontam">
<p>
凡人修仙传｜寻觅仙缘天道之路
</p>
<p class="annn">
微媒有道
</p>
</div>
<div class="ommma">
<div>
<img src="icon/aonnnah.png" alt="" width="20px">
</div>
<span>
467.6万
</span>
</div></li>
<li><div class="meng">
<a href="#">
<div class="mqb">
<img src="image/mm-3.jpg" alt="">
</div>
</a>
</div>
<div class="fontam">
<p>
凡人修仙传｜寻觅仙缘天道之路
</p>
<p class="annn">
微媒有道
</p>
</div>
<div class="ommma">
<div>
<img src="icon/aonnnah.png" alt="" width="20px">
</div>
<span>
467.6万
</span>
</div></li>
<li><div class="meng">
<a href="#">
<div class="mqb">
<img src="image/mm-5.jpg" alt="">
</div>
</a>
</div>
<div class="fontam">
<p>
凡人修仙传｜寻觅仙缘天道之路
</p>
<p class="annn">
微媒有道
</p>
</div>
<div class="ommma">
<div>
<img src="icon/aonnnah.png" alt="" width="20px">
</div>
<span>
467.6万
</span>
</div></li>
<li><div class="meng">
<a href="#">
<div class="mqb">
<img src="image/mm-2.jpg" alt="">
</div>
</a>
</div>
<div class="fontam">
<p>
凡人修仙传｜寻觅仙缘天道之路
</p>
<p class="annn">
微媒有道
</p>
</div>
<div class="ommma">
<div class="fianfas">
<img src="icon/aonnnah.png" alt="" width="20px" >
</div>
<span>
467.6万
</span>
</div></li>
</ul>
</div>
</div>
<!-- 热门频道模块 -->
<div class="Popular w">
<div class="ptatr-hd">
<div class="ptatr-bd-1">
<div class="ptatr-bd-1-1">
<h3>
热门频道
</h3>
</div>
</div>
<a href="#" class="afnann">
更多
</a>
</div>
<div class="Popular-bd">
<ul>
<li>
<div class="njjj">
<a href="#" class="qun">
<img src="image/ii-.jpg" alt="">
</a>
<div class="afona">
<span>
</span>
<span>
</span>
</div>
<a href="#" class="ajnnn">
健身房
</a>
</div>
</li>
<li>
<div class="njjj">
<a href="#" class="qun">
<img src="image/ii-.jpg" alt="">
</a>
<div class="afona">
<span>
</span>
<span>
</span>
</div>
<a href="#" class="ajnnn">
健身房
</a>
</div>
</li>
<li>
<div class="njjj">
<a href="#" class="qun">
<img src="image/ii-.jpg" alt="">
</a>
<div class="afona">
<span>
</span>
<span>
</span>
</div>
<a href="#" class="ajnnn">
健身房
</a>
</div>
</li>
<li>
<div class="njjj">
<a href="#" class="qun">
<img src="image/ii-.jpg" alt="">
</a>
<div class="afona">
<span>
</span>
<span>
</span>
</div>
<a href="#" class="ajnnn">
健身房
</a>
</div>
</li>
<li>
<div class="njjj">
<a href="#" class="qun">
<img src="image/ii-.jpg" alt="">
</a>
<div class="afona">
<span>
</span>
<span>
</span>
</div>
<a href="#" class="ajnnn">
健身房
</a>
</div>
</li>
</ul>
</div>
</div>
<!-- 热门歌手模块制作 -->
<div class="singer">
<div class="ptatr-hd afin w">
<div class="ptatr-bd-1">
<div class="ptatr-bd-1-1">
<h3>
热门歌手
</h3>
</div>
<div class="ptatr-bd-1-2">
<ul>
<li>韩国</li>
<li>华语</li>
<li>欧美</li>
</ul>
</div>
</div>
<div class="ptatr-bd-1-2">
<a href="#">
更多
</a>
</div>
</div>
<div class="singer w">
<ul>
<li>
<a href="#" class="jl">
<img src="image/jielun-1.jpg" alt="">
</a>
<span class="in">
周杰伦
</span>
</li>
<li>
<a href="#" class="jl">
<img src="image/jielun-1.jpg" alt="">
</a>
<span class="in">
周杰伦
</span>
</li>
<li>
<a href="#" class="jl">
<img src="image/jielun-1.jpg" alt="">
</a>
<span class="in">
周杰伦
</span>
</li>
<li>
<a href="#" class="jl">
<img src="image/jielun-1.jpg" alt="">
</a>
<span class="in">
周杰伦
</span>
</li>
<li>
<a href="#" class="jl">
<img src="image/jielun-1.jpg" alt="">
</a>
<span class="in">
周杰伦
</span>
</li>
</ul>
</div>
</div>
<!-- 推荐内容模块 -->
<div class="rmom w">
<div class="rmom-hd">
<h3>
推荐内容
</h3>
<a href="#">
< 1/2 >
</a>
</div>
<div class="rmom-bd">
<ul>
<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>
<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>
<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>
<a href="#">白眉大侠</a>
</li>
<li>
<a href="#">白眉大侠</a>
</li>
<li>
<a href="#">白眉大侠</a>
</li>
<li>
<a href="#">白眉大侠</a>
</li>
</ul>
</div>
</div>
<!-- 合作链接模块 -->
<div class="rmom w">
<div class="rmom-hd">
<h3>
推荐内容
</h3>
<a href="#">
< 1/2 >
</a>
</div>
<div class="rmom-bd">
<ul>
<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>
<a href="#">白眉大侠</a>
</li>
<li>
<a href="#">白眉大侠</a>
</li>
</ul>
</div>
</div>
<!-- 酷狗底部模块 -->
<footer class="footer">
<div class="footer-r w">
<div class="footer-b">
<ul>
<li>
<a href="#" class="qub">
<div class="tx">
<img src="image/hub-1.png" alt="">
<span>
<img src="image/hub-1-1.png" alt="" class="q1">
</span>
</div>
<p class="nn1" style="">
腾讯音乐娱乐集团
</p>
</a>
</li>
<li>
<a href="#" class="qub">
<div class="tx">
<img src="image/hub-2.png" alt="">
</div>
<p>
腾讯音乐人
</p>
</a>
</li>
<li>
<a href="#" class="qub">
<div class="tx">
<img src="image/hub-3.png" alt="">
</div>
<p>
酷狗音乐人
</p>
</a>
</li>
<li>
<a href="#" class="qub">
<div class="tx">
<img src="image/hub-4.png" alt="">
</div>
<p>
星曜推歌
</p>
</a>
</li>
<li>
<a href="#" class="qub">
<div class="tx">
<img src="image/hub-5.png" alt="">
</div>
<p>
5sing原创音乐
</p>
</a>
</li>
<li>
<a href="#" class="qub">
<div class="tx">
<img src="image/hub-6.png" alt="">
</div>
<p>
听歌识曲
</p>
</a>
</li>
<li>
<a href="#" class="qub">
<div class="tx">
<img src="image/hub-7.png" alt="">
</div>
<p>
歌叽歌叽
</p>
</a>
</li>
</ul>
</div>
<div class="footer-c">
<ul>
<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><a href="#">关于酷狗</a></li>
<li><a href="#">关于酷狗</a></li>
<li><a href="#">关于酷狗</a></li>
<li><a href="#">关于酷狗</a></li>
<li><a href="#">关于酷狗</a></li>
</ul>
</div>
<div class="footer-m">
<ul>
<li><a href="#">粤网文（2022）1053-085号</a></li>
<li><a href="#">网络视听许可证 1910564号</a></li>
<li><a href="#">增值电信业务 粤B2-20060339</a></li>
<li><a href="#">粤ICP备09017694号</a></li>
</ul>
</div>
<div class="footer-qs footer-m">
<ul>
<li><a href="#">互联网不良信息举报中心</a></li>
<li><a href="#">互联网宗教信息服务许可证 粤（2022）0000022</a></li>
<li><a href="#">营业执照</a></li>
</ul>
</div>
<div class="footer-qs footer-m">
<ul>
<li><a href="#">粤公网安备 44030002000001号</a></li>
<li><a href="#">酷狗不良信息举报邮箱：jubao_music@kugou</a></li>
<li><a href="#">客服电话：020-29195668（7*24小时热线）</a></li>
</ul>
</div>
<div class="footer-qs footer-m">
<ul>
<li><a href="#">粤公网安备 44030002000001号</a></li>
<li><a href="#">互联网宗教信息服务许可证 粤（2022）0000022</a></li>
<li><a href="#">Copyright © 2004-2023 KuGou-Inc.All Rights Reserved</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>css代码区
.w{
width: 1200px;
margin: 0px auto;
}
.header{
width: 100%;
height: 80px;
background-color:#00A9FF;
.header-1{
position: relative;
}
.header-kugou{
position: absolute;
top: 20px;
width: 146px;
height: 38px;
h1 a{
display: block;
width: 146px;
height: 38px;
background: url(../image/kugou-1.png) no-repeat;
background-size: 146px 38px;
text-indent: -999px;
overflow: hidden;
}
}
.header-input{
position:absolute;
top:25px;
left:186px;
width: 280px;
height: 30px;
.fam{
position: relative;
z-index:2;
width: 280px;
height: 30px;
border-radius: 31px;
background-color: #54C0EB;
padding: 4px 10px 4px 40px;
// opacity: 0.3;
input{
z-index: 1;
width: 100%;
height:100%;
outline: none;
border: none;
font-size: 14px;
color:white;
background-color: #54C0EB;
}
.icon{
position: absolute;
left: 9px;
top: 7px;
width: 15px;
height: 15px;
background: url(../icon/icon-1.png) no-repeat;
background-size: 15px 15px;
}
}
}
.header-3{
display: flex;
position: absolute;
top: 27px;
right:200px;
a{
display: block;
min-width: 52px;
font-size: 14px;
color: #fff;
margin-right: 30px;
opacity: 0.9;
text-align: center;
line-height: 30px;
}
.d3{
width: 1px;
color: white;
height: 14px;
margin-right:60px;
line-height: 30px;
}
.dl{
width: 90px;
height: 30px;
-webkit-border-radius: 15px;
border-radius: 15px;
background: #fff;
text-align: center;
line-height: 30px;
color: #00A9FF;
cursor: pointer;
font-size: 16px;
// margin-bottom: 100px;
}
}
}
.cmhead2{
display: flex;
flex-direction:column;
width: 100%;
height: 60px;
background-color: #CCDBE2;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
.esh{
ul li{
flex: 1;
line-height:60px;
}
ul li a{
font-size: 16px;
color: black;
}
ul li a:hover{
color: #0DA9EB;
}
}
}
.section{
// position:absolute;
position: relative;
height: 560px;
background-color:red;
cursor: pointer;
ul li{
width: 100%;
height: 560px;
background: url(../image/pci-2.jpg) no-repeat top center;
// margin-left: 100px;
}
.section-left{
// display: none !important;
position: absolute;
top:50% ;
transform: translateY(-50%);
left: 0px;
display: block;
width: 90px;
height: 90px;
background:url(../icon/icon_arrow_left.png) no-repeat;
background-size:90px 90px;
}
.section-2{
position:absolute;
top:50%;
margin-top:-45px;
// transform: translateY(-50%) ;
right: 0px;
display: block;
width: 90px;
height: 90px;
background:url(../icon/icon_arrow_left.png) no-repeat;
background-size: 90px 90px;
transform: rotate(180deg) !important;
}
.span{
display: block;
position: absolute;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
a{
display: inline-block;
width: 8px;
height: 8px;
background-color: white;
margin-right: 10px;
border-radius: 50%;
font-size: 0px;
}
a:hover{
width:20px;
border-radius: 20px;
}
}
.fnqb{
display: flex;
justify-content: center;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 60px;
backdrop-filter: saturate(180%) blur(6px);
background: rgba(255, 255, 255, 0.5);
.fnqb-1{
display: flex;
flex-direction: row;
align-items: center;
width: 240px;
height: 60px;
font-size: 18px;
color: rgba(0, 0, 0, 0.6);
.wn-1{
display: block;
width: 46px;
height: 46px;
background-color:red;
background: url(../icon/icon-2.png) no-repeat;
background-size: 100%;
}
.wn-2{
display: block;
width: 46px;
height: 46px;
background-color:red;
background: url(../icon/icon-4.png) no-repeat;
background-size: 100%;
}
.wn-3{
display: block;
width: 46px;
height: 46px;
background-color:red;
background: url(../icon/icon-3.png) no-repeat;
background-size: 100%;
}
}
}
}
.qonf{
display: flex;
justify-content: space-between;
.left{
width: 640px;
background-color: red;
.heardmgn{
display: flex;
// flex-direction: row;
justify-content: space-between;
margin-top: 60px;
margin-bottom: 20px;
.oan{
font-size: 26px;
font-weight: 500;
color: #000000;
}
.oen{
font-size: 14px;
font-weight: 400;
color: #858585;
line-height:39px ;
// margin-right: 19px;
background: url(../icon/icon-5.png) no-repeat;
background-size:16px;
background-position: right 12px;
padding-right: 19px;
}
}
}
.homep_d1_d1_d1{
// position: relative;
display: flex;
justify-content: space-between;
height: 362px;
.homep_d1_d1_d1-1{
.faonq{
position: relative;
display: block;
img{
width: 320px;
border-radius: 8px;
}
span{
z-index:999;
position: absolute;
top:50%;
transform:translateY(-50%);
left:50%;
transform: translateX(-50%);
display: block;
width: 50px;
height: 50px;
background: url(../icon/icon_play_white.png) no-repeat;
background-size: 50px;
opacity: 0;
}
.iabg{
position: absolute;
right: 0px;
bottom: 0px;
width: 70px;
height: 24px;
font-size: 12px;
font-weight: 500;
color: #FFFFFF;
// background-color: green;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px;
filter: blur(1px);
.bofl{
// z-index: 99999;
i{
// z-index: 9999;
display: block;
background: url(../icon/icon_play_white.png) no-repeat;
width: 12px;
height: 12px;
background-size:12px;
}
}
}
}
img:hover{
display: block;
transform: scale(1.1);
overflow: hidden;
}
.hunn{
border-radius: 8px;
z-index: 2;
position: absolute;
top: 0px;
left: 0px;
width:320px;
height:320px;
background-color: rgba(0, 0, 0, 0.6);
opacity:0;
}
}
.qyub{
font-size: 14px;
font-weight: 400;
color: #000000;
display: block;
height: 40px;
margin-top: 6px;
word-break: break-all;
overflow: hidden;
}
}
.rigtch{
width: 320px;
background-color: pink;
// justify-content: space-between;
}
}这里我用的是less选择器
这里就完结了
想要素材和源码的可以搜索：酷狗网站: 欢迎领取酷狗音乐网站素材 (gitee)
版权声明：本文标题：pc酷狗网页最简洁代码2023最新 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729549177a1206009.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论