写了个静态的网页-模仿网易云

今天父亲节，正好用它来祝福我爸爸父亲节快乐

效果图

后面的动态效果是参考妙味里一个学员制作的

只贴html+css，因为js有点多，不知道怎么弄上来

html

<html>
<head>
<meta charset="utf-8">
<title>miaowei</title>
<link rel="stylesheet" href="../css/miaowei.css" type="text/css"/>
<script src="../js/vue.min.js"></script>
<script src="../js/cardsData.js"></script>
<script src="../js/card.js"></script>
<script src="../js/polyfill.js"></script>
<script src="../js/tool.js"></script>
</head>
<body>
<canvas id="dot" class="shoeIn" style="background: linear-gradient(rgb(156, 194, 201), rgb(132, 104, 184))" >
</canvas>
<section id="section0"><div id="contain"><div id="top"><div class="search"><input class="text" id="text" type="text"  v-model="message"/><input class="btn" type="submit" value="搜索"/></div><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></ul></div><div id="list"><ul><li>我最喜欢的</li><li>橘子皮</li><li>刘瑞琦</li><li>许嵩</li><li>新建歌单</li></ul></div><div id="show"><div class="image"><img src="../image/timg2.jpg"></div><span class="advice">推荐歌单</span><div class="songlist"><ul><li class="l1"><a href="#"><img src="../image/songlist1.jpg"></a><span class="bottom">那些出场自带BGM的漫改电影角色</span></li><li class="l1"a href="#"><img src="../image/songlist2.jpg"></a><span class="bottom">港乐简史：百花争艳，女歌手篇</span></li><li class="l1"><a href="#"><img src="../image/songlist3.jpg"></a><span class="bottom">一个旋律两手歌|是无意穿堂风，偏偏引山洪</span></li><li class="l1"><a href="#"><img src="../image/songlist4.jpg"></a><span class="bottom">国语古风中国风神曲，细腻地抚摸你的耳膜</span></li><li class="l1"><a href="#"><img src="../image/songlist5.jpg"></a><span class="bottom">1990-1999年内地流行乐坛经典回顾</span></li><li class="l2"><a href="#"><img src="../image/songlist6.jpg"></a><span class="bottom">90/九十年代经典流行歌曲</span></li><li class="l2"><a href="#"><img src="../image/songlist7.jpg"></a><span class="bottom">华语/百首写给前任的歌，让你百感交集</span></li><li class="l2"><a href="#"><img src="../image/songlist8.jpg"></a><span class="bottom">二胡精选|二弦在手，演绎人间悲欢离合</span></li><li class="l2"><a href="#"><img src="../image/songlist9.jpg"></a><span class="bottom">民谣|哪些小众却又很好听的歌</span></li><li class="l2"><a href="#"><img src="../image/songlist10.jpg"></a><span class="bottom">高考季|2017一起听歌记单词吧</span></li></ul></div></div><div id="progress"><div class="play"><img src="../image/yingtao.jpg"><div class="about"><span class="song">父亲</span><br><span class="songer">筷子兄弟</span></div></div><div class="bar"><span>筷子兄弟 - 父亲.mp3</span><audio id="music" src="../audio/筷子兄弟 - 父亲.mp3" controls="controls" preload="auto" loop="loop"></audio></div></div></div></section>
</body>
<script src="../js/vue.min2.js"></script>
<script>new Vue({el: '.text',data: {message:'父亲'}})
</script>
</html>

css

body,div,p,span,ul,li,ol,h1,h2,h3,h4,h5,h6,a{margin:0px;padding:0px;}
a{text-decoration:none;}
ul{list-style:none;}#section{position:relative;}section{background:transparent;transition:1s;
}
#contain{position:absolute;width:1200px;height:700px;margin:-700px 200px 0px 100px;box-shadow:0 0 20px 3px rgba(215, 141, 241, 0.8)
}
#top{height:50px;}
#top .search{width:300px;height:50px;float:left;
}
#top .search .text{width:200px;height:30px;line-height:30px;margin-top:15px;margin-left:30px;-webkit-border-radius:25px;
}
#top .search .btn{width:45px;height:30px;text-align:center;-webkit-border-radius:5px;
}
#top ul{width:800px;height:50px;float:right;
}
#top ul li{width:80px;height:30px;float:left;margin:10px 0 0 50px;
}
#top ul li a{width:80px;height:30px;line-height:30px;color:pink;
}
#list{width:300px;height:500px;border-right:1px solid #fff;float:left;
}
#list ul{position:absolute;width:300px;height:400px;float:left;margin-left:30px;
}
#list ul li{display:block;width:200px;height:30px;line-height:30px;margin:15px 0 0 20px;
}
#show{width:850px;height:600px;float:right;
}
#show .image{width:500px;height:150px;margin:auto;
}
#show .image img{display:block;width:400px;height:150px;margin:auto;
}
#show .advice{display:block;width:100px;height:30px;line-height:30px;margin-left:25px;
}
#show .songlist ul li{width:140px;height:160px;float:left;margin-left:20px;
}
#show .songlist ul .l1{margin-top:10px;
}
#show .songlist ul .l2{margin-top:30px;
}
#show .songlist img{width:140px;height:130px;
}
#show .songlist span{font-size:12px;width:140px;height:15px;line-height:15px;
}
#progress{height:150px;position:absolute;margin-top:530px;}
#progress .play{width:280px;height:150px;float:left;margin-left:20px;margin-top:10px;border-right:1px solid #fff;}
.play img{width:100px;height:100px;float:left;
}
.play .about{width:100px;height:100px;float:left;margin-left:30px;
}
.about .song,.about .songer{height:25px;line-height:25px;margin-top:5px;
}
#progress .bar{width:800px;height:100px;float:right;
}
.bar span{display:block;width:600px;height:30px;line-height:30px;position:relative;margin-left:80px;margin-top:30px;
}
.bar #music{width:600px;margin-left:80px;margin-top:10px;
}
body,div,p,span,ul,li,ol,h1,h2,h3,h4,h5,h6,a{margin:0px;padding:0px;}
a{text-decoration:none;}
ul{list-style:none;}#section{position:relative;}section{background:transparent;transition:1s;
}
#contain{position:absolute;width:1200px;height:700px;margin:-700px 200px 0px 100px;box-shadow:0 0 20px 3px rgba(215, 141, 241, 0.8)
}
#top{height:50px;}
#top .search{width:300px;height:50px;float:left;
}
#top .search .text{width:200px;height:30px;line-height:30px;margin-top:15px;margin-left:30px;-webkit-border-radius:25px;
}
#top .search .btn{width:45px;height:30px;text-align:center;-webkit-border-radius:5px;
}
#top ul{width:800px;height:50px;float:right;
}
#top ul li{width:80px;height:30px;float:left;margin:10px 0 0 50px;
}
#top ul li a{width:80px;height:30px;line-height:30px;color:pink;
}
#list{width:300px;height:500px;border-right:1px solid #fff;float:left;
}
#list ul{position:absolute;width:300px;height:400px;float:left;margin-left:30px;
}
#list ul li{display:block;width:200px;height:30px;line-height:30px;margin:15px 0 0 20px;
}
#show{width:850px;height:600px;float:right;
}
#show .image{width:500px;height:150px;margin:auto;
}
#show .image img{display:block;width:400px;height:150px;margin:auto;
}
#show .advice{display:block;width:100px;height:30px;line-height:30px;margin-left:25px;
}
#show .songlist ul li{width:140px;height:160px;float:left;margin-left:20px;
}
#show .songlist ul .l1{margin-top:10px;
}
#show .songlist ul .l2{margin-top:30px;
}
#show .songlist img{width:140px;height:130px;
}
#show .songlist span{font-size:12px;width:140px;height:15px;line-height:15px;
}
#progress{height:150px;position:absolute;margin-top:530px;}
#progress .play{width:280px;height:150px;float:left;margin-left:20px;margin-top:10px;border-right:1px solid #fff;}
.play img{width:100px;height:100px;float:left;
}
.play .about{width:100px;height:100px;float:left;margin-left:30px;
}
.about .song,.about .songer{height:25px;line-height:25px;margin-top:5px;
}
#progress .bar{width:800px;height:100px;float:right;
}
.bar span{display:block;width:600px;height:30px;line-height:30px;position:relative;margin-left:80px;margin-top:30px;
}
.bar #music{width:600px;margin-left:80px;margin-top:10px;
}

因为有人想要效果，不知道是不是这个

链接：https://pan.baidu.com/s/1y_OV1K-cXFrmgcgnwHS8oA
提取码：o21f

在贴下初学html，css时练手项目

链接：https://pan.baidu.com/s/1y_OV1K-cXFrmgcgnwHS8oA
提取码：o21f

写了个静态的网页-模仿网易云相关推荐

HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯js的代码实现下前台: Javascript+jQuery 后台: php/nodej ...
React Native 模仿网易云音乐手机客户端，兼容安卓和IOS两个平台
React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台. GitHub 完整源码地址https://github.com/yezihaohao/NeteaseCloudMusic ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法二）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法一）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
基于Qt模仿网易云音乐播放器
基于Qt模仿网易云音乐界面,目前只实现了部分界面,后续继续完善改造. 部分代码: #ifndef MYSQLDATAMGR_H #define MYSQLDATAMGR_H#include <Q ...
模仿网易云音乐鲸云特效动效
JinyunEffect 项目地址:tyhjh/JinyunEffect 简介: 模仿网易云音乐鲸云特效动效更多:作者提 Bug 标签: # Android 粒子特效--网易云鲸云特效文 ...
微信小程序实战教程：模仿—网易云音乐（二）
接上一篇:微信小程序实战教程:模仿-网易云音乐(一) wxml进行渲染:  <view class="lyric-content" hidden ...
Qt之模仿网易云音乐广告Banner
文章目录环境代码使用效果代码分享环境 vs2013 + Qt5.6.2 代码 NetEasyBanner.h #ifndef NETEASYBANNER_H #define NETEASY ...
duilib 模仿网易云音乐
duilib 模仿网易云音乐 duilib+cef+html实现,目前只有前端简单框架想要交流的,可以加qq:1021766106,或者微信:Official6-8一起交流技术栈

写了个静态的网页-模仿网易云

写了个静态的网页-模仿网易云相关推荐

最新文章

热门文章