速来！Web前端期末作业设计来拿！（一个跳转网页界面）

最新推荐文章于 2023-12-27 09:01:12 发布

梦想大佬程序员

最新推荐文章于 2023-12-27 09:01:12 发布

阅读量260

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/m0_73944717/article/details/131663141

版权

本文详述了一项前端期末作业，涉及创建包含头部和底部样式的多个页面设计。首先，建立了全局的head和bottom CSS属性，接着分别展示了首页及后续四个页面的内容与对应的CSS样式。每个页面都整合了头部和底部的样式，同时提供了各页面的运行效果展示。作者邀请读者关注以获取更多前端页面设计资源。

摘要由CSDN通过智能技术生成

在建立之前，先把头部，，脚部css属性建立出来，为下面页面都要引入

head部分

*{
	padding: 0;
	margin: 0;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
}
#logo{
	font-size: 32px;
	line-height: 70px;
	float: left;
	font-family: "微软雅黑";
	font-weight: bold;
	cursor: pointer;
	color: #333333;
}
#header{
	height: 70px;
	background-color: #fff;
}
#header_con{
	width: 1200px;
	margin:0 auto;
}
#header_con ul{
	float: right;
}
#header_con ul li{
	display: inline-block;
	line-height: 70px;
	padding-right: 30px;
}
#header_con ul li a{
	color: #333;
	font-size: 18px;
}
#header_con ul li a:hover{
	color: #00508A;
	font-weight: bold;
}

bottom部分

#bottom{
	width: 1500px;
	height: 60px;
	background-color: #333333;
	text-align: center;
}
#bottom p{
	line-height: 30px;
}

然后以下为首页部分

此页面为首页index.html页面


<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/bottom.css">
		<link rel="stylesheet" href="css/head.css">
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="header">
					<div id="header_con">
						<p id="logo">电影鉴赏</p>
						
						<ul>
							<li><a href="index.html">首页</a></li>
							<li><a href="index2.html">你的名字</a></li>
							<li><a href="index3.html">你好世界</a></li>
							<li><a href="index4.html">天气之子</a></li>
							<li><a href="index5.html">帮助反馈</a></li>
						</ul>
					</div>
				</div>
				<div id="content">
					<div id="content-top">
						<h3>电影推荐</h3>
						<div class="nr">
							<div class="img-nr">
								<img src="img/ndmz.jpg">
							</div>
							<div class="nr-text">
								<h4>《 你的名字 》</h4>
								<p>《你的名字》是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影。作品于2016年8月26日在日本上映。中国内地于2016年12月2日上映。作品讲述了男女高中生在梦中相遇，并寻找彼此的故事。中国大陆于2017年8月26日全网首播。</p>
								<button type="button"><a href="index2.html">GO!</a></button>
							</div>
						</div>
						<div class="nr">
							<div class="img-nr">
								<img src="img/nhsj.jpg">
							</div>
							<div class="nr-text">
								<h4>《 你好世界 》</h4>
								<p>《你好世界》是由伊藤智彦执导的原创动画电影，北村匠海、松坂桃李、滨边美波、子安武人等人参与配音。影片以2027年的日本京都为舞台，讲述了16岁的高中生直实为了拯救爱人瑠璃而卷入了现实与虚拟交织的记忆世界故事。该片于2019年9月20日在日本上映，2021年6月11日在中国大陆上映。</p>
								<button type="button"><a href="index3.html">GO!</a></button>
							</div>
						</div>
						<div class="nr">
							<div class="img-nr">
								<img src="img/tqzj.jpg">
							</div>
							<div class="nr-text">
								<h4>《 天气之子 》</h4>
								<p>《天气之子》是由新海诚执导、Comix Wave
									Film负责制作的原创动画电影，该片讲述了少年帆高与拥有操控天气超能力的少女阳菜之间的奇幻爱情故事。影片于2019年7月19日在日本上映，中国香港由安乐影片代理，于2019年8月8日上映；中国台湾由车库娱乐代理，于2019年9月12日上映；中国内地由华夏电影引进，于2019年11月1日上映；
									中国大陆于2020年7月21日全网首播。</p>
								<button type="button"><a href="index4.html">GO!</a></button>
							</div>
						&l