在建立之前,先把头部,,脚部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