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

来源：互联网发布：软件需求变更申请表编辑：程序博客网时间：2024/06/04 11:23

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

效果图

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

只贴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;}

阅读全文

0 0