👨🎓学生HTML静态网页基础水平制作👩🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,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.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
扫一扫
446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
