一、👨🎓网站题目
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。
❤ 【作者主页——🔥获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】
二、✍️网站描述
🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有5-10个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、💠网站演示
五、⚙️ 网站代码
🧱HTML结构代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>风车乐栈</title>
<meta name="keywords" content="风车乐栈,播放器,播放器下载,音乐,音乐下载,音乐播放器,MV,MTV,高清MV,热门MV,MV下载,mv在线观看" />
<meta name="description" content="风车乐栈是风车乐栈公司推出的一款免费音乐服务，海量乐库在线试听、最流行新歌在线首发、高品质音乐试听、正版音乐下载、MV观看等，是互联网音乐播放和下载的首选" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/player.css" />
<link rel="Shortcut Icon" href="images/favicon.ico" />
<script type="text/javascript" src="js/modernizr.js"></script>
<script>
if ((!to3d()) || document.documentMode == 10 || document.documentMode == 11){
window.location="error/error.html";
}
</script>
</head>
<body>
<!-- 头部模板调用 开始 -->
<!--头部 开始-->
<div id="header">
<!--顶部bar 开始-->
<div class="nav_topbar">
<div class="nav_topbar_cont">
<ul>
<li><a href="">我的主页</a></li><li><a href="">个人中心</a></li><li><a href="">帮助中心</a></li>
</ul>
<!--用户登录-->
<a class="user_login" href="javascript:;"><em></em>用户登录<i class="arrow"></i></a>
<div style="display:none;" class="user_login_box">
<p class="shadow_cover"></p>
<div class="user_login_inner">
<form class="signin_form">
<input class="ipt" type="text" value="用户名" name="log">
<input class="ipt" type="password" value="密码" name="pwd">
<input name="rememberme" id="rememberme" checked="checked" value="forever" type="checkbox">记住密码
<input class="login_btn" type="submit" name="submit" value="登录">
</form>
<p>
<a href=""><i class="sign"></i>注册</a> |
<a href=""><i class="lock"></i>忘记密码？</a>
</p>
</div>
</div>
<!--用户登录-->
</div>
</div>
<!--顶部bar 结束-->
<!--头部导航 开始-->
<div id="headCont">
<div class="main_nav">
<!--LOGO-->
<div class="logo"><a href=""><img src="images/logo.png" width="60" height="60" alt="logo"></a></div>
<div class="logoName">
<a href=""><img src="images/logoName.png" width="120" height="60" alt="logoName"></a>
</div>
<!--主导航-->
<ul class="navigation" id="main_nav">
<li> <!--class="on" -->
<a href=""><span>音乐馆</span><span>音乐馆</span></a>
</li>
<li>
<a href="?cat=6"><span>MV</span><span>MV</span></a>
</li>
<li>
<a href="?cat=7"><span>我的音乐</span><span>我的音乐</span></a>
</li>
<li>
<a href="?cat=8"><span>下载客户端</span><span>下载客户端</span></a>
</li>
<audio id="audioPlayer"></audio>
</ul>
<div class="user_info">
<div class="user_photo"><a href=""><img src="images/user_photo.png" /></a></div>
<a class="nikeName" href="">水手怕水</a>
<a class="user_info_list" href=""><span>8</span><span>歌单</span></a>
<a class="user_info_list" href=""><span>3</span><span>收听</span></a>
<a class="user_info_list" href=""><span>0</span><span>听众</span></a>
</div>
</div>
<!--二级导航-->
<nav class="sub_nav">
<div class="nav_list">
<ul>
<li>
<a href="" class="smallogo">
<span class="mini_logo"></span>
</a>
</li>
<li><a href="" class="home">首页</a></li>
<div class="sub_list" id="sub_list">
<p class="active">
<a href="?cat=9">独家首发</a><a href="?cat=10">歌单广场</a>
<a href="?cat=11">歌手</a>
<a href="?cat=12">专辑</a><a href="?cat=13">电台</a>
</p>
<p>
<a href="?cat=6">MV推荐</a><a href="?cat=6">MV库</a>
<a href="?cat=6">MV专题</a><a href="?cat=6">音乐现场</a>
</p>
<p>
<a href="?cat=7">主页</a><a href="?cat=7">歌单</a>
<a href="?cat=7">收听</a><a href="?cat=7">听众</a>
<a href="?cat=7">MV收藏</a>
</p>
<p>
<a href="?cat=8">电脑版本</a><a href="?cat=8">pad版本</a>
<a href="?cat=8">手机版本</a>
</p>
</div>
<!--搜索框 开始-->
<div class="search_box">
<form role="search" method="get" id="searchform" class="searchform" action="">
<input type="submit" value="" class="search_btn" id="searchsubmit" />
<input type="text" class="search" value="搜索好音乐" name="s" id="s" />
</form>
<!--搜索下拉菜单-->
<div class="hot_search" id="hot_search">
<div>
<span><a href="javascript:;">陈奕迅</a><font>171万</font></span>
<div>
<span><a href="javascript:;">周杰伦</a><font>164万</font></span>
<div>
<span><a href="javascript:;">G.E.M. 邓紫棋</a><font>107万</font></span>
<div>
<span><a href="javascript:;">泡沫</a><font>90万</font></span>
<div>
<span><a href="javascript:;">林俊杰</a><font>62万</font></span>
<div>
<span><a href="javascript:;">本兮</a><font>57万</font></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--搜索下拉菜单-->
</div>
<!--搜索框 结束-->
</ul>
</div>
</nav>
</div>
<!--头部导航 结束-->
</div>
<!--头部 结束-->
<!-- 头部模板调用 结束 -->
<!-- 音乐馆 模块 开始 default-->
<section class="section_cont">
<!--轮播图 开始 -->
<div class="main_banner">
<div class="main_banner_bg"></div>
<div class="main_banner_wrap">
<canvas id="myCanvas" width="150" height="150"></canvas>
<div class="main_banner_box" id="m_box">
<a href="javascript:void(0)" class="banner_btn js_pre">
<span class="banner_btn_arrow"><i></i></span>
</a>
<a href="javascript:void(0)" class="banner_btn btn_next js_next">
<span class="banner_btn_arrow"><i></i></span>
</a>
<ul>
<li id="imgCard0">
<a href=""><span style="opacity:0;"></span></a>
<img src="main_banner/big0020150102211033.jpg" alt="">
<p style="bottom:0">周杰伦粉丝版MV</p>
</li>
<li id="imgCard1">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/big0120150101183428.jpg" alt="">
<p>乐侃有声节目第二期</p>
</li>
<li id="imgCard2">
<a href=""><span style="opacity:0.4;" ></span></a>
<img src="main_banner/big0320150101183351.jpg" alt="">
<p>乐见大牌：”荣“耀之声，”维“我独尊</p>
</li>
<li id="imgCard3">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/big0420150101224343.jpg" alt="">
<p>王力宏四年心血结晶</p>
</li>
<li id="imgCard4">
<a href=""><span style="opacity:0.4;"></span></a>
<img src="main_banner/big0720150102210934.jpg" alt="">
<p>MV精选：《武媚》女神团美艳大比拼</p>
</li>
</ul>
<!--火狐倒影图层-->
<p id="rflt"></p>
<!--火狐倒影图层-->
</div>
<!--序列号按钮-->
<div class="btn_list">
<span class="curr"></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<!--轮播图 结束 -->
<!--在线首发 开始-->
<div class="new_songs new_common">
<!--标题 开始-->
<div class="new_songs_title new_common_title">
<span></span>
<a href="?cat=12" class="more"></a>
<a id="albumNext" href="javascript:;"></a>
<a id="albumPrev" href="javascript:;"></a>
<em>/ 2</em><em class="pageNum">1</em>
</div>
<!--标题 结束-->
<!--第1页-->
<ul class="show">
<li class="albumBox">
<div class="album">
<p>
<a href="?p=19"><img width="220" height="220" src=" pic/album1-220x220.jpg" class="attachment-220x220 wp-post-image" alt="你好，再见 - 戚薇" /> <span><em>你好，再见</em><em>戚薇</em><i></i></span></a>
</p>
<a href="?p=19"><span>歌曲</span><strong>4</strong></a>
<a href="?p=19"><span>试听</span><strong>1950<em>万</em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=16"><img width="220" height="220" src=" pic/album2-220x220.jpg" class="attachment-220x220 wp-post-image" alt="帽子戏法 - 魏晨" /> <span><em>帽子戏法</em><em>魏晨</em><i></i></span></a>
</p>
<a href="?p=16"><span>歌曲</span><strong>5</strong></a>
<a href="?p=16"><span>试听</span><strong>1860<em>万</em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=13"><img width="220" height="220" src=" pic/album3-220x220.jpg" class="attachment-220x220 wp-post-image" alt="哎呦，不错哦 - 周杰伦" /> <span><em>哎呦，不错哦</em><em>周杰伦</em><i></i></span></a>
</p>
<a href="?p=13"><span>歌曲</span><strong>12</strong></a>
<a href="?p=13"><span>试听</span><strong>3750<em>万</em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=10"><img width="220" height="220" src=" pic/album4-220x220.jpg" class="attachment-220x220 wp-post-image" alt="新地球 - 林俊杰" /> <span><em>新地球</em><em>林俊杰</em><i></i></span></a>
</p>
<a href="?p=10"><span>歌曲</span><strong>12</strong></a>
<a href="?p=10"><span>试听</span><strong>4020<em>万</em></strong></a>
</div>
</li>
<li class="albumBox">
<div class="album">
<p>
<a href="?p=7"><img width="220" height="220" src=" pic/album5-220x220.jpg" class="attachment-220x220 wp-post-image" alt="album5" /> <span><em>三十未满</em><em>苏醒</em><i></i></span></a>
</p>
<a href="?p=7"><span>歌曲</span><strong>12</strong></a>
<a href="?p=7"><span>试听</span><strong>2060<em>万</em></strong></a>
</div>
</li>
</ul>
<!--第2页-->
<ul class="albumList">
<li class="albumBox">
<div class="album">
<p>
<a href="?p=34"><img width="220" height="220" src=" pic/album6-220x220.jpg" class="attachment-220x220 wp-post-image" alt="敬女人" /> <span><em>敬女人</em><em>徐若瑄</em><i></i></span></a>
</p>
<a href="?p=34"><span>歌曲</span><strong>4</strong></a>
<a href="?p=34"><span>试听</span><strong>3180<em>万</em></strong></a>
</div>
</li>
<img width="220" height="125" src=" pic/mv_1x2_13.jpg" class="attachment-220x125 wp-post-image" alt="傻样 - 赵奕欢" /> <strong>傻样</strong>
<strong>赵奕欢</strong>
<span>
<font>傻样 – 赵奕欢</font>
<font><i></i></font>
<font><i></i>1243769<em>2 pic4-10-29</em></font>
</span>
</a>
</li>
<li>
<a href="?p=60">
<img width="220" height="125" src=" pic/mv_1x2_11.jpg" class="attachment-220x125 wp-post-image" alt="有一种勇气叫放弃 - 丁当" /> <strong>有一种勇气叫放弃</strong>
<strong>丁当</strong>
<span>
<font>有一种勇气叫放弃 – 丁当</font>
<font><i></i></font>
<font><i></i>1358666<em>2 pic4-10-29</em></font>
</span>
</a>
</li>
<li>
<a href="?p=44">
<img width="220" height="125" src=" pic/mv_1x2_4.jpg" class="attachment-220x125 wp-post-image" alt="你身边的 - 魏晨" /> <strong>你身边的</strong>
<strong>魏晨</strong>
<span>
<font>你身边的 – 魏晨</font>
<font><i></i></font>
<font><i></i>7377190<em>2 pic4-12-23</em></font>
</span>
</a>
</li>
<li>
<a href="?p=38">
<img width="220" height="125" src=" pic/congcongnanian.jpg" class="attachment-220x125 wp-post-image" alt="匆匆那年 - 王菲" /> <strong>匆匆那年</strong>
<strong>王菲</strong>
<span>
<font>匆匆那年 – 王菲</font>
<font><i></i></font>
<font><i></i>12377190<em>2 pic4-11-03</em></font>
</span>
</a>
</li>
</ul>
</div>
<!--3港台-->
<div class="mvList">
<ul>
<li>
<a href="?p=143">
<img width="220" height="125" src=" pic/mv_1x2_30.jpg" class="attachment-220x125 wp-post-image" alt="光辉岁月(feat. 张心杰)" /> <strong>光辉岁月</strong>
<strong>(feat. 张心杰)</strong>
<span>
<font>光辉岁月 – (feat. 张心杰)</font>
<font><i></i></font>
<font><i></i>6494100<em>2 pic4-09-05</em></font>
</span>
</a>
</li>
<li>
<a href="?p=140">
<img width="220" height="125" src=" pic/mv_1x2_28-220x125.jpg" class="attachment-220x125 wp-post-image" alt="找自己-中国好声音第三季" /> <strong>找自己</strong>
<strong>中国好声音第三季</strong>
<span>
<font>找自己 – 中国好声音第三季</font>
<font><i></i></font>
<font><i></i>584354<em>2 pic4-09-12</em></font>
</span>
</a>
</li>
<li>
<a href="?p=137">
<img width="220" height="125" src=" pic/mv_1x2_25.jpg" class="attachment-220x125 wp-post-image" alt="龙卷风-G.E.M. 邓紫棋" /> <strong>龙卷风</strong>
<strong>G.E.M. 邓紫棋</strong>
<span>
<font>龙卷风 – G.E.M. 邓紫棋</font>
<font><i></i></font>
<font><i></i>3204658<em>2 pic4-09-26</em></font>
</span>
</a>
</li>
<li>
<a href="?p=106">
<img width="220" height="125" src=" pic/mv_1x2_10.jpg" class="attachment-220x125 wp-post-image" alt="mv_1x2_10" /> <strong>在你耳边说</strong>
<strong>周兴哲</strong>
<span>
<font>在你耳边说 – 周兴哲</font>
<font><i></i></font>
<font><i></i>1042425<em>2 pic4-12-31</em></font>
</span>
</a>
</li>
<li>
<a href="?p=104">
<img width="220" height="125" src=" pic/mv_1x2_9.jpg" class="attachment-220x125 wp-post-image" alt="蓝色圣诞节 - 徐若瑄" /> <strong>蓝色圣诞节</strong>
<strong>徐若瑄</strong>
<span>
<font>蓝色圣诞节 – 徐若瑄</font>
<font><i></i></font>
<font><i></i>6392509<em>2 pic4-12-23</em></font>
</span>
</a>
</div>
<!--歌曲列表滚动条-->
<div class="scrollBar">
<div class="bar"></div>
</div>
<!--播放器展开隐藏按钮-->
<button type="button" class="folded_bt" title="点击收缩" id="btnfold">
<span></span>
</button>
<div id="listRemove"></div><!--移除全部歌曲按钮-->
<div id="listClose"></div><!--歌曲列表展开收缩按钮-->
</div>
<!-- 左侧播放器 结束-->
<!--底部 开始 -->
<div class="footer" id="footer">
<div class="footer_cont">
<div class="footer_cont_left">
<p>
<a href="">关于我们</a>|<a href="">版权声明</a>|<a href="">诚聘英才</a>|
<a href="">联系我们</a>|<a href="">历史合作</a>|<a href="">唱片公司</a>|
<a href="">广告服务</a>|<a href="">友情链接</a>|<a href="">帮助中心</a>
</p>
<p>
Copyright © 2 pic5-2 pic6 <a href="">www.xxffcc.com</a> All Rights Reserved
</p>
</div>
<div class="footer_cont_right">
<span>关注我们</span>
<ul>
<li><a href=""><span></span></a></li><li><a href=""><span></span></a></li>
<li>
<a href="" class="twoCode">
<span></span>
<img class="tCode" src=" images/twoCode.jpg" width="100" height="100" alt="二维码" />
</a>
</li>
<li><a href=""><span></span></a></li><li><a href=""><span></span></a></li>
</ul>
</div>
<div id="toTop"></div>
</div>
</div>
<!--底部 结束 -->
<script type="text/javascript" src=" js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--播放器js-->
<script type="text/javascript" src="js/player.js"></script>
<script type="text/javascript" src="js/playlist.js"></script>
<script type="text/javascript" src="js/player_database.js"></script>
<!--播放器js-->
<!-- 底部模板调用 结束 -->
</body>
</html>
💒CSS样式代码
/*首页样式（音乐馆样式）*/
html,body,header,nav,footer,div,ul,ol,li,p,form,input,a,span,em,i,strong,b,font,img{
margin:0; padding:0; list-style:none; border:none;}
body{font-family:"微软雅黑"; font-size:14px; height:800px;
background:url(../images/bg.png); overflow-x:hidden;}
a{text-align:center; text-decoration:none; outline:none;}
input{outline:none;}
em{font-style:normal;}
/*滚动条*/
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-track-piece{background-color:transparent;}
body::-webkit-scrollbar-track-piece{background-color:#ccc;}
::-webkit-scrollbar-track-piece:no-button{}
::-webkit-scrollbar-thumb{background-color:#29944d;border-radius: 2px;}
::-webkit-scrollbar-thumb:hover{background-color:#0eaf52;}
::-webkit-scrollbar-thumb:active{background-color:#0eaf52;}
/*/滚动条*/
/*头部header*/
#header{width:100%; height:132px; position:relative; left:0; top:0;}
/*顶部导航*/
.nav_topbar{width:100%; min-width:1180px; height:30px; background:#fff;/*#333D46;*/
box-shadow:1px 1px 10px #112233;
border-top:2px solid #0eaf52/*1ABC9C*/;
}
.nav_topbar_cont{width:1180px; height:32px; margin:0 auto; position:relative; left:0; top:0;}
.nav_topbar_cont ul li {height:32px; float:left;}
.nav_topbar_cont ul li a{width:70px; height:32px; display:block; line-height:32px;
color:#666; font-size:12px;
}
.nav_topbar_cont ul li a:hover{color:#ffae00;}
/*顶部导航 用户登录*/
.nav_topbar a.user_login{width:75px; height:30px; display:block; padding:0 5px 0 20px;
position:absolute; right:65px; top:0; line-height:30px; color:#666;
/*background:#1ABC9C;*/ text-align:center; font-size:12px; z-index:6;
background:url(../images/user.png) no-repeat 2px 6px; overflow:hidden;
transition:.5s; -webkit-transition:.5s;
}
.nav_topbar a.btn_active{background:#fff;}
.nav_topbar a.user_login i.arrow{width:10px; height:10px; display:inline-block;
background:url(../images/icos.png) no-repeat -24px -9px; margin-left:5px;
transition:.5s; -webkit-transition:.5s; /*用户登录按钮图标*/
}
.nav_topbar a.user_login:hover{color:#ff9d00;
background:url(../images/user2.png) no-repeat 2px 6px;}
.nav_topbar a.user_login:hover i{background-position:-24px 4px;} /*三角图标*/
.nav_topbar .user_login_box{width:200px; height:185px;
border-bottom:3px solid #0eaf52/*1ABC9C*/;
position:absolute; right:65px; top:37px; z-index:12;
background:#fff; padding:15px; padding-top:0;
color:#999;
box-shadow:1px 1px 10px #112233;
}
.shadow_cover{width:100%; height:12px; background:#fff;
position:absolute; left:0; top:-12px;}
.user_login_inner .ipt{width:100%; height:32px; background:rgb(249,249,249);
margin:5px 0; font-weight:500; text-indent:10px; color:#999;
border:1px solid #ddd; border-radius:3px; line-height:32px;
}
#rememberme{margin:5px 5px 0 0;}
.user_login_inner input.login_btn{width:100%; height:35px; display:block;
background:#0eaf52/*1ABC9C*/; border-radius:2px; margin:10px 0;
color:#fff; font-weight:bold; cursor:pointer;
font-family:"微软雅黑";
}
.user_login_inner input.login_btn:hover{background:#ffae00;}
.user_login_inner a{color:#666/*1ABC9C*/;}
.user_login_inner a:hover{color:#f60;}
.user_login_inner a i.sign{width:18px; height:15px; display:inline-block;
background:url(../images/icos.png) no-repeat 0 0; vertical-align:-5px;
}
.user_login_inner a:hover i.sign{background-position:0 -15px;}
.user_login_inner a i.lock{width:18px; height:17px; display:inline-block;
background:url(../images/icos.png) no-repeat 0 -29px; vertical-align:-5px;
}
.user_login_inner a:hover i.lock{background-position:0 -47px;}
/*顶部导航 用户登录 结束*/
#headCont{width:1180px; height:100px; margin:0 auto; position:relative;}
/*LOGO*/
.main_nav{width:1178px; height:66px; position:relative; left:1px; top:0;
background:url(../images/logoName.png) no-repeat 100px 6px;
box-shadow:0 0 3px #dfefdf;
}
.main_nav .logo{width:60px; height:60px; padding:3px;
position:absolute; left:16px; top:0px; z-index:5;
}
.main_nav .logo img{animation:wm 2s infinite linear; -webkit-animation:wm 2s infinite linear;}
@keyframes wm{
from{transform:rotate(0deg);}
to{transform:rotate(-360deg);}
}
@-webkit-keyframes wm{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(-360deg);}
}
.main_nav .logoName{width:120px; height:60px; position:absolute; left:98px; top:5px;}
/*主导航*/
.main_nav ul.navigation{width:600px; height:64px; position:absolute;
left:220px; top:2px;}
.main_nav ul.navigation li{height:64px; float:left;
-moz-perspective:700px; -webkit-perspective:700px; -o-perspective:700px;
}
.main_nav ul.navigation li a{
float:left; line-height:64px; position:relative; left:0; top:0; font-size:16px;
color:#555; font-weight:bold; text-shadow:1px 1px 1px #112233;
-moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
-o-transform-style:preserve-3d; transition:.4s;
-moz-transform-origin:center center -32px;
-webkit-transform-origin:center center -32px;
-o-transform-origin:center center -32px;
}
.main_nav ul.navigation li a span{
width:120px; height:64px; float:left; text-align:center;
-moz-backface-visibility:hidden; -webkit-backface-visibility:hidden;
-o-backface-visibility:hidden;
}
.main_nav ul.navigation li a span:nth-of-type(2){
position:absolute; left:0; top:-64px; color:#FFAE00; font-size:18px;
-moz-transform-origin:bottom; -webkit-transform-origin:bottom;
-moz-transform:rotateX(90deg); -webkit-transform:rotateX(90deg);
-o-transform:rotateX(90deg);
-position:-50px 0;}
.banner_btn:hover i{
-webkit-animation:arrow 0.5s infinite alternate ease-in-out;
-moz-animation:arrow 0.5s infinite alternate ease-in-out;
}
@-webkit-keyframes arrow{
from{-webkit-transform:scale(1); opacity:1;}
to{-webkit-transform:scale(1.5); opacity:0.2;}
}
@-moz-keyframes arrow{
from{-moz-transform:scale(1); opacity:1;}
to{-moz-transform:scale(1.5); opacity:0.2;}
}
.main_banner_box{
width:1200px; height:280px; margin:40px auto 0; position:relative; z-index:0;
/*-webkit-倒影样式*/
-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 100%);
}
/*火狐倒影图层样式*/
.main_banner_box p#rflt{width:1200px; height:280px; position:absolute; left:0; top:280px;
background:-moz-element(#m_box) no-repeat; -moz-transform:scaleY(-1); opacity:0.2;
}/*火狐倒影图层样式*/
.main_banner li{
position:absolute; background:#000; overflow:hidden;
box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);
}
/*给每张图片初始设置不同宽高，层级，位置*/
.main_banner li#imgCard0{
width:670px; height:280px; z-index:5;
left:255px; top:0px; opacity:1; background:#333d46;
}
.main_banner li#imgCard1{
width:580px; height:240px; z-index:1;
left:600px; top:20px; opacity:1; background:#333d46;
}
.main_banner li#imgCard2{/*初始在背后，透明度为0*/
width:450px; height:180px; z-index:1;
left:0px; top:60px; opacity:0; background:#333d46;
}
.main_banner li#imgCard3{/*初始在背后，透明度为0*/
width:450px; height:180px; z-index:1;
left:0px; top:60px; opacity:0; background:#333d46;
}
.main_banner li#imgCard4{
width:580px; height:240px; z-index:2;
left:0px; top:20px; opacity:1; background:#333d46;
}
.main_banner li img{width:100%; height:100%;}
.main_banner li span{/*遮罩层*/
width:100%; height:100%; position:absolute; top:0; left:0;
z-index:1; background:#000; opacity:0; filter:alpha(opacity=0);
color:#fff; font-size:30px; line-height:120px; text-align:center;
}
/*热门歌手 结束*/
/*网站底部 开始*/
.footer{width:100%; height:100px; background:#fff; box-shadow:0 0 2px #c5c5c5; margin-top:35px;
border-bottom:2px solid #0eaf52;}
.footer_cont{width:1180px; height:100px; margin:0 auto; position:relative; left:0; top:0;
background:url(../images/flag.jpg) no-repeat 789px 35px;}
.footer_cont_left{width:780px; height:80px; margin-top:15px; float:left;}
.footer_cont_left p{width:100%; height:35px; text-align:center;
font-size:12px; padding-top:5px; color:#666;}
.footer_cont_left a{color:#0eaf52;}
.footer_cont_left p:first-child a{width:70px; height:25px; display:inline-block;
line-height:20px; margin-top:17px; color:#666;}
/*右侧 */
.footer_cont_right{width:330px; height:40px; margin-top:15px; float:right;
padding:20px 0 0 50px;}
.footer_cont_right span{width:80px; height:32px; display:block; float:left;
line-height:32px; font-size:16px; text-align:center; color:#123;}
.footer_cont_right ul li{float:left; margin-right:5px;}
.footer_cont_right ul li a{width:32px; height:32px; display:block;
position:relative; left:0; top:0; border-radius:50%;}
.footer_cont_right ul li:nth-of-type(1) a{background:url(../images/index1.png) no-repeat;}
.footer_cont_right ul li:nth-of-type(2) a{background:url(../images/index2.png) no-repeat;}
.footer_cont_right ul li:nth-of-type(3) a{background:url(../images/index3.png) no-repeat;}
.footer_cont_right ul li:nth-of-type(4) a{background:url(../images/index4.png) no-repeat;}
.footer_cont_right ul li:nth-of-type(5) a{background:url(../images/index5.png) no-repeat;}
.footer_cont_right ul li span{width:32px; height:32px; display:block; border-radius:50%;
position:absolute; left:0; top:0; background:rgba(0,0,0,0);
transition:.2s;}
.footer_cont_right ul li a:hover span{background:rgba(0,0,0,0.3);}
#footer img.tCode{
display:none; position:absolute; left:-34px;
top:-105px; border:1px solid #555;
}
/*回到顶部*/
#toTop{width:50px; height:50px; position:absolute; cursor:pointer;
left:0; top:0; left:48%; top:-25px; background:url(../images/toTop.png) no-repeat;}
/*网站底部 结束*/
六、🥇 如何让学习不再盲目
21年程序员总结给编程菜鸟的16条忠告
- 入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。
- 多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。
- 菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。
- 不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。
- 没积累足够知识和经验前，你是开发不出一个完整项目的。
- 把最新技术挂在嘴边，还不如把过时技术牢记心中。
- 活到老学到老，只有一招半式是闯不了江湖的。
- 看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。
- 书读百遍其义自见，别指望读一遍就能掌握。
- 请把教程里的例子亲手实践下，即使案例中有完整源码。
- 把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。
- 不要漏掉教程中任何一个习题——请全部做完并做好笔记。
- 水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。
- 每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
- 做好保存源文件的习惯，这些都是你的知识积累。
- 遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
