温州网站建设方案报价,wordpress 年份索引,建交互网站需要多少钱,软件开发工程师机构web前端项目-豆瓣电影【附源码】
本项目设计和制作一个电影咨询和电影评分网站——仿豆瓣电影网#xff0c;通过该网站的设计和制作过程#xff0c;可以帮助网站开发人员和熟悉网站前台页面的制作流程#xff0c;并在开发过程中熟练应用HTML#xff1b;CSS#xff1b;Jav…web前端项目-豆瓣电影【附源码】
本项目设计和制作一个电影咨询和电影评分网站——仿豆瓣电影网通过该网站的设计和制作过程可以帮助网站开发人员和熟悉网站前台页面的制作流程并在开发过程中熟练应用HTMLCSSJavaScript 和 jQuery 技术 运行效果 HTML源码
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml xml:langen
head
meta http-equivContent-Type contenttext/html;charsetUTF-8
titleDocument/title
link relstylesheet hrefcss/index.css /
script typetext/javascript srcjs/jquery-3.3.1.min.js/script
script typetext/javascript
$(document).ready(function() {var screenAmount $(.container ul li).length / 5;//计算屏幕数量$(.container ul li:lt(5)).clone().appendTo(.container ul);//复制前5个元素var nowScreen 0; //屏幕号$(.rightBtn).click(function(){if(nowScreen screenAmount - 1){nowScreen ;//屏幕号加1$(.container).animate({left : -775 * nowScreen} , 800);//定义动画}else{nowScreen 0;$(.container).animate({left : -775 * screenAmount} , 800 , function(){$(this).css(left,0);//元素回到初始位置});}$(.hd .right span).html(nowScreen 1 / screenAmount);//显示屏幕号});$(.leftBtn).click(function(){if(nowScreen 0){nowScreen -- ;//屏幕号减1$(.container).animate({left : -775 * nowScreen} , 800);//定义动画}else{nowScreen screenAmount - 1;$(.container).css(left , -775 * screenAmount).animate({left : -775 * (screenAmount - 1)},800);//移动到复制的5个元素并执行动画}$(.hd .right span).html(nowScreen 1 / screenAmount);//显示屏幕号});//每隔5秒钟自动触发元素的click事件var timer setInterval(function(){$(.rightBtn).trigger(click)}, 5000);//鼠标进入元素停止移动$(.is-on).mouseenter(function() {clearInterval(timer);});//鼠标离开元素恢复移动$(.is-on).mouseleave(function() {timer setInterval(function(){$(.rightBtn).trigger(click)}, 5000);});
});
$(document).ready(function() {var len $(.banner).find(a);//获取广告图片var pos 0;//定义变量值为0setInterval(function(){len.eq(pos).hide();//隐藏元素pos;//变量值加1if(pos len.length) pos0;//变量值重新定义为0len.eq(pos).show();//显示元素},3000);//每隔3秒钟切换元素
});
$(document).ready(function() { $(.hot-film-main div).hide(); //隐藏热门电影和最新电影$(.hot-film ul li a:first).addClass(active); //为第一个标签添加样式$(.hot-film-list).show(); //显示热门电影$(.hot-film ul li a).click(function() { //鼠标单击某标签//为当前的标签添加样式并移除另一标签样式$(this).addClass(active).parent().siblings().find(a).removeClass(active); var index $(this).parent().index();//获取当前标签索引$(.hot-film-main div).eq(index).show().siblings().hide();//控制热门电影和最新电影的显示或隐藏});
});
/script
/head
body
div idnavdiv classnav-logoa hrefindex.html仿豆瓣电影/a/divdiv classnav-itemsullia hrefjavascript:;影讯 购票/a/lilia hrefjavascript:;选电影/a/lilia hrefjavascript:;电视剧/a/lilia hrefjavascript:;排行榜/a/lilia hrefjavascript:;分类/a/lilia hrefjavascript:;影评/a/lilia hrefjavascript:;2018年度榜单/a/li/ul/div
/div
div idmaindiv idleftdiv classis-ondiv classhdh2正在热映/h2div classrightspan1/3/spana classleftBtn hrefjavascript:;/aa classrightBtn hrefjavascript:;/a/div/divdiv classbddiv classcontainerullia hrefdetail/mnyys.htmlimg srcimages/1.jpg alt //apa hrefdetail/mnyys.html美女与野兽/a/pdiv classratingspan classstarratingspan classstar40/span/spanspan classscore7.2/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/thwj.htmlimg srcimages/2.jpg alt //apa hrefdetail/thwj.html头号玩家/a/pdiv classratingspan classstarratingspan classstar45/span/spanspan classscore8.7/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/fwhyj.htmlimg srcimages/3.jpg alt //apa hrefdetail/fwhyj.html飞屋环游记/a/pdiv classratingspan classstarratingspan classstar45/span/spanspan classscore8.9/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/mtyj.htmlimg srcimages/4.jpg alt //apa hrefdetail/mtyj.html摩天营救/a/pdiv classratingspan classstarratingspan classstar35/span/spanspan classscore6.4/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/yhhwd.htmlimg srcimages/5.jpg alt //apa hrefdetail/yhhwd.html银河护卫队/a/pdiv classratingspan classstarratingspan classstar40/span/spanspan classscore8.0/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/crzdy2.htmlimg srcimages/6.jpg alt //apa hrefdetail/crzdy2.html超人总动员2/a/pdiv classratingspan classstarratingspan classstar40/span/spanspan classscore8.1/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/jqrzdy.htmlimg srcimages/7.jpg alt //apa hrefdetail/jqrzdy.html机器人总动员/a/pdiv classratingspan classstarratingspan classstar45/span/spanspan classscore9.3/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/jtmdt.htmlimg srcimages/8.jpg alt //apa hrefdetail/jtmdt.html惊天魔盗团/a/pdiv classratingspan classstarratingspan classstar40/span/spanspan classscore7.5/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/cmdsj.htmlimg srcimages/9.jpg alt //apa hrefdetail/cmdsj.html楚门的世界/a/pdiv classratingspan classstarratingspan classstar45/span/spanspan classscore9.2/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/dmkj.htmlimg srcimages/10.jpg alt //apa hrefdetail/dmkj.html盗梦空间/a/pdiv classratingspan classstarratingspan classstar45/span/spanspan classscore9.3/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/fkdwc.htmlimg srcimages/11.jpg alt //apa hrefdetail/fkdwc.html疯狂动物城/a/pdiv classratingspan classstarratingspan classstar45/span/spanspan classscore9.1/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/fczlm.htmlimg srcimages/12.jpg alt //apa hrefdetail/fczlm.html复仇者联盟/a/pdiv classratingspan classstarratingspan classstar40/span/spanspan classscore8.1/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/hxjy.htmlimg srcimages/13.jpg alt //apa hrefdetail/hxjy.html火星救援/a/pdiv classratingspan classstarratingspan classstar45/span/spanspan classscore8.4/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/jcs.htmlimg srcimages/14.jpg alt //apa hrefdetail/jcs.html巨齿鲨/a/pdiv classratingspan classstarratingspan classstar30/span/spanspan classscore5.9/span/diva hrefjavascript:; classgoupiao选座购票/a/lilia hrefdetail/tqyj.htmlimg srcimages/15.jpg alt //apa hrefdetail/tqyj.html通勤营救/a/pdiv classratingspan classstarratingspan classstar35/span/spanspan classscore6.6/span/diva hrefjavascript:; classgoupiao选座购票/a/li/ul/div/div/divdiv classbannera hrefjavascript:;img srcimages/banner1.jpg //aa hrefjavascript:;img srcimages/banner2.jpg //a/divdiv classhot-filmdiv classhot-film-toph2最近热门的电影/h2ullia热门/a/lilia最新/a/li/ul/divdiv classhot-film-maindiv classhot-film-listullia hrefdetail/thwj.htmlimg srcimages/2.jpg alt //apa hrefdetail/thwj.html头号玩家/aspan classscore8.7/span/p/lilia hrefdetail/fwhyj.htmlimg srcimages/3.jpg alt //apa hrefdetail/fwhyj.html飞屋环游记/aspan classscore8.9/span/p/lilia hrefdetail/yhhwd.htmlimg srcimages/5.jpg alt //apa hrefdetail/yhhwd.html银河护卫队/aspan classscore8.0/span/p/lilia hrefdetail/crzdy2.htmlimg srcimages/6.jpg alt //apa hrefdetail/crzdy2.html超人总动员2/aspan classscore8.1/span/p/lilia hrefdetail/jtmdt.htmlimg srcimages/8.jpg alt //apa hrefdetail/jtmdt.html惊天魔盗团/aspan classscore7.5/span/p/li/ul/divdiv classnew-film-listullia hrefdetail/cmdsj.htmlimg srcimages/9.jpg alt //apa hrefdetail/cmdsj.html楚门的世界/aspan classscore9.2/span/p/lilia hrefdetail/dmkj.htmlimg srcimages/10.jpg alt //apa hrefdetail/dmkj.html盗梦空间/aspan classscore9.3/span/p/lilia hrefdetail/fkdwc.htmlimg srcimages/11.jpg alt //apa hrefdetail/fkdwc.html疯狂动物城/aspan classscore9.1/span/p/lilia hrefdetail/fczlm.htmlimg srcimages/12.jpg alt //apa hrefdetail/fczlm.html复仇者联盟/aspan classscore8.1/span/p/lilia hrefdetail/hxjy.htmlimg srcimages/13.jpg alt //apa hrefdetail/hxjy.html火星救援/aspan classscore8.4/span/p/li/ul/div/div/div/divdiv idasidediv classbillboarddiv classbillboard-titleh2一周口碑榜/h2/divdiv classbillboard-contentullispan classorder1/spanspan classtitlea hrefdetail/fczlm.html复仇者联盟/a/span/lilispan classorder2/spanspan classtitlea hrefdetail/thwj.html头号玩家/a/span/lilispan classorder3/spanspan classtitlea hrefdetail/mnyys.html美女与野兽/a/span/lilispan classorder4/spanspan classtitlea hrefdetail/yhhwd.html银河护卫队/a/span/lilispan classorder5/spanspan classtitlea hrefdetail/dmkj.html盗梦空间/a/span/lilispan classorder6/spanspan classtitlea hrefdetail/fwhyj.html飞屋环游记/a/span/lilispan classorder7/spanspan classtitlea hrefdetail/hxjy.html火星救援/a/span/lilispan classorder8/spanspan classtitlea hrefdetail/jqrzdy.html机器人总动员/a/span/lilispan classorder9/spanspan classtitlea hrefdetail/cmdsj.html楚门的世界/a/span/lilispan classorder10/spanspan classtitlea hrefdetail/fkdwc.html疯狂动物城/a/span/li/ul/div/divdiv classcontactdiv classcontact-titleh2合作联系/h2/divdiv classcontact-contentulli蓝网团队温轻舟/li/ul/div/div/div
/div
div styleclear:both/div
div idbottomspan classcopyright2023.12.28/spanspan classaboutulli蓝网团队/lili联系我们/lili帮助中心/lili安全中心/lili合作共赢/li/ul/span
/div
/body
/htmljs文件
1score.js
function getEvaluationWord(name,index){switch(index){case 1:$(name).find(.evaluation-word).text(很差);//定义一星评价词break;case 2:$(name).find(.evaluation-word).text(较差);//定义二星评价词break;case 3:$(name).find(.evaluation-word).text(还行);//定义三星评价词break;case 4:$(name).find(.evaluation-word).text(推荐);//定义四星评价词break;case 5:$(name).find(.evaluation-word).text(力荐);//定义五星评价词break;default:$(name).find(.evaluation-word).text();//评价词设置为空break;}
}
function setLayerCenter(){var top ($(window).height()-$(.layer-bg).height())/2;//设置元素距浏览器顶部距离var left ($(window).width()-$(.layer-bg).width())/2;//设置元素距浏览器左侧距离var scrolltop $(window).scrollTop();//获取垂直滚动条位置var scrollleft $(window).scrollLeft();//获取水平滚动条位置//设置弹出层位置$(#show-layer).css({top:topscrolltop,left:leftscrollleft}).show();
}
$(document).ready(function(){var flag 1,tips ;$(#first .wantto).click(function(){flag 1;setLayerCenter();//设置弹出层居中$(window).on(scroll resize,function(){setLayerCenter();});//添加事件处理程序$(#seen).hide();//隐藏元素$(#show-layer .title).html(添加收藏:我想看这部电影);//设置弹出层标题$(#wantto).show();//显示元素$(input[namemovietip]).val();//设置电影标签为空$(.tip li).removeClass(active);//移除标签样式});$(#show-layer .x).click(function(){$(#show-layer).hide();//隐藏弹出层$(window).off();//移除事件处理程序});$(.tip li).click(function(){if(!$(this).hasClass(active)){//如果当前标签不具有该样式$(this).addClass(active);//为当前标签添加样式tips $(input[namemovietip]).val();//获取文本框中的电影标签tips $(this).text() ;//当前标签后添加空格$(input[namemovietip]).focus();//文本框获得焦点$(input[namemovietip]).val(tips);//显示电影标签}else{$(this).removeClass(active);//移除当前标签样式var t $(this).text() ;//当前标签后添加空格tips $(input[namemovietip]).val().replace(t,);//删除选择的标签$(input[namemovietip]).val(tips);//显示电影标签$(input[namemovietip]).focus();//文本框获得焦点}});$(.layer-bottom input).click(function(){if(flag 1){$(#show-layer).hide();//隐藏弹出层$(window).off();//移除事件处理程序$(#first).hide();//隐藏元素$(#second).show();//显示元素if(tips ! )$(.show-tips).text(标签:tips);//设置文本内容}else{$(#show-layer).hide();//隐藏弹出层$(window).off();//移除事件处理程序$(#first).hide();//隐藏元素$(#third).show();//显示元素$(.show-evaluation).show();//显示评价词//所有星星变暗$(.show-evaluation .star span).find(.bright).css(z-index,0);//根据星级数目使星星变亮$(.show-evaluation .star span:lt(star_level)).find(.bright).css(z-index,1);getEvaluationWord(.show-evaluation,star_level);//输出评价词$(.show-evaluation .star span).mouseover(function(){$(this).prevAll().find(.bright).css(z-index,1);//前面的星星变亮$(this).find(.bright).css(z-index,1);//当前星星变亮$(this).nextAll().find(.bright).css(z-index,0);//后面的星星变暗var index $(this).index()1;//当前索引加1getEvaluationWord(.show-evaluation,index);//输出评价词});$(.show-evaluation .star).mouseout(function(){$(this).find(.bright).css(z-index,0);//所有星星变暗$(this).next().text();//评价词设置为空//根据星级数目使星星变亮$(.show-evaluation .star span:lt(star_level)).find(.bright).css(z-index,1);getEvaluationWord(.show-evaluation,star_level);//输出评价词});$(.show-evaluation .star span).click(function(){star_level $(this).index()1;//获取评价的星级});}var nowdate new Date();//定义日期对象var year nowdate.getFullYear();//获取当前年份var month nowdate.getMonth()1;//获取当前月份var date nowdate.getDate();//获取当前日期$(.now-time).html(year-month-date);//输出年月日});var star_level 0;//定义表示星级的变量$(#first .star span).mouseover(function(){$(this).prevAll().find(.bright).css(z-index,1);//前面的星星变亮$(this).find(.bright).css(z-index,1);//当前星星变亮$(this).nextAll().find(.bright).css(z-index,0);//后面的星星变暗var index $(this).index()1;//当前索引加1getEvaluationWord(#first,index);//输出评价词});$(#first .star).mouseout(function(){$(this).find(.bright).css(z-index,0);//所有星星变暗$(this).next().text();//评价词设置为空});$(#first .star span).click(function(){flag 2;setLayerCenter();//设置弹出层居中$(window).on(scroll resize,function(){setLayerCenter();});//添加事件处理程序$(#wantto).hide();//隐藏元素$(#seen).show();//显示元素$(#show-layer .title).html(添加收藏:我看过这部电影);//设置弹出层标题$(#seen .star span).find(.bright).css(z-index,0);//所有星星变暗star_level $(this).index()1;//获取评价的星级//根据星级数目使星星变亮$(#seen .star span:lt(star_level)).find(.bright).css(z-index,1);getEvaluationWord(#seen,star_level);//输出评价词});$(#first .seen).click(function(){flag 2;setLayerCenter();//设置弹出层居中$(window).on(scroll resize,function(){setLayerCenter();});//添加事件处理程序$(#wantto).hide();//隐藏元素$(#show-layer .title).html(添加收藏:我看过这部电影);//设置弹出层标题$(#seen).show();//显示元素star_level 0;//重置变量$(#seen .star span).find(.bright).css(z-index,0);//所有星星变暗$(#seen .evaluation-word).text();//评价词设置为空});$(#seen .star span).mouseover(function(){$(this).prevAll().find(.bright).css(z-index,1);//前面的星星变亮$(this).find(.bright).css(z-index,1);//当前星星变亮$(this).nextAll().find(.bright).css(z-index,0);//后面的星星变暗var index $(this).index()1;//当前索引加1getEvaluationWord(#seen,index);//输出评价词});$(#seen .star).mouseout(function(){$(this).find(.bright).css(z-index,0);//所有星星变暗$(this).next().text();//评价词设置为空//根据星级数目使星星变亮$(#seen .star span:lt(star_level)).find(.bright).css(z-index,1);getEvaluationWord(#seen,star_level);//输出评价词});$(#seen .star span).click(function(){star_level $(this).index()1;//获取评价的星级});$(#second .del,#third .del).click(function(){if(window.confirm(真的要删除这个收藏)){tips ;//变量设置为空$(.show-tips).text();//电影标签设置为空$(#first).show();//显示元素$(#second).hide();//隐藏元素$(#third).hide();//隐藏元素}});
});CSS源码
1index.css
*{margin: 0;padding: 0;}a {text-decoration: none;}.is-on{width: 760px; }.is-on .hd h2{float: left;width: 100px;height:40px;}.is-on .hd .right{float: right;width: 100px;margin-top: 5px;}.is-on .hd .right span{float: left;margin-right: 10px;font-family:微软雅黑}.is-on .hd .right a{float: left;width: 18px;height: 18px;background: url(../images/slide_swithc_2.png) no-repeat;margin-right: 10px;margin-top:2px}.is-on .hd .right a.rightBtn{background-position: -18px 0;}.is-on .bd{clear: both;border-top: 1px solid #ccc;position: relative;overflow: hidden;width: 100%;height: 330px;margin-top:30px;}.is-on .bd .container{position: absolute;top: 0;left: 0;padding-top: 20px;}.is-on .bd .container ul{width: 4000px;}.is-on .bd .container ul li{float: left;}.is-on .bd .container ul li{margin-right: 15px;}.is-on .bd .container ul li p{text-align: center;line-height: 20px;padding-top: 20px;font-family: 微软雅黑, 宋体;color:#000000;}.is-on .bd .container ul li p a{color:#000000;}.rating{ width:100px;height:20px;margin:8px auto;text-align:center}.is-on .bd .container ul li span{float: left;}.starrating{display:block;width:75px;height:20px;background: url(../images/starrating.gif) top left repeat-x;}.star40{display:block;background:url(../images/starrating.gif) 0px -26px repeat-x;width:60px;height:20px;}.star45{display:block;background:url(../images/starrating.gif) 0px -26px repeat-x;width:67px;height:20px;}.star35{display:block;background:url(../images/starrating.gif) 0px -26px repeat-x;width:52px;height:20px;}.star30{display:block;background:url(../images/starrating.gif) 0px -26px repeat-x;width:45px;height:20px;}.is-on .bd .container ul li .score{ margin-left:5px;color:green;font-family:Arial;font-weight:bold;font-size:14px;}.is-on .bd .container ul li .goupiao{ clear:both;display: block;width: 120px;height: 30px;line-height: 30px;text-align: center;background-color:#6699FF;color:white;border-radius: 4px;margin: 0 auto;}
ul{
list-style: none;
}
#nav{
width:100%;
height:120px;
background:#DBD8FE}
.nav-logo{
width:1200px;
height:80px;
line-height:80px;
margin:0 auto;
}
.nav-logo a{
font-size:36px;
color:#3399FF;
font-weight:bold;
font-family:微软雅黑}
.nav-items{
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
margin:0 auto;
}.nav-items ul li{
float:left;
margin-right:40px;
font-family:微软雅黑}
.nav-items ul li a{color:#0080FF;}#main{
width:1200px;
margin:40px auto;}
#left{
float:left;}
.banner{
margin-top:50px;}
.bannera:not(:first-child){
display:none;}.hot-film{
margin-top:10px;}
.hot-film-top{
height:40px;
line-height:40px;}
.hot-film-top h2{
float:left;}
.hot-film-top ul li{
float:left;
margin-left:20px;
}
.hot-film-top ul li a{cursor:pointer;font-family:微软雅黑;
color:#999999;
height:20px;
line-height:20px;}
.hot-film-top ul li a.active{
color:#000000;}
.hot-film-top ul li a:not(.active):hover{
background:#6699FF;
color:#FFFFFF;
}
.hot-film-main{
clear:both;
width:760px;
border-top:1px solid #CCCCCC;
}
.hot-film-list,.new-film-list{padding-top: 20px;
}
.hot-film-list ul li:not(:last-child),.new-film-list ul li:not(:last-child){float: left;margin-right: 15px;
}
.hot-film-list ul li p,.new-film-list ul li p{text-align: center;line-height: 20px;padding-top: 20px;font-family: 微软雅黑, 宋体;
}
.hot-film-list ul li p a,.new-film-list ul li p a{color:#000000;
}
.hot-film-list ul li p span,.new-film-list ul li p span{ margin-left:5px;color:green;font-family:Arial;font-weight:bold;font-size:14px;}#aside{
float:right;
width:360px;
margin-left:80px;}
#aside .billboard .billboard-title{
height:50px;
line-height:50px;
border-bottom:1px solid #CCCCCC;}
#aside .billboard .billboard-content{
margin-top:3px;}
#aside .billboard .billboard-content ul li{
height:40px;
line-height:40px;
border-bottom:1px solid #CCCCCC;
font-family:微软雅黑;
padding-left:10px;
}
#aside .billboard .billboard-content ul li .order{
font-size:10px;
margin-right:10px;}
#aside .billboard .billboard-content ul li .title a{
color:#0080FF}
#aside .contact{
margin-top:50px;}
#aside .contact .contact-title{
height:50px;
line-height:50px;
border-bottom:1px solid #CCCCCC;}
#aside .contact .contact-content{
margin-top:20px;}
#aside .contact .contact-content ul li{
height:30px;
line-height:30px;
font-family:微软雅黑;}
#bottom{
margin:30px auto 0px auto;
width:1200px;
height:40px;
line-height:40px;
border-top:1px solid #CCCCCC;
}
#bottom .copyright{
float:left;
color:#999999;
font-family:微软雅黑;
font-size:14px;}
#bottom .about{
float:right;
}
#bottom .about ul li{
float:left;
margin-left:20px;
font-size:14px;
color:#0080FF;
font-family:微软雅黑;
}detail文件
1crzdy2.html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title超人总动员2/title
link relstylesheet href../css/score.css /
script typetext/javascript src../js/jquery-3.3.1.min.js/script
script typetext/javascript src../js/score.js/script
/headbody
div idnavdiv classnav-logoa href../index.html豆瓣电影/a/divdiv classnav-itemsullia hrefjavascript:;影讯 购票/a/lilia hrefjavascript:;选电影/a/lilia hrefjavascript:;电视剧/a/lilia hrefjavascript:;排行榜/a/lilia hrefjavascript:;分类/a/lilia hrefjavascript:;影评/a/lilia hrefjavascript:;2018年度榜单/a/li/ul/div
/div
div idmaindiv idlefth1span classmovie-name超人总动员2 Incredibles 2/spanspan classyear(2018)/span/h1div classsubjectdiv classmainpicimg src../images/6.jpg //divdiv classinfospan classitem导演/span: 布拉德·伯德br/span classitem编剧/span: 布拉德·伯德br/span classactorspan classitem主演/span: 格雷格·T·尼尔森 / 霍利·亨特 / 莎拉·沃威尔 / 赫克·米尔纳 / 伊莱·富西尔 / 凯瑟琳·基纳/spanbr/span classitem类型:/span 动作 / 喜剧 / 动画 / 冒险br/span classitem制片国家/地区:/span 美国br/span classitem语言:/span 英语br/span classitem上映日期:/span 2018-06-22(中国大陆) / 2018-06-15(美国)br/span classitem片长:/span 118分钟 / 126分钟(中国大陆)br/span classitem又名:/span 超人特攻队2(台) / 超人特工队2(港) / 超人家族2br/span classitemIMDb链接:/span tt3606756br/divdiv classratingdiv classrating-logo豆瓣评分/divdiv classrating-levelspan classrating-score8.1/spandiv classrating-rightdivspan classstarratingspan classstar40/span/span/divdiv classrating-sum89669人评价/div/div/divdiv classstar-countdiv classstar-itemspan classstars title力荐5星/spanspan classbar stylewidth:37px/spanspan classstar-per28.4%/span/divdiv classstar-itemspan classstars title推荐4星/spanspan classbar stylewidth:64px/spanspan classstar-per47.8%/span/divdiv classstar-itemspan classstars title还行3星/spanspan classbar stylewidth:29px/spanspan classstar-per22.1%/span/divdiv classstar-itemspan classstars title较差2星/spanspan classbar stylewidth:2px/spanspan classstar-per1.5%/span/divdiv classstar-itemspan classstars title很差1星/spanspan classbar stylewidth:0px/spanspan classstar-per0.2%/span/div/divdiv classcompare好于 74% 动画片br /好于 89% 喜剧片/div/div/divdiv classevaluationdiv idfirsta classwantto想看/aa classseen看过/adiv评价:nbsp;span classstarspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/span/spanspan classevaluation-word/span/div/divdiv idsecond styledisplay:none我想看这部电影span classnow-time/spana classdel删除/abr /span classshow-tips/span/divdiv idthird styledisplay:none我看过这部电影span classnow-time/spana classdel删除/adiv classshow-evaluation styledisplay:none我的评价:nbsp;span classstarspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/span/spanspan classevaluation-word/span/div/div/divdiv classintrospan classtitle超人总动员2的剧情简介 · · · · · ·/spandiv classcontent超人家族时隔14年强势回归这次站在聚光灯下的是弹力女超人海伦霍利·亨特 配音超能先生巴鲍勃格雷格·T·尼尔森 配音则在家照料巴小倩和巴小飞过起了“正常人”的居家生活。这一角色转换对于每个家庭成员来说都是艰难的更何况他们都还没意识到宝宝巴小杰的超能力已经悄然增长。当剧中新反派开始酝酿一个狡诈危险的阴谋超人家族必须联合酷冰侠塞缪尔·杰克逊 配音的力量团结对外——然而即使各自都有超能力真正做起来却是知易行难。/div/divdiv classalso-likespan classtitle喜欢这部电影的人也喜欢 · · · · · ·/spandiv classlike-film-listullia hreffwhyj.htmlimg src../images/3.jpg alt //apa hreffwhyj.html飞屋环游记/a/p/lilia hrefyhhwd.htmlimg src../images/5.jpg alt //apa hrefyhhwd.html银河护卫队/a/p/lilia hrefjqrzdy.htmlimg src../images/7.jpg alt //apa hrefjqrzdy.html机器人总动员/a/p/lilia hreffkdwc.htmlimg src../images/11.jpg alt //apa hreffkdwc.html疯狂动物城/a/p/lilia hreffczlm.htmlimg src../images/12.jpg alt //apa hreffczlm.html复仇者联盟/a/p/li/ul/div/div/divdiv idasidediv classcommon-labelspan classtitle豆瓣成员常用的标签 · · · · · ·/spandiv classlabel-listulli动画/lili皮克斯/lili美国/lili喜剧/lili超级英雄/lili2018/lili超人/lili家庭/li/ul/div/divdiv classrecommendspan classtitle以下豆列推荐 · · · · · ·/spandiv classrecommend-listullia hrefjavascript:;{北美电影票房总排行}/aspan(荔枝超人)/span/lilia hrefjavascript:;豆瓣电影【口碑榜】2018-02-24更新/aspan(影志)/span/lilia hrefjavascript:;2018—2025值得关注的美国影片/aspan(closer)/span/lilia hrefjavascript:;想看的电影太多怕忘了/aspan(J.D.)/span/lilia hrefjavascript:;迪士尼长篇动画作品列表/aspan(沙加1110)/span/li/ul/div/divdiv classwhospan classtitle谁在看这部电影 · · · · · ·/spandiv classnumbera hrefjavascript:;113518人看过/anbsp;/nbsp;a hrefjavascript:;50807人想看/a/div/div/div
/div
div styleclear:both/div
div idbottomspan classcopyright2023.12.28/spanspan classaboutulli关于蓝网/lili联系我们/lili帮助中心/lili安全中心/lili合作共赢/li/ul/span
/div
div idshow-layer styledisplay:nonediv classlayer-bg/divdiv classlayer-bodydiv classlayer-topspan classtitle添加收藏:我想看这部电影/spanspan classxx/span/divdiv classlayer-middlediv idwanttospan标签(多个标签用空格分隔):/spaninput typetext namemovietip /div classtipspan常用标签:/spanulli喜剧/lili超人/lili2018/lili动画/lili搞笑/lili皮克斯/lili美国/lili家庭/li/ul/div/divdiv idseenspan给个评价吧(可选):nbsp;/spanspan classstarspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/spanspani classbright/ii classdark/i/span/spanspan classevaluation-word/span/div/divdiv classlayer-bottominput typebutton value保存 //div/div
/div
/body
/html注意
1.所有的电脑详情页面都照着detail文件的例子这么写就好
2.本项目仅包含前端页面
另外由于博客字数限制本篇文章所展示的代码并不全面仅可供参考之用
本项目的完整代码及其素材已上传至资源大家自行去下载就好
