web前端项目-豆瓣电影【附源码】
发布时间：2023年12月28日
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;//定义变量值为0
setInterval(function(){
len.eq(pos).hide();//隐藏元素
pos++;//变量值加1
if(pos == len.length) pos=0;//变量值重新定义为0
len.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;//当前索引加1
getEvaluationWord(".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;//当前索引加1
getEvaluationWord("#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;//当前索引加1
getEvaluationWord("#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.本项目仅包含前端页面
另外：由于博客字数限制，本篇文章所展示的代码并不全面，仅可供参考之用
本项目的完整代码及其素材已上传至资源，大家自行去下载就好
文章来源:https://blog.csdn.net/qiao_yue/article/details/135276865
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！