# 一、👨🎓网站题目 🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。
二、✍️网站描述
🏷️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 lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ音乐</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--头部-->
<div class="head">
<div class="head_con">
<h1 class="logo"><a href="#"><img src="picture/logo.png" alt=""></a></h1>
<ul class="top_list">
<li class="current"><a href="#">音乐馆</a></li>
<li><a href="#">我的音乐</a></li>
<li class="spec"><a href="#">客户端</a><img src="picture/mark_1.png"></li>
<li><a href="#">开发平台</a></li>
<li><a href="#">VIP</a></li>
</ul>
<div class="head_search">
<input type="text" class="sear_input" placeholder="搜索音乐、MV、歌单、用户">
<button>
<i></i>
</button>
</div>
<div class="head_right">
<a href="#" class="land">登录</a>
<a href="#" class="open_v">开通VIP</a>
<a href="#" class="recharge">充值</a>
</div>
<ul class="subnav">
<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>
<li><a href="#">MV</a></li>
<li><a href="#">数字专辑</a></li>
<li><a href="#">票务</a></li>
</ul>
</div>
</div>
<!--歌单推荐-->
<div class="song-reco">
<div class="reco-con">
<h2 class="tit">歌单推荐</h2>
<ul class="reco-list">
<li class="play_name">
<div class="list_pic">
<div class="ico_play"></div>
<img src="picture/recommend-01.png" alt="无法显示">
</div>
<h4 class="list_tit"><a href="#">祝你生日快乐</a></h4>
</li>
<li class="play_name">
<div class="list_pic">
<div class="ico_play"></div>
<img src="picture/recommend-02.png" alt="无法显示">
</div>
<h4 class="list_tit"><a href="#">学习工作阅读|柔和静心轻音乐</a></h4>
</li>
<li class="play_name">
<div class="list_pic">
<div class="ico_play"></div>
<img src="picture/recommend-03.png" alt="无法显示">
</div>
<h4 class="list_tit"><a href="#">Boom Boom 心动预警来袭</a></h4>
</li>
<li class="play_name">
<div class="list_pic">
<div class="ico_play"></div>
<img src="picture/recommend-04.png" alt="无法显示">
</div>
<h4 class="list_tit"><a href="#">【极丧】细节中崩溃</a></h4>
</li>
<li class="nomargin play_name">
<div class="list_pic">
<div class="ico_play"></div>
<img src="picture/recommend-05.png" alt="无法显示">
</div>
<h4 class="list_tit"><a href="#">治愈钢琴曲静心|仰望晨光熹微</a></h4>
</li>
</ul>
</div>
</div>
<!--新歌首发-->
<div class="new_song">
<div class="song_con">
<h2 class="tit">新歌首发</h2>
<div class="tab">
<a href="#">最新</a>
<a href="#">内地</a>
<a href="#">港台</a>
<a href="#">欧美</a>
<a href="#">韩国</a>
<a href="#">日本</a>
</div>
<ul class="song_list">
<li>
<div class="pic">
<a href="#"><img src="picture/song-01.Png" alt="">
</a>
</div>
<div class="txt">
<h3><a href="#">青春如你《荣耀乒乓》电视剧片尾曲</a></h3>
<p><a href="#">UNINE</a></p>
</div>
<div class="time">03:40</div>
</li>
<li>
<div class="pic">
<a href="#"><img src="picture/song-02.Png" alt=""></a>
</div>
<div class="txt">
<h3><a href="#">吉祥话</a></h3>
<p><a href="#">hanser/泠鸢yousa/祖娅纳</a></p>
</div>
<div class="time">04:28</div>
</li>
<li class="nomargin">
<div class="pic">
<a href="#"><img src="picture/song-03.Png" alt=""></a>
</div>
<div class="txt">
<h3><a href="#">One LastKiss《新世纪福音战士:终》剧场版主题曲</a></h3>
<p><a href="#">宇多田光(宇多田匕力儿)</a></p>
</div>
<div class="time">04:12</div>
</li>
<li>
<div class="pic">
<a href="#"><img src="picture/song-04.Png" alt=""></a>
</div>
<div class="txt">
<h3><a href="#">如梦非梦《如梦令》微剧憾爱版主题曲</a></h3>
<p><a href="#">双笔</a></p>
</div>
<div class="time">03:41</div>
</li>
<li>
<div class="pic">
<a href="#"><img src="picture/song-05.Png" alt=""></a>
</div>
<div class="txt">
<h3><a href="#">笑看江湖《山河令》网剧江湖推广曲</a></h3>
<p><a href="#">满舒克</a></p>
</div>
<div class="time">03:22</div>
</li>
<li class="nomargin">
<div class="pic">
<a href="#"><img src="picture/song-06.Png" alt=""></a>
</div>
<div class="txt">
<h3><a href="#">相信希望(Believe)《复工》纪录片主题曲</a></h3>
<p><a href="#">FIR飞儿乐团</a></p>
</div>
<div class="time">05:14</div>
</li>
<li>
<div class="pic">
<a href="#"><img src="picture/song-07.Png" alt=""></a>
</div>
<div class="txt">
<h3><a href="#">Winner Ready2021PEL开赛曲 韩剧主题曲</a></h3>
<p><a href="#">Ailee</a></p>
</div>
<div class="time">04:18</div>
</li>
<li>
<div class="pic">
<a href="#"><img src="picture/song-08.Png" alt=""></a>
</div>
<div class="txt">
<h3><a href="#">Winner Ready2021PEL开赛曲</a></h3>
<p><a href="#">艾福杰尼</a></p>
</div>
<div class="time">03:32</div>
</li>
<li class="nomargin">
<div class="pic">
<a href="#"><img src="picture/song-09.Png" alt=""></a>
</div>
<div class="txt">
<h3><a href="#">秘境(KickBack)</a></h3>
<p><a href="#">威神V</a></p>
</div>
<div class="time">03:40</div>
</li>
</ul>
</div>
</div>
<!--精彩推荐-->
<div class="brilliant">
<div class="bri_con">
<h2 class="tit">精彩推荐</h2>
<ul class="bri_list">
<li>
<a href="#"><img src="picture/bri-01.png"></a>
</li>
<li class="flo_rig">
<a href="#"><img src="picture/bri-02.png"></a>
</li>
</ul>
</div>
</div>
<!--新碟首发-->
<div class="new_disc">
<div class="disc_con">
<h2 class="tit">新碟首发</h2>
<div class="tab">
<a href="#">内地</a>
<a href="#">港台</a>
<a href="#">欧美</a>
<a href="#">韩国</a>
<a href="#">日本</a>
<a href="#">其他</a>
</div>
<ul class="disc_list">
<li class="playlist_item">
<div class="play_pic ">
<a href="#"><img src="picture/new_disc-01.PNG" alt=""></a>
</div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">甜甜的你</a>
</span>
</h4>
<div class="playlist_author">
<a href="#">蝴蝶效应(B.E.)</a>
</div>
</li>
<li class="playlist_item">
<div class="play_pic">
<a href="#"><img src="picture/new_disc-02.PNG" alt=""></a>
</div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">其实你不懂我的心</a>
</span>
</h4>
<div class="playlist_author">
<a href="#">INTO1-林墨</a>
</div>
</li>
<li class="playlist_item">
<div class="play_pic">
<a href="#"><img src="picture/new_disc-03.PNG" alt=""></a>
</div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">可以</a>
</span>
</h4>
<div class="playlist_author">
<a href="#">贺一航</a>
</div>
</li>
<li class="playlist_item">
<div class="play_pic">
<a href="#"><img src="picture/new_disc-04.PNG" alt=""></a>
</div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">锄禾日当午</a>
</span>
</h4>
<div class="playlist_author">
<a href="#">金志文</a>
</div>
</li>
<li class="playlist_item">
<div class="play_pic">
<a href="#"><img src="picture/new_disc-05.PNG" alt=""></a>
</div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">星月(The MoonStar)(prod.大副)</a>
</span>
</h4>
<div class="playlist_author">
<a href="#">左良甫</a>
</div>
</li>
<li class="playlist_item">
<div class="play_pic">
<a href="#"><img src="picture/new_disc-06.PNG" alt=""></a>
</div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">飞跃</a>
</span>
</h4>
<div class="playlist_author">
<a href="#">凌LING</a>
</div>
</li>
<li class="playlist_item">
<div class="play_pic">
<a href="#"><img src="picture/new_disc-07.PNG" alt=""></a>
</div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">旧时雨</a>
</span>
</h4>
<div class="playlist_author">
<a href="#">烧煤er/梅畅 </a>
</div>
</li>
<li class="playlist_item">
<div class="play_pic">
<a href="#"><img src="picture/new_disc-08.PNG" alt=""></a>
</div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">上瘾</a>
</span>
</h4>
<div class="playlist_author">
<a href="#">陈又又</a>
</div>
</li>
<li class="playlist_item">
<div class="play_pic">
<a href="#"><img src="picture/new_disc-09.PNG" alt=""></a>
</div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">山风</a>
</span>
</h4>
<div class="playlist_author">
<a href="#">秦瑜</a>
</div>
</li>
<li class="playlist_item">
<div class="play_pic">
<a href="#"><img src="picture/new_disc-10.PNG" alt=""></a>
</div>
<div>
<h4 class="playlist_title">
<span class="playlist_title_txt">
<a href="#">一剑江湖</a>
</span>
</h4>
</div>
<div class="playlist_author">
<a href="#">壹声壹社</a>
</div>
</li>
</ul>
</div>
</div>
<!--排行榜-->
<div class="rank">
<div class="rank_con">
<h2 class="tit">排行榜</h2>
<ul class="rank_list">
<li class="list_item">
<h3>热歌</h3>
<i></i>
<ul class="item_del">
<li>
<div class="num">1</div>
<div class="del_txt">
<p><a href="#">清空</a></p>
<p><a href="#">王汐辰/苏星婕</a></p>
</div>
</li>
<li>
<div class="num">2</div>
<div class="del_txt">
<p><a href="#">TA</a></p>
<p><a href="#">不是花火呀</a></p>
</div>
</li>
<li>
<div class="num">3</div>
<div class="del_txt">
<p><a href="#">星辰大海</a></p>
<p><a href="#">黄霄云</a></p>
</div>
</li>
</ul>
</li>
<li class="list_item two">
<h3>新歌</h3>
<i></i>
<ul class="item_del">
<li>
<div class="num">1</div>
<div class="del_txt">
<p><a href="#">气象站台</a></p>
<p><a href="#">Uu</a></p>
</div>
</li>
<li>
<div class="num">2</div>
<div class="del_txt">
<p><a href="#">蓝色灰色</a></p>
<p><a href="#">Zkaaai</a></p>
</div>
</li>
<li>
<div class="num">3</div>
<div class="del_txt">
<p><a href="#">我叫长安你叫故里</a></p>
<p><a href="#">尹昔眠/小田音乐社</a></p>
</div>
</li>
</ul>
</li>
<li class="list_item three">
<h3>流行指数</h3>
<i></i>
<ul class="item_del">
<li>
<div class="num">1</div>
<div class="del_txt">
<p><a href="#">织梦</a></p>
<p><a href="#">Chimney于恩众</a></p>
</div>
</li>
<li>
<div class="num">2</div>
<div class="del_txt">
<p><a href="#">终于等到这一句</a></p>
<p><a href="#">小乐哥</a></p>
</div>
</li>
<li>
<div class="num">3</div>
<div class="del_txt">
<p><a href="#">所有</a></p>
<p><a href="#">杨博然</a></p>
</div>
</li>
</ul>
</li>
<li class="list_item four">
<h3>欧美</h3>
<i></i>
<ul class="item_del">
<li>
<div class="num">1</div>
<div class="del_txt">
<p><a href="#">Love Story(Taylor's Version)</a></p>
<p><a href="#">Taylor Swift</a></p>
</div>
</li>
<li>
<div class="num">2</div>
<div class="del_txt">
<p><a href="#">FakeASmileAlanWalker</a></p>
<p><a href="#">salemilese</a></p>
</div>
</li>
<li>
<div class="num">3</div>
<div class="del_txt">
<p><a href="#">GasolineHAIM</a></p>
<p><a href="#">TaylorSwift</a></p>
</div>
</li>
</ul>
</li>
<li class="list_item five nomargin">
<h3>韩国</h3>
<i></i>
<ul class="item_del">
<li>
<div class="num">1</div>
<div class="del_txt">
<p><a href="#">TAIL</a></p>
<p><a href="#">宣美</a></p>
</div>
</li>
<li>
<div class="num">2</div>
<div class="del_txt">
<p><a href="#">MAGNETIC</a></p>
/* position: relative;*/
/* !*margin-right: 30px;*!*/
/*}*/
.playlist_item .playlist_title{
/*float: left;*/
max-width: 100%;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 22px;
max-height: 44px;
}
.playlist_title h4{
margin-top: 4px;
}
.playlist_title_txt a {
font-size: 14px;
}
.playlist_item .playlist_author{
max-width: 100%;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
max-height: 44px;
}
.playlist_item .playlist_author a {
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 22px;
font-size: 14px;
}
/*排行榜*/
.rank_list {
overflow: hidden;
}
.list_item {
width: 164px;
height: 430px;
margin-right: 20px;
float: left;
/*精灵图,通过background-position调整图片对应位置*/
/*no-repeat属性是不让图片重复*/
background: url(../image/rank.png) no-repeat;
padding: 70px 30px 0px;
}
.two{
background-position: -309px 0px ;
}
.three{
background-position: -618px 0px ;
}
.four{
background-position: -927px 0px ;
}.five{
background-position: -1238px 0px ;
}
.rank_list .nomargin {
margin-right: 0px;
}
.list_item h3{
font-size: 26px;
line-height: 58px;
color: #fff;
font-weight: 400;
text-align: center;
}
.list_item i {
display: block;
width: 36px;
height: 2px;
background-color: #fff;
margin: 32px auto;
}
.item_del li {
font-size: 13px;
color: #fff;
overflow: hidden;
margin-bottom: 20px;
}
.item_del .num {
line-height: 29px;
float: left;
width: 20px;
}
.item_del .del_txt{
float: left;
width: 144px;
}
.del_txt p{
line-height: 29px;
text-overflow: ellipsis;
overflow: hidden; /* 溢出隐藏、清除浮动、解决外边距塌陷等等;这里是溢出隐藏 */
white-space: nowrap
}
.del_txt p a{
color: #fff;
}
.del_txt p a:hover{
color: #fff;
}
/*底部*/
.foot {
background: rgb(58,58,58);
}
.foot a{
color: #999;
display: block;
}
.bt {
font-size: 15px;
font-weight: 500;
line-height: 77px;
margin-bottom: 12px;
}
.down_list {
overflow: hidden;
}
.down_item {
float: left;
}
.down_item i {
display: block;
background: url("../image/foot.png") no-repeat;
margin: 0px 29px;
height: 33px;
}
.item01 {
margin-left: -23px;
}
.item01 i{
width: 33px;
background-position: -1px -1px;
}
.item01 a:hover i{
background-position: -1px -34px;
}
.item02 i{
width: 41px;
background-position: -56px -1px;
}
.item02 a:hover i{
background-position: -56px -34px;
}
.item03 i{
width: 36px;
background-position: -130px -1px;
}
.item03 a:hover i{
background-position: -130px -34px;
}
.item04 i{
width: 36px;
background-position: -190px -1px;
}
.item04 a:hover i{
background-position: -190px -34px;
}
.download{
width: 438px;
}
.pro {
width: 370px;
margin-right: 80px;
}
.down_item span {
display: block;
font-size: 14px;
line-height: 40px;
text-align: center;
}
.con_top{
overflow: hidden;
padding-bottom: 30px;
border-bottom: 1px solid #353535;
}
.download,.pro {
float: left;
}
.pro .item01 {
margin-left: -24px;
}
.pro .item01 i{
width: 38px;
height: 32px;
background-position: -249px -3px;
}
.item01 a:hover i {
background-position: -249px -34px;
}
.pro .item02 i{
width: 38px;
height: 32px;
background-position: -314px -3px;
}
.item02 a:hover i {
background-position: -314px -34px;
}
.pro .item03 i{
width: 38px;
height: 32px;
background-position: -380px -3px;
}
.item03 a:hover i {
background-position: -380px -34px;
}
.pro .item04 i{
width: 38px;
height: 32px;
background-position: -443px -3px;
}
.item04 a:hover i {
background-position: -443px -34px;
}
.item_spec{
margin-right:33px;
}
/*合作链接*/
.link{
width: 303px;
float: left;
}
.link_list li{
font-size: 14px;
margin-bottom: 18px;
line-height: 14px;
min-width: 101px;
float: left;
}
.link_list li a:hover{
color: #31c27c;
}
.platform {
width: 464px;
float: left;
margin-top:52px ;
}
.platform li {
margin-right: 30px;
}
.copyright{
font-size: 12px;
color: #999;
padding-top: 23px;
}
.copyright p {
line-height: 20px;
text-align: center;
}
.copyright p a{
display: inline;
}
.copyright p a:hover{
color: #31c27c;
}
/*头部*/
.head_con {
position: relative;
padding-top: 90px;
}
.logo {
width: 170px;
height:46px;
position: absolute;
left: 0;
top:22px;
}
.logo a{
display: block;
}
.logo img{
width: 170px;
}
.top_list {
font-size: 18px;
overflow: hidden;
position: absolute;
left: 198px;
top:0px;
}
.top_list li {
float: left;
}
.top_list .current{
background: #31c27c;
}
.top_list .current a {
color: #fff;
}
.top_list .current a:hover {
color: #fff;
}
.top_list a{
color: #000;
display: block;
line-height:90px ;
padding: 0px 20px;
}
.top_list a:hover {
color:#31c27c ;
}
.spec {
position: relative;
}
.spec img{
position: absolute;
top:18px;
left: 56px;
width: 38px;
height: 14px;
}
.head_search{
width: 218px;
height: 36px;
border: 1px solid #c9c9c9;
border-radius: 2px;
position: absolute;
left: 720px;
top:26px
}
.sear_input{
padding-left: 11px;
height: 36px;
line-height: 36px;
border: none;
outline: none;
width: 174px;
float: left;
}
.sear_input::placeholder{
color: #757575;
font-size: 10px;
}
button i{
width: 17px;
height: 17px;
display: block;
background: url("../image/mark-2.png") no-repeat;
margin-left: 6px;
}
button {
background: none;
border: none;
width: 33px;
height: 36px;
float: right;
}
button:hover i{
background: url("../image/mark-3.png");
}
.head_right{
height: 40px;
position: absolute;
left: 980px;
top:24px
}
.head_right a{
display: block;
float: left;
}
.land{
font-size: 16px;
color: #000;
line-height: 40px;
}
.open_v {
font-size: 12px;
color: #fff;
width: 102px;
height: 40px;
line-height: 40px;
background: #31c27c;
border-radius: 2px;
text-align: center;
margin: 0px 5px 0px 8px;
position: relative;
}
/*通过伪类,border设置小箭头*/
.open_v::after {
content: "";
width: 0px;
height: 0px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #fff;
position: absolute;
top:16px;
right: 8px;
}
.recharge{
width: 51px;
height: 38px;
border: 1px solid #c9c9c9;
border-radius: 2px;
text-align: center;
color: #000;
font-size: 12px;
line-height: 38px;
position: relative;
}
.recharge::after {
content: "";
width: 0px;
height: 0px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #000;
position: absolute;
top:14px;
right: 2px;
}
.subnav {
overflow: hidden;
border-top: 1px solid #f2f2f2;
padding-left: 230px;
}
/*.subnav {*/
/* overflow: hidden;*/
/*}*/
.subnav li {
line-height: 51px;
height: 51px;
font-size: 14px;
float: left;
}
.subnav a{
color: #000;
display: block;
line-height: 50px;
padding: 0px 20px;
}
.subnav li a:hover {
color: #31c27c;
}
.song-reco, .new_song,.brilliant,.new_disc,.rank,.movie {
background: url("../image/background02.jpg") repeat-x;
}
/*MV*/
.movie_tab{
overflow: hidden;
padding-left: 350px;
margin-bottom: 39px;
position: relative;
}
/*.movie_con{*/
/* position: relative;*/
/*}*/
.movie_tab a{
font-size: 14px;
line-height: 22px;
float: left;
margin-right: 52px;
}
.movie_tab a:hover{
color: #31c27c;
}
.index_more{
position: absolute;
right: 0;
top: auto;
}
/*.index_more i:hover{*/
/* background-position: -120px -60px;*/
/*}*/
.movie_tab .index_more a:hover i{
background-position: -120px -60px;
}
.icon_index_arrow{
display: inline-block;
width: 7px;
height: 12px;
background-position: -120px -40px;
margin-left: 6px;
}
.sprite {
background-image: url(../image/icon_sprite.630b3e60.png);
}
.check:hover i{
background-position: -120px -60px;
}
.movie_list{
overflow: hidden;
}
.movie_list li{
width: 224px;
height: 210px;
margin-bottom: 20px;
float: left;
margin-right: 20px;
}
.movie_list li img{
width: 224px;
height: 127px;
}
.movie_list .nomargin{
margin-right: 0px;
}
.movie_list_title {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.movie_list_singer{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 24px;
font-weight: 400;
font-size: 14px;
color: #9b9b9b;
}
.movie_list_listen_icon{
display: inline-block;
width: 19px;
height: 12px;
background-position: -180px -20px;
vertical-align: -1px;
}
.movie_list_info span{
margin:0px 10px 0px 0px;
}
.movie_list_listen_icon sprite{
background-image: url(../image/icon_sprite.630b3e60.png);
}
.movie_list_info i{
font-size: 14px;
color: #9b9b9b;
}
.movie_list_title:hover{
color: #31c27c;
}
.movie_list_singer:hover{
color: #31c27c;
}
六、🥇 如何让学习不再盲目
21年程序员总结给编程菜鸟的16条忠告
- 入门期间不要盲目看太多书,找一本网上或身边有经验程序员推荐的教材,先系统的学习。
- 多看帮助文档,帮助文档就像一个游戏的玩法说明通关秘籍,该看就看别太自信。
- 菜鸟容易被对象、属性、方法等词汇迷惑?那是你连最基础知识都还没掌握。
- 不要忽视没一个看起来不起眼的问题,经常总结做到举一反三。
- 没积累足够知识和经验前,你是开发不出一个完整项目的。
- 把最新技术挂在嘴边,还不如把过时技术牢记心中。
- 活到老学到老,只有一招半式是闯不了江湖的。
- 看得懂的书,仔细看;看不懂的书,硬着头皮也要看完。
- 书读百遍其义自见,别指望读一遍就能掌握。
- 请把教程里的例子亲手实践下,即使案例中有完整源码。
- 把在教程中看到的有意义的例子扩充;并将其切实的运用到自己的工作中。
- 不要漏掉教程中任何一个习题——请全部做完并做好笔记。
- 水平是在不断的实践中完善和发展的,你与大牛差的只是经验的积累。
- 每学到一个难点的时候,尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
- 做好保存源文件的习惯,这些都是你的知识积累。
- 遇到问题不要张口就问,要学会自己找答案,比如google、百度和w3cschool上都有很多编程相关资料,你只要输入关键字就能找到你的答案。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.