怎样查看别人网站流量网站优化seo推广服务
web前端项目-豆瓣电影【附源码】
本项目设计和制作一个电影咨询和电影评分网站——仿豆瓣电影网，通过该网站的设计和制作过程，可以帮助网站开发人员和熟悉网站前台页面的制作流程，并在开发过程中熟练应用HTML；CSS；JavaScript 和 jQuery 技术
运行效果：
HTML源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/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) pos=0;//变量值重新定义为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 id="nav"><div class="nav-logo"><a href="index.html">仿豆瓣电影</a></div><div class="nav-items"><ul><li><a href="javascript:;">影讯 & 购票</a></li><li><a href="javascript:;">选电影</a></li><li><a href="javascript:;">电视剧</a></li><li><a href="javascript:;">排行榜</a></li><li><a href="javascript:;">分类</a></li><li><a href="javascript:;">影评</a></li><li><a href="javascript:;">2018年度榜单</a></li></ul></div>
</div>
<div id="main"><div id="left"><div class="is-on"><div class="hd"><h2>正在热映</h2><div class="right"><span>1/3</span><a class="leftBtn" href="javascript:;"></a><a class="rightBtn" href="javascript:;"></a></div></div><div class="bd"><div class="container"><ul><li><a href="detail/mnyys.html"><img src="images/1.jpg" alt="" /></a><p><a href="detail/mnyys.html">美女与野兽</a></p><div class="rating"><span class="starrating"><span class="star40"></span></span><span class="score">7.2</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/thwj.html"><img src="images/2.jpg" alt="" /></a><p><a href="detail/thwj.html">头号玩家</a></p><div class="rating"><span class="starrating"><span class="star45"></span></span><span class="score">8.7</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/fwhyj.html"><img src="images/3.jpg" alt="" /></a><p><a href="detail/fwhyj.html">飞屋环游记</a></p><div class="rating"><span class="starrating"><span class="star45"></span></span><span class="score">8.9</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/mtyj.html"><img src="images/4.jpg" alt="" /></a><p><a href="detail/mtyj.html">摩天营救</a></p><div class="rating"><span class="starrating"><span class="star35"></span></span><span class="score">6.4</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/yhhwd.html"><img src="images/5.jpg" alt="" /></a><p><a href="detail/yhhwd.html">银河护卫队</a></p><div class="rating"><span class="starrating"><span class="star40"></span></span><span class="score">8.0</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/crzdy2.html"><img src="images/6.jpg" alt="" /></a><p><a href="detail/crzdy2.html">超人总动员2</a></p><div class="rating"><span class="starrating"><span class="star40"></span></span><span class="score">8.1</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/jqrzdy.html"><img src="images/7.jpg" alt="" /></a><p><a href="detail/jqrzdy.html">机器人总动员</a></p><div class="rating"><span class="starrating"><span class="star45"></span></span><span class="score">9.3</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/jtmdt.html"><img src="images/8.jpg" alt="" /></a><p><a href="detail/jtmdt.html">惊天魔盗团</a></p><div class="rating"><span class="starrating"><span class="star40"></span></span><span class="score">7.5</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/cmdsj.html"><img src="images/9.jpg" alt="" /></a><p><a href="detail/cmdsj.html">楚门的世界</a></p><div class="rating"><span class="starrating"><span class="star45"></span></span><span class="score">9.2</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/dmkj.html"><img src="images/10.jpg" alt="" /></a><p><a href="detail/dmkj.html">盗梦空间</a></p><div class="rating"><span class="starrating"><span class="star45"></span></span><span class="score">9.3</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/fkdwc.html"><img src="images/11.jpg" alt="" /></a><p><a href="detail/fkdwc.html">疯狂动物城</a></p><div class="rating"><span class="starrating"><span class="star45"></span></span><span class="score">9.1</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/fczlm.html"><img src="images/12.jpg" alt="" /></a><p><a href="detail/fczlm.html">复仇者联盟</a></p><div class="rating"><span class="starrating"><span class="star40"></span></span><span class="score">8.1</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/hxjy.html"><img src="images/13.jpg" alt="" /></a><p><a href="detail/hxjy.html">火星救援</a></p><div class="rating"><span class="starrating"><span class="star45"></span></span><span class="score">8.4</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/jcs.html"><img src="images/14.jpg" alt="" /></a><p><a href="detail/jcs.html">巨齿鲨</a></p><div class="rating"><span class="starrating"><span class="star30"></span></span><span class="score">5.9</span></div><a href="javascript:;" class="goupiao">选座购票</a></li><li><a href="detail/tqyj.html"><img src="images/15.jpg" alt="" /></a><p><a href="detail/tqyj.html">通勤营救</a></p><div class="rating"><span class="starrating"><span class="star35"></span></span><span class="score">6.6</span></div><a href="javascript:;" class="goupiao">选座购票</a></li></ul></div></div></div><div class="banner"><a href="javascript:;"><img src="images/banner1.jpg" /></a><a href="javascript:;"><img src="images/banner2.jpg" /></a></div><div class="hot-film"><div class="hot-film-top"><h2>最近热门的电影</h2><ul><li><a>热门</a></li><li><a>最新</a></li></ul></div><div class="hot-film-main"><div class="hot-film-list"><ul><li><a href="detail/thwj.html"><img src="images/2.jpg" alt="" /></a><p><a href="detail/thwj.html">头号玩家</a><span class="score">8.7</span></p></li><li><a href="detail/fwhyj.html"><img src="images/3.jpg" alt="" /></a><p><a href="detail/fwhyj.html">飞屋环游记</a><span class="score">8.9</span></p></li><li><a href="detail/yhhwd.html"><img src="images/5.jpg" alt="" /></a><p><a href="detail/yhhwd.html">银河护卫队</a><span class="score">8.0</span></p></li><li><a href="detail/crzdy2.html"><img src="images/6.jpg" alt="" /></a><p><a href="detail/crzdy2.html">超人总动员2</a><span class="score">8.1</span></p></li><li><a href="detail/jtmdt.html"><img src="images/8.jpg" alt="" /></a><p><a href="detail/jtmdt.html">惊天魔盗团</a><span class="score">7.5</span></p></li></ul></div><div class="new-film-list"><ul><li><a href="detail/cmdsj.html"><img src="images/9.jpg" alt="" /></a><p><a href="detail/cmdsj.html">楚门的世界</a><span class="score">9.2</span></p></li><li><a href="detail/dmkj.html"><img src="images/10.jpg" alt="" /></a><p><a href="detail/dmkj.html">盗梦空间</a><span class="score">9.3</span></p></li><li><a href="detail/fkdwc.html"><img src="images/11.jpg" alt="" /></a><p><a href="detail/fkdwc.html">疯狂动物城</a><span class="score">9.1</span></p></li><li><a href="detail/fczlm.html"><img src="images/12.jpg" alt="" /></a><p><a href="detail/fczlm.html">复仇者联盟</a><span class="score">8.1</span></p></li><li><a href="detail/hxjy.html"><img src="images/13.jpg" alt="" /></a><p><a href="detail/hxjy.html">火星救援</a><span class="score">8.4</span></p></li></ul></div></div></div></div><div id="aside"><div class="billboard"><div class="billboard-title"><h2>一周口碑榜</h2></div><div class="billboard-content"><ul><li><span class="order">1</span><span class="title"><a href="detail/fczlm.html">复仇者联盟</a></span></li><li><span class="order">2</span><span class="title"><a href="detail/thwj.html">头号玩家</a></span></li><li><span class="order">3</span><span class="title"><a href="detail/mnyys.html">美女与野兽</a></span></li><li><span class="order">4</span><span class="title"><a href="detail/yhhwd.html">银河护卫队</a></span></li><li><span class="order">5</span><span class="title"><a href="detail/dmkj.html">盗梦空间</a></span></li><li><span class="order">6</span><span class="title"><a href="detail/fwhyj.html">飞屋环游记</a></span></li><li><span class="order">7</span><span class="title"><a href="detail/hxjy.html">火星救援</a></span></li><li><span class="order">8</span><span class="title"><a href="detail/jqrzdy.html">机器人总动员</a></span></li><li><span class="order">9</span><span class="title"><a href="detail/cmdsj.html">楚门的世界</a></span></li><li><span class="order">10</span><span class="title"><a href="detail/fkdwc.html">疯狂动物城</a></span></li></ul></div></div><div class="contact"><div class="contact-title"><h2>合作联系</h2></div><div class="contact-content"><ul><li>蓝网团队：温轻舟</li></ul></div></div></div>
</div>
<div style="clear:both"></div>
<div id="bottom"><span class="copyright">2023.12.28</span><span class="about"><ul><li>蓝网团队</li><li>联系我们</li><li>帮助中心</li><li>安全中心</li><li>合作共赢</li></ul></span>
</div>
</body>
</html>
js文件：
（1）score.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":top+scrolltop,"left":left+scrollleft}).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[name='movietip']").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[name='movietip']").val();//获取文本框中的电影标签tips += $(this).text()+" ";//当前标签后添加空格$("input[name='movietip']").focus();//文本框获得焦点$("input[name='movietip']").val(tips);//显示电影标签}else{$(this).removeClass("active");//移除当前标签样式var t = $(this).text()+" ";//当前标签后添加空格tips = $("input[name='movietip']").val().replace(t,"");//删除选择的标签$("input[name='movietip']").val(tips);//显示电影标签$("input[name='movietip']").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源码：
（1）index.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;}
.banner>a: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文件：
（1）crzdy2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超人总动员2</title>
<link rel="stylesheet" href="../css/score.css" />
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/score.js"></script>
</head><body>
<div id="nav"><div class="nav-logo"><a href="../index.html">豆瓣电影</a></div><div class="nav-items"><ul><li><a href="javascript:;">影讯 & 购票</a></li><li><a href="javascript:;">选电影</a></li><li><a href="javascript:;">电视剧</a></li><li><a href="javascript:;">排行榜</a></li><li><a href="javascript:;">分类</a></li><li><a href="javascript:;">影评</a></li><li><a href="javascript:;">2018年度榜单</a></li></ul></div>
</div>
<div id="main"><div id="left"><h1><span class="movie-name">超人总动员2 Incredibles 2</span><span class="year">(2018)</span></h1><div class="subject"><div class="mainpic"><img src="../images/6.jpg" /></div><div class="info"><span class='item'>导演</span>: 布拉德·伯德<br/><span class='item'>编剧</span>: 布拉德·伯德<br/><span class="actor"><span class='item'>主演</span>: 格雷格·T·尼尔森 / 霍利·亨特 / 莎拉·沃威尔 / 赫克·米尔纳 / 伊莱·富西尔 / 凯瑟琳·基纳</span><br/><span class="item">类型:</span> 动作 / 喜剧 / 动画 / 冒险<br/><span class="item">制片国家/地区:</span> 美国<br/><span class="item">语言:</span> 英语<br/><span class="item">上映日期:</span> 2018-06-22(中国大陆) / 2018-06-15(美国)<br/><span class="item">片长:</span> 118分钟 / 126分钟(中国大陆)<br/><span class="item">又名:</span> 超人特攻队2(台) / 超人特工队2(港) / 超人家族2<br/><span class="item">IMDb链接:</span> tt3606756<br></div><div class="rating"><div class="rating-logo">豆瓣评分</div><div class="rating-level"><span class="rating-score">8.1</span><div class="rating-right"><div><span class="starrating"><span class="star40"></span></span></div><div class="rating-sum">89669人评价</div></div></div><div class="star-count"><div class="star-item"><span class="stars" title="力荐">5星</span><span class="bar" style="width:37px"></span><span class="star-per">28.4%</span></div><div class="star-item"><span class="stars" title="推荐">4星</span><span class="bar" style="width:64px"></span><span class="star-per">47.8%</span></div><div class="star-item"><span class="stars" title="还行">3星</span><span class="bar" style="width:29px"></span><span class="star-per">22.1%</span></div><div class="star-item"><span class="stars" title="较差">2星</span><span class="bar" style="width:2px"></span><span class="star-per">1.5%</span></div><div class="star-item"><span class="stars" title="很差">1星</span><span class="bar" style="width:0px"></span><span class="star-per">0.2%</span></div></div><div class="compare">好于 74% 动画片<br />好于 89% 喜剧片</div></div></div><div class="evaluation"><div id="first"><a class="wantto">想看</a><a class="seen">看过</a><div>评价: <span class="star"><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span></span><span class="evaluation-word"></span></div></div><div id="second" style="display:none">我想看这部电影<span class="now-time"></span><a class="del">删除</a><br /><span class="show-tips"></span></div><div id="third" style="display:none">我看过这部电影<span class="now-time"></span><a class="del">删除</a><div class="show-evaluation" style="display:none">我的评价: <span class="star"><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span></span><span class="evaluation-word"></span></div></div></div><div class="intro"><span class="title">超人总动员2的剧情简介 · · · · · ·</span><div class="content">超人家族时隔14年强势回归！这次站在聚光灯下的是弹力女超人海伦（霍利·亨特 配音），超能先生巴鲍勃（格雷格·T·尼尔森 配音）则在家照料巴小倩和巴小飞，过起了“正常人”的居家生活。这一角色转换对于每个家庭成员来说都是艰难的，更何况他们都还没意识到宝宝巴小杰的超能力已经悄然增长。当剧中新反派开始酝酿一个狡诈危险的阴谋，超人家族必须联合酷冰侠（塞缪尔·杰克逊 配音）的力量团结对外——然而即使各自都有超能力，真正做起来却是知易行难。</div></div><div class="also-like"><span class="title">喜欢这部电影的人也喜欢 · · · · · ·</span><div class="like-film-list"><ul><li><a href="fwhyj.html"><img src="../images/3.jpg" alt="" /></a><p><a href="fwhyj.html">飞屋环游记</a></p></li><li><a href="yhhwd.html"><img src="../images/5.jpg" alt="" /></a><p><a href="yhhwd.html">银河护卫队</a></p></li><li><a href="jqrzdy.html"><img src="../images/7.jpg" alt="" /></a><p><a href="jqrzdy.html">机器人总动员</a></p></li><li><a href="fkdwc.html"><img src="../images/11.jpg" alt="" /></a><p><a href="fkdwc.html">疯狂动物城</a></p></li><li><a href="fczlm.html"><img src="../images/12.jpg" alt="" /></a><p><a href="fczlm.html">复仇者联盟</a></p></li></ul></div></div></div><div id="aside"><div class="common-label"><span class="title">豆瓣成员常用的标签 · · · · · ·</span><div class="label-list"><ul><li>动画</li><li>皮克斯</li><li>美国</li><li>喜剧</li><li>超级英雄</li><li>2018</li><li>超人</li><li>家庭</li></ul></div></div><div class="recommend"><span class="title">以下豆列推荐 · · · · · ·</span><div class="recommend-list"><ul><li><a href="javascript:;">{北美电影票房总排行}</a><span>(荔枝超人)</span></li><li><a href="javascript:;">豆瓣电影【口碑榜】2018-02-24更新</a><span>(影志)</span></li><li><a href="javascript:;">2018—2025值得关注的美国影片</a><span>(closer)</span></li><li><a href="javascript:;">想看的电影太多怕忘了</a><span>(J.D.)</span></li><li><a href="javascript:;">迪士尼长篇动画作品列表</a><span>(沙加1110)</span></li></ul></div></div><div class="who"><span class="title">谁在看这部电影 · · · · · ·</span><div class="number"><a href="javascript:;">113518人看过</a> / <a href="javascript:;">50807人想看</a></div></div></div>
</div>
<div style="clear:both"></div>
<div id="bottom"><span class="copyright">2023.12.28</span><span class="about"><ul><li>关于蓝网</li><li>联系我们</li><li>帮助中心</li><li>安全中心</li><li>合作共赢</li></ul></span>
</div>
<div id="show-layer" style="display:none"><div class="layer-bg"></div><div class="layer-body"><div class="layer-top"><span class="title">添加收藏:我想看这部电影</span><span class="x">x</span></div><div class="layer-middle"><div id="wantto"><span>标签(多个标签用空格分隔):</span><input type="text" name="movietip" /><div class="tip"><span>常用标签:</span><ul><li>喜剧</li><li>超人</li><li>2018</li><li>动画</li><li>搞笑</li><li>皮克斯</li><li>美国</li><li>家庭</li></ul></div></div><div id="seen"><span>给个评价吧？(可选): </span><span class="star"><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span><span><i class="bright"></i><i class="dark"></i></span></span><span class="evaluation-word"></span></div></div><div class="layer-bottom"><input type="button" value="保存" /></div></div>
</div>
</body>
</html>
注意：
1.所有的电脑详情页面都照着detail文件的例子这么写就好
2.本项目仅包含前端页面
另外：由于博客字数限制，本篇文章所展示的代码并不全面，仅可供参考之用
本项目的完整代码及其素材已上传至资源，大家自行去下载就好