web前端项目-豆瓣电影【附源码】

2023-12-28 21:01:34

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>评价:&nbsp;
					<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">我的评价:&nbsp;
					<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>
                &nbsp;/&nbsp;
            	<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>给个评价吧？(可选):&nbsp;</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
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。