pc酷狗网页最简洁代码2023最新
做一个页面首先要做布局，布局订好，剩下的内容填充时不会太乱！
前几天老师讲
的一个页面布局用flex布局来展示，
首先做酷狗工作准备：
准备3gcss文件
关于html
html
酷狗音乐 酷狗音乐-就是歌多！
-
米津玄師：日本“神”级音乐鬼才
1394.31万
米津玄師：日本“神”级音乐鬼才
14万
米津玄師：日本“神”级音乐鬼才
94万
米津玄師：日本“神”级音乐鬼才
1394万
新歌首发
- 华语
- 欧美
- 日本
- 韩国
< 1/3 >
-
IAM
IVE
-
IAM
IVE
-
IAM
IVE
-
IAM
IVE
-
IAM
IVE
-
IAM
IVE
-
IAM
IVE
-
IAM
IVE
听书精选
- 热门
- 小说
- 儿童
- 相声
- 感情
-
凡人修仙传｜寻觅仙缘天道之路
微媒有道
467.6万
-
凡人修仙传｜寻觅仙缘天道之路
微媒有道
467.6万
-
凡人修仙传｜寻觅仙缘天道之路
微媒有道
467.6万
-
凡人修仙传｜寻觅仙缘天道之路
微媒有道
467.6万
-
凡人修仙传｜寻觅仙缘天道之路
微媒有道
467.6万
-
凡人修仙传｜寻觅仙缘天道之路
微媒有道
467.6万
-
凡人修仙传｜寻觅仙缘天道之路
微媒有道
467.6万
-
凡人修仙传｜寻觅仙缘天道之路
微媒有道
467.6万
-
凡人修仙传｜寻觅仙缘天道之路
微媒有道
467.6万
热门歌手
- 韩国
- 华语
- 欧美
-
周杰伦
-
周杰伦
-
周杰伦
-
周杰伦
-
周杰伦
推荐内容
< 1/2 >
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.com)