<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px ; padding: 0px; } a{ color: black; text-decoration: none; } a:hover{ text-decoration: none; color:blue; } .top-background{ width: 100%; height: 150px; background-color: purple; text-align: right; background-image: url(img/魅力罗兰Music炫图8.jpg); font-family: modern; font-size: 100px; color: orange; } .Menu{ width: 100%; height: 50px; background-color: coral; text-align: center; } .Menu-btn a{ text-decoration: none; } .container{ width: 100%; height: 1200px; background-image: url(img/魅力罗兰Music炫图18.jpg); } .container-1{ width:80%; height: 400px; background-color: chartreuse; text-align: center; margin: 0px auto; } .container-2{ width:80%; height: 400px; background-color: bisque; text-align: center; margin: 0px auto; } .container-3{ width:80%; height: 400px; background-color: blueviolet; text-align: center; margin: 0px auto; } .container-1-1{ width: 50%; height: 400px; background-color: aqua; text-align: left; float: left; } .container-1-2{ width: 50%; height: 400px; background-color: chocolate; text-align: left; float: left; } .container-2-1{ width: 30%; height: 400px; background-color: darkmagenta; text-align: left; float: left; } .container-2-2{ width: 40%; height: 400px; background-color: darkred; text-align: left; float: left; position: relative; overflow: hidden; } .to-left, .to-right { position: absolute; top: 0px; width: 50px; height: 400px; background-color: black; color: white; font-size: 30px; text-align: center; line-height: 400px; opacity: 0.3; } .to-left { left: 0px; } .to-right { right: 0px; } .to-left:hover, .to-right:hover { cursor: pointer; opacity: 0.5; } .banner { width: 2500px; height: 400px; } .items { float: left; width: 430px; height: 400px; background-color: blanchedalmond; font-size: 100px; text-align: center; line-height: 400px; } .container-2-3{ width: 30%; height: 400px; background-color: darkslategrey; text-align: left; float: left; } .container-3-1{ width: 50%; height: 400px; background-color: aqua; text-align: left; float: left; overflow: hidden; } .container-3-2{ width: 50%; height: 400px; background-color: chocolate; text-align: left; float: left; } .text1-1{ list-style: none; float: right; margin-top: 30px; } .photo{ width: 30%; height: 400px; text-align: left; margin-top: 40px; } .text1-2{ list-style: none; float: right; margin-top: 30px; } .photo-1{ text-align: left; margin-top: 40px; } .text-3{ list-style: none; float: left; margin-top: 40px } .text-3-1{ list-style: none; float: right; margin-top:40px; overflow: hidden; } .title-1,.title-2,.title-3,.title-4,.title-5,.title-6{ font-size: 24px; padding-top: 40px; vertical-align: middle; line-height: 50px; } .text-4{ list-style: none; float: left; margin-top: 40px } .text-4-1{ list-style: none; float: right; margin-top:40px; overflow: hidden; } .text-6-1{ list-style: none; float: right; margin-top:40px; overflow: hidden; } .text-6{ list-style: none; float: right; margin-top: 40px } .text-5{ text-indent: 28px; float:right; font-size: 14px; } .photo-3{ text-align: left; margin-top: 30px; } .Menu-btn{ float: left; width: 100px; max-height: 50px; text-align: center; line-height: 50px; font-size: 16px; margin-left: 150px; } .Menu-btn:hover{ cursor: pointer; background-color:green; color: white; max-height: 300px; } </style> </head> <body> <div class="top-background"> 魅力罗兰music </div><!--顶部背景--> <div class="Menu"> <div class="Menu-btn"> <a href="http://web.kugou.com" target="_blank">民谣</a> </div> <div class="Menu-btn"> <a href="http://web.kugou.com" target="_blank">流行</a> </div> <div class="Menu-btn"> <a href="http://web.kugou.com" target="_blank">摇滚</a> </div> <div class="Menu-btn"> <a href="http://web.kugou.com" target="_blank">古典</a> </div> <div class="Menu-btn"> <a href="http://web.kugou.com" target="_blank">蓝调</a> </div> </div> <div class="container"> <div class="container-1"> <div class="container-1-1"> <span class="title-1"><center>中外民谣大荟萃</center></span> <a href="http://web.kugou.com" target="_blank"> <ul class="text1-1"> <li>还是会寂寞 陈绮贞</li> <li>宝贝 张悬</li> <li>在路旁 钟立风</li> <li>董小姐 宋冬野</li> <li>未央歌 黄舒骏</li> <li>灯塔 彭坦</li> <li>我们都一样 棉花糖</li> <li>倒淌河 张浅潜</li> <li>Forever Yang Bob Dylan</li> <li>White Flag Dido</li> <li>Windflowers 齐秦/齐豫</li> <li>The Hill Marketa Irglova</li> <li>Ring Of Fire Johnny Cash</li> <li>Be Ok Ingrid Michaelson</li> <li> Dreamer Sophie Zelmani</li> </ul> </a> <div class="photo"> <a href="http://web.kugou.com/" target="_blank"><img name="minyaoMUSIC" src="./img/魅力罗兰Music炫图39.jpg" width="290px" height="300px"></a> </div> </div> <div class="container-1-2"> <span class="title-2"><center>流行潮流</center></span> <a href="http://web.kugou.com" target="_blank"> <ul class="text1-2"> <li>你还要我怎样 薛之谦</li> <li>十年 陈奕迅</li> <li>喜欢你 邓紫棋</li> <li>时间煮雨 郁可唯</li> <li>爱我别走 张震岳</li> <li>刚好遇见你 李玉刚</li> <li>失恋无罪 A-Lin</li> <li>独家记忆 陈小春</li> <li>Runaway Baby BrunoMars</li> <li>I Just Wanna run The Downtown Fiction</li> <li>You're Beautiful James Blunt</li> <li>Lay Low Josh Turner</li> <li>Because Of You Kelly Clarkson</li> <li>Apologize OneRepublic</li> <li>All Of Me John Legend</li> </ul> </a> <div class="photo-1"> <a href="http://web.kugou.com/" target="_blank"><img class="popMUSIC" src="./img/下载.jpg" width="220px" height="300px"></a> </div> </div> </div><!--内容1--> <div class="container-2"> <div class="container-2-1"> <span class="title-3"><center>重金属风暴</center></span> <a href="http://web.kugou.com" target="_blank"> <ul class="text-3"> <li>Tears Don't Fall</li> <li>Bom</li> <li>To Plant A Seed</li> <li>On My Own</li> <li>Stick Stickly</li> <li>Dead Throne</li> <li>Right Side Of Bed</li> <li>My Curse</li> <li>Two Weeks </li> <li>Mathership</li> <li>Dear Insanity</li> </ul> </a> <a href="http://web.kugou.com" target="_blank"> <ul class="text-3-1"> <li>Bullet for My Valentine</li> <li>Anastacia</li> <li>We Came As Romans</li> <li>Three Days Qrace</li> <li>Attack Attack</li> <li>The Devil Wears Prada</li> <li>Atreyu</li> <li>Killswith Engage</li> <li>All That Remains</li> <li>Enter Shikari</li> <li>Asking Alexanddria</li> </ul> </a> </div> <div class="container-2-2"> <div class="to-left"><</div> <div class="to-right">></div> <div class="banner"> <div class="items"><img class="popMUSIC" src="./img/摇滚3.jpg" height="400px" width="430px"></div> <div class="items" ><img class="photo-2" src="./img/摇滚6.jpg" height="400px" width="430px"></div> <div class="items" ><img class="popMUSIC" src="./img/摇滚.jpg" height="400px" width="430px"></div> <div class="items" ><img class="popMUSIC" src="./img/摇滚7.jpg" height="400px" width="430px" ></div> <div class="items" ><img class="popMUSIC" src="./img/摇滚5.jpg" height="400px" width="430px"></div> </div> </div> <div class="container-2-3"> <span class="title-4"><center>朋克，做真正的自己</center></span> <a href="http://web.kugou.com" target="_blank"> <ul class="text-4"> <li>I could swear</li> <li>Hero</li> <li>Why</li> <li>Pices</li> <li>It's Over</li> <li>Together</li> <li>Confrontation</li> <li>Jesus</li> <li>Crazy</li> <li>Lullaby</li> <li>The Novelist</li> </ul> </a> <a href="http://web.kugou.com" target="_blank"> <ul class="text-4-1"> <li>GOOD4NOTHING</li> <li>EGNISH</li> <li>Busted</li> <li>Sum 41</li> <li>locofrank</li> <li>Avril Lavigne</li> <li>Otep</li> <li>Brand New</li> <li>Dave Kull</li> <li>The Cure</li> <li> Bleed from Within</li> </ul> </a> </div> </div><!--内容2--> <div class="container-3"> <div class="container-3-1"> <span class="title-5"> <center>优雅古典</center> </span> <div class="photo-3"> <a href="http://web.kugou.com/" target="_blank"><img class="classicalMUSIC" SRC="./img/古典.jpg" width="300px" height="190px" /> </div> <p class="text-5"> 所谓古典，其实就是指西方自文艺复兴以后至我们所在年代前五十年作品的总和。古典 音乐里的这个古典和“古典时期”的古典二字完全不一样。古典音乐，已经是一个文化范畴的 概念。是西方并逐步意味着全球的主流音乐的一部分。确实如此，时至今日，西方古典音乐 如同摩天大厦，而它周边的是大片没有影响力的小房子。前后的差距使西方古典音乐已经可 以用全球主流音乐，乃至为主流文化的代名词了。古典两字已经不代表时间或者历史性，而 是一个文化概念。</p> </div> <div class="container-3-2"> <span class="title-6"> <center>柔情蓝调</center> </span> <a href="http://web.kugou.com/" target="_blank"> <ul class="text-6"> <li>Nine MilionBicycles</li> <li>You Won't Let Me Go</<li> <li>Takes Two to Tango</li> <li>La Cumparsita </li> <li>Don't Worry, Be Happy</li> <li>Another Day</li> <li>Homework </li> <li>Birks' Works</li> <li>California Soul</li> <li>C.C. Rider</li> <li>Chez Moi </li> </ul> </a> <a href="http://web.kugou.com/" target="_blank"> <ul class="text-6-1"> <li> Katie Melua</li> <li> Lonnie Johnson</li> <li>Ray Charles</li> <li> Charlie Byrd</li> <li>Bobby McFerrin</li> <li>Malene Mortensen</li> <li>John Lee Hooker</li> <li>Red Garland</li> <li>Marlena Shaw</li> <li>Joe Sample</li> <li>Emilie-Claire Barlow</li> </ul> </a> <div class="photo-4"> <a href="http://web.kugou.com/" target="_blank"><img class="blusMUSIC" SRC="./img/蓝调.jpg" width="190px" height="340px" /></a> </div> </div> </div> </div> <div class="footer-box2" style="background-image: url(./img/魅力罗兰Music炫图19.jpg);"> <center><p class="links">全力做好网上治安秩序打击整治专项行动，打造晴朗网络空间 </p></center> <center><p class="links-1"> <a target="_blank" href="http://www.kuwo.cn/static/file/sitemap/sitemap.html ">网站地图</a> | <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/contact.jsp ">联系我们</a> | <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/fuwu.html ">广告服务</a> | <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/introduction.jsp ">诚聘英才</a> | <a target="_blank" href="http://www.kuwo.cn/static/page/license/license.html ">用户服务协议</a> | <a target="_blank" href="http://www.kuwo.cn/static/page/license/license_privacy.html ">隐私政策</a> | <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/NoBlameDoc.jsp ">酷我音乐网站免责声明</a> | <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/ProtectDoc.jsp ">酷我音乐网站著作保护声明</a> | <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/jianhu1.jsp ">未成年人家长监护工程</a> </p></center> <center><div class="links-2"> 北京酷我科技有限公司版权所有 网络文化经营许可证： <a target="_blank" href="http://image.kuwo.cn/www/wenwangwen.pdf ">京网文[2015]0525-205号</a> <a target="_blank" href="http://image.kuwo.cn/www/shiting1.pdf ">信息网络传播视听节目许可证0109362号</a> 增值电信业务经营许可证B2-20090418 京ICP证060261号 </div></center> <center> <div class="links-3">Copyright 2004-2017 KuGou-Inc.All Rights Reserved</div> </div> </center> </div> <!--</div>--> </body> </html> <script> var to_right = document.getElementsByClassName("to-right")[0]; var to_left= document.getElementsByClassName("to-left")[0]; var banner = document.getElementsByClassName("banner")[0]; var arr = [ ]; var count = 1; to_right.onclick = function(){ toright(); } function toright(){ arr.push(window.setInterval('moveleft()',30)); } function moveleft(){ if(count<5){ if(banner.offsetLeft>count*(-430)){ banner.style.marginLeft =banner.offsetLeft -20+'px'; }else{ for( var x in arr){ window.clearInterval(arr[x]); } count++; } } } to_left.onclick = function(){ toleft(); } function toleft(){ arr.push(window.setInterval('moveright()',30)); } function moveright(){ if(count>1){ if(banner.offsetLeft<(count-2)*(-430)){ banner.style.marginLeft =banner.offsetLeft +10+'px'; }else{ for( var x in arr){ window.clearInterval(arr[x]); } count--; } } } window.setInterval('toright()',1750); </script>
这是一个有关于音乐种类的网页