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

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.本项目仅包含前端页面

另外：由于博客字数限制，本篇文章所展示的代码并不全面，仅可供参考之用

本项目的完整代码及其素材已上传至资源，大家自行去下载就好

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/276761.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

智安网络|实现安全与网络功能一体化：SASE的全新安全策略

智安网络|实现安全与网络功能一体化：SASE的全新安全策略

随着企业信息化和数字化程度的不断提升&#xff0c;网络安全面临着前所未有的挑战。传统的网络安全模式已经无法满足日益复杂的安全需求。在这一背景下&#xff0c;安全访问服务边缘&#xff08;SASE&#xff09;崭露头角&#xff0c;并逐渐成为新一代网络安全架构的关键概念。…
阅读更多...
easyexcel 导出

easyexcel 导出

在使用EasyExcel库进行数据写入时&#xff0c;通常我们会使用实体类来存储数据。但是当遇到动态查询&#xff0c;无法确定属性数量和名称时&#xff0c;就需要使用Map来接收数据。然而&#xff0c;直接将Map中的数据写入Excel表格并不是一件简单的事情。接下来&#xff0c;我将…
阅读更多...
postman使用-04响应

postman使用-04响应

文章目录 响应响应界面说明Pretty&#xff1a;格式化显示&#xff0c;以便查看Raw&#xff1a;不进行任何处理&#xff0c;显示响应数据的原始格式Preview&#xff1a;预览响应体&#xff0c;会自动换行&#xff0c;不会格式化&#xff08;有时候是数据&#xff0c;有时候是页面…
阅读更多...
Windows搭建RTMP视频流服务（Nginx服务器版）

Windows搭建RTMP视频流服务（Nginx服务器版）

文章目录 引言1、安装FFmpeg2、安装Nginx服务器3、实现本地视频推流服务4、使用VLC或PotPlayer可视化播放器播放视频5、RTSP / RTMP系列文章 引言 RTSP和RTMP视频流的区别 RTSP &#xff08;Real-Time Streaming Protocol&#xff09;实时流媒体协议。 RTSP定义流格式&#xff…
阅读更多...
django之drf框架（排序、过滤、分页、异常处理）

django之drf框架（排序、过滤、分页、异常处理）

排序 排序的快速使用 1.必须是继承GenericAPIView及其子类才能是用排序 导入OrderingFilter类&#xff0c;from rest_framework.filters import OrderingFilter 2.在类中配置类属性 filter_backends[OrderingFilter] 3.类中写属性 ordering_fields [price,id] # 必须是表的…
阅读更多...
EST-100身份证社保卡签批屏按捺终端PC版web版本http协议接口文档，支持web网页开发对接使用

EST-100身份证社保卡签批屏按捺终端PC版web版本http协议接口文档，支持web网页开发对接使用

<!DOCTYPE html><html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,initial-scale1.0"><title>演示DEMO</title><script type"text/…
阅读更多...
YOLOv5改进 | 2023注意力篇 | BiFormer双层路由注意力机制(Bi-level Routing Attention)

YOLOv5改进 | 2023注意力篇 | BiFormer双层路由注意力机制(Bi-level Routing Attention)

一、本文介绍 BiFormer是一种结合了Bi-level Routing Attention的视觉Transformer模型&#xff0c;BiFormer模型的核心思想是引入了双层路由注意力机制。在BiFormer中&#xff0c;每个图像块都与一个位置路由器相关联。这些位置路由器根据特定的规则将图像块分配给上层和下层路…
阅读更多...
基于Wenet长音频分割降噪识别

基于Wenet长音频分割降噪识别

Wenet是一个流行的语音处理工具&#xff0c;它专注于长音频的处理&#xff0c;具备分割、降噪和识别功能。它的长音频分割降噪识别功能允许对长时间录制的音频进行分段处理&#xff0c;首先对音频进行分割&#xff0c;将其分解成更小的段落或语音片段。接着进行降噪处理&#x…
阅读更多...
磁盘相关知识

磁盘相关知识

一、硬盘数据结构 1.扇区&#xff1a; 盘片被分为多个扇形区域&#xff0c;每个扇区存放512字节的数据&#xff08;扇区越多容量越大&#xff09; 存放数据的最小单位 512字节 &#xff08;硬盘最小的存储单位是扇区&#xff0c;512 个字节&#xff0c;八个扇区组成一块&…
阅读更多...
算法学习系列（十五）：最小堆、堆排序

算法学习系列（十五）：最小堆、堆排序

目录 引言一、最小堆概念二、堆排序模板&#xff08;最小堆&#xff09;三、模拟堆 引言 这个堆排序的话&#xff0c;考的还挺多的&#xff0c;主要是构建最小堆&#xff0c;并且在很多情况下某些东西还用得着它来优化&#xff0c;比如说迪杰斯特拉算法可以用最小堆优化&#…
阅读更多...
Xamarin开发:商场促销（策略设计模式）

Xamarin开发:商场促销（策略设计模式）

Xamarin开发:商场促销&#xff08;策略设计模式&#xff09; 一、介绍二、需求分析三、实现四、需求分析问题1解决方案问题2解决方案 五、增加新需求六、代码优化与分析总结 一、介绍 本文引用《大话设计模式》第二章节的内容进行学习分析&#xff0c;仅供学习使用 这里接着我…
阅读更多...
Java设计模式-装饰者模式

Java设计模式-装饰者模式

目录 一、星巴克咖啡订单项目 二、装饰者模式 &#xff08;一&#xff09;定义 &#xff08;二&#xff09;原理 &#xff08;三&#xff09;装饰者模式解决星巴克咖啡订单 一、星巴克咖啡订单项目 星巴克咖啡订单项目&#xff08;咖啡馆&#xff09;&#xff1a; 1) 咖…
阅读更多...
菜鸟学习vue3笔记-vue hooks初体验

菜鸟学习vue3笔记-vue hooks初体验

import { ref } from "vue"; export default function () {let a1 ref(1);let a2 ref(5);let c ref(0);function add() {a1.value;a2.value;}return {add,a1,a2,c,}; }<template><div><p>第一个数字{{ a1 }}</p><p>第二个数字{{ a2…
阅读更多...
java勤工助学信息管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

java勤工助学信息管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web勤工助学信息管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境 为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为M…
阅读更多...
Java线上问题排查思路

Java线上问题排查思路

1、Java 服务常见问题 Java 服务的线上问题从系统表象来看大致可分成两大类: 系统环境异常、业务服务异常。 系统环境异常&#xff1a;主要从CPU、内存、磁盘、网络四个方面考虑。比如&#xff1a;CPU 占用率过高、CPU 上下文切换频率次数较高、系统可用内存长期处于较低值、…
阅读更多...
K8s实战-基于LivenessProbe健康检查

K8s实战-基于LivenessProbe健康检查

LivenessProbe探针用于判断容器是否存活&#xff0c;如果探测到容器不健康&#xff0c;则kubelet将杀掉该容器&#xff0c;然后根据重启策略处理。 LivenessProbe的实现方式&#xff1a; ExecAction&#xff1a;在容器内部执行一个命令&#xff0c;如果该命令的返回码为0&…
阅读更多...
计算机毕业设计 基于SpringBoot的高校危化试剂仓储管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

计算机毕业设计 基于SpringBoot的高校危化试剂仓储管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
最短路径(数据结构实训)(难度系数100)

最短路径(数据结构实训)(难度系数100)

最短路径 描述&#xff1a; 已知一个城市的交通路线&#xff0c;经常要求从某一点出发到各地方的最短路径。例如有如下交通图&#xff1a; 则从A出发到各点的最短路径分别为&#xff1a; B&#xff1a;0 C&#xff1a;10 D&#xff1a;50 E&#xff1a;30 F&#xff1a;60 输…
阅读更多...
白话机器学习的数学-1-回归

白话机器学习的数学-1-回归

1、设置问题 投入的广告费越多&#xff0c;广告的点击量就越高&#xff0c;进而带来访问数的增加。 2、定义模型 定义一个函数&#xff1a;一次函数 y ax b &#xff08;a 是斜率、b 是截距&#xff09; 定义函数&#xff1a; 3、最小二乘法 例子&#xff1a; 用随便确定的参…
阅读更多...
BDTC2023：CloudberryDB开源创新与实践

BDTC2023：CloudberryDB开源创新与实践

中国大数据技术大会&#xff08;BDTC&#xff09;由中国计算机学会&#xff08;CCF&#xff09;创立于2008年&#xff0c;已经成为国内外极具行业实践的专业大数据交流平台。12月22日-24日&#xff0c;第十七届中国大数据技术大会&#xff08;BDTC 2023&#xff09;在广州举行。…
阅读更多...
最新文章

Copyright @ 2022~2023