1.这是首页的效果
首页html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>新海诚</title>
<link rel="stylesheet" href="./style.css" />
<script src="./js/vue.global.js"></script>
<style>
.flex {
display: flex;
align-items: center;
justify-content: center;
}
#input {
display: flex;
align-items: center;
}
#input>input{
outline: none;
border: 1px solid #2196f3;
height: 25px;
margin-top: 5px;
}
#input>button {
width: 60px;
height: 25px;
background-color: #2196f3;
color: white;
border: none;
margin-top: 3px;
}
</style>
</head>
<body>
<audio
style="display: none"
autoplay="autoplay"
controls="controls"
loop="loop"
preload="auto"
src="./images/m01.mp3"
></audio>
<!-- 头部 -->
<div class="header">
<div class="container cl">
<div class="logo fl">
<a href="index.html">新海诚电影</a>
</div>
<div class="nav fr">
<ul>
<ul>
<li><a href="index.html" class="on">首页</a></li>
<li><a href="sub1.html">作者介绍</a></li>
<li><a href="sub2.html">电影介绍</a></li>
<li><a href="sub3.html">经典语录</a></li>
<li><a href="sub4.html">精彩照片</a></li>
<li><a href="sub5.html">登录</a></li>
<li><a href="sub6.html">注册</a></li>
<li id="input"><input type="text"><button>搜索</button></li>
<li><a href="my.html">联系作者</a></li>
</ul>
</ul>
</div>
</div>
</div>
<div class="container" id="app">
<!-- 轮播图 -->
<div id="slide">
<!-- 图片区 -->
<div id="pic">
<div class="current">
<img class="asd" src="./images/img002.jpg" alt="" />
<img class="asd d-none" src="./images/img0013.jpg" alt="" />
<img class="asd d-none" src="./images/img007.jpg" alt="" />
</div>
<div></div>
<div></div>
</div>
<!-- 控制点 -->
<ol id="control">
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
</ol>
<!-- 箭头控制区 -->
<div id="arrow">
<span class="arrow arrow-left"
><img src="./images/img0001.png" alt=""
/></span>
<span class="arrow arrow-right"
><img src="./images/img0002.png" alt=""
/></span>
</div>
</div>
<!-- 人物介绍 -->
<div class="index-about">
<!-- 标题 -->
<div class="common-tit"><span></span> 人物介绍 <span></span></div>
<div class="content cl flex">
<div class="fl">
<img
src="./images/img0013.jpg"
alt=""
style="width: 380px; height: 285px"
/>
</div>
<div class="txt fr">
<div class="tit">{{character.name}}</div>
<div class="desc">
<p>{{character.txt1}}</p>
<p>{{character.txt2}}</p>
</div>
</div>
</div>
</div>
<!-- 电影 -->
<div class="movies">
<div class="common-tit"><span></span> 电影介绍 <span></span></div>
<div class="list">
<div class="item cl flex" v-for="(v,i) in introduce">
<div class="img"><img :src="v.img" alt="" /></div>
<div class="txt" style="width: 550px">
<div class="tit">{{v.name}}</div>
<div class="desc">{{v.txt}}</div>
</div>
</div>
</div>
</div>
<!-- 照片 -->
<div class="phones">
<div class="common-tit"><span></span> 精彩照片 <span></span></div>
<div class="list cl">
<div class="item fl">
<div class="img"><img :src="imgArr[0]" alt="" /></div>
</div>
<div class="item fl">
<div class="img"><img :src="imgArr[1]" alt="" /></div>
</div>
<div class="item fl" style="margin-right: 0">
<div class="img"><img :src="imgArr[2]" alt="" /></div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<p>想和你重新认识一次,从你的名字开始。</p>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./js/lunbotu.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
introduce: [
{
name: "你的名字",
txt: "生活在深山小镇的女高中生三叶,梦见自己变成了一个男孩,来到陌生的房间里,遇见陌生的友人,眼前则是一片东京街景。而生活在东京的男高中生泷,也梦见自己变成了女高中生来到深山小镇里。不久,他们意识到自己在彼此的梦中交换了灵魂——素未相识的两人就此邂逅,命运的齿轮也开始转动。",
img: "./images/img002.jpg",
},
{
name: "天气之子",
txt: "高一那年的夏天,帆高离家出走,出岛来到东京。东京连日降雨不断,在熙熙攘攘的大都市一角,帆高遇到了拥有不可思议能力的少女阳菜。“从现在开始会放晴。” 只要祈祷,她就能让天空放晴。在气候调节失控的时代,被命运捉弄的少年和少女选择了自己的生活方式。",
img: "./images/img003.jpg",
},
],
character: {
name: "新海诚",
txt1: `新海诚(Makoto Shinkai),原名新津诚(MakotoNiitsu),1973年2月9日出生于日本长野县南佐久郡小海町,日本动画导演、编剧、漫画作家,毕业于日本长野县野泽北高等学校、日本中央大学文学部日本文学系。`,
txt2: `1997年,执导了黑白短片《遥远世界》,该片获得了eAT金沢’98にて特别赏。2000年,执导了黑白动画短片《她和她的猫》,该片获得了第12届DoGA
CG动画大赛最优秀奖[1]。2002年,执导的动画电影《星之声》。2004年11月20日,执导的个人首部长篇电影《云之彼端,约定的地方》上映,该片获得了第59届日本每日映画大奖动画奖。2007年3月3日,编导的爱情动画电影《秒速5厘米》上映,该片获得了亚洲太平洋电影节最佳动画电影奖`,
},
imgArr: [
"./images/img008.jpg",
"./images/img0011.jpg",
"./images/img007.jpg",
],
};
},
}).mount("#app");
</script>
</html>
css代码如下:
@charset "UTF-8";
/* 样式初始化 */
html,
body,
div,
p,
a,
span,
img,
table,
tr,
td,
caption,
ul,
li,
dl,
dt,
dd,
s,
b,
i,
form,
button,
input,
textarea,
section,
aside {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
/* 默认字体 */
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
color: #000;
/* 背景图片 */
background: url("./images/img003.jpg") no-repeat;
background-size: 100%;
background-attachment: fixed;
}
ul,
li {
list-style: none;
}
img {
/* 图片最大宽度 */
max-width: 100%;
}
a {
color: #000;
/* 取消下划线 */
text-decoration: none;
}
/* 公共样式 */
.fl {
float: left;
}
.fr {
float: right;
}
/* 清除浮动 */
.cl::after {
content: "";
clear: both;
display: block;
visibility: hidden;
}
/* 网页宽度 */
.container {
width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.6);
}
/* 头部 */
.header {
border-bottom: 1px solid #ddd;
}
.header .container {
padding: 10px;
}
.logo {
font-size: 32px;
font-weight: bold;
}
/* 导航栏 */
.nav ul li {
float: left;
margin: 0 6px;
}
.nav ul li a {
display: block;
padding: 8px 10px;
font-size: 18px;
}
.nav ul li a:hover,
.nav ul li a.on {
color: #2196F3;
border-bottom: 2px solid #2196F3;
}
/* 轮播图 */
#slide {
width: 100%;
height: 550px;
position: relative;
}
#pic div {
width: 100%;
height: 550px;
display: none;
}
#pic div.current {
display: block;
}
.d-none {
display: none;
}
#pic div img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 控制点 */
#control {
list-style: none;
position: absolute;
left: 50%;
margin-left: -50px;
bottom: 15px;
}
#control li {
width: 12px;
height: 12px;
margin-right: 10px;
background: #ddd;
border-radius: 50%;
float: left;
}
#control li.current {
background: #2196F3;
}
#control li:hover {
cursor: pointer;
}
/* 箭头控制区 */
#arrow {
position: absolute;
top: 50%;
width: 100%;
/* display: none; */
margin-top: -20px;
}
#arrow .arrow {
display: block;
}
#arrow .arrow img {
width: 40px;
}
#arrow .arrow.arrow-left {
float: left;
margin-left: 30px;
}
#arrow .arrow.arrow-right {
float: right;
margin-right: 30px;
}
/* 标题 */
.common-tit {
text-align: center;
padding: 20px 0;
font-size: 28px;
font-weight: bold;
color: #2196F3;
}
.common-tit span {
display: inline-block;
width: 60px;
height: 2px;
background: #2196F3;
vertical-align: middle;
}
.index-about .content .img {
width: 520px;
margin-left: 20px;
}
.index-about .content .img img {
width: 100%;
height: 330px;
object-fit: cover;
}
.index-about .content .txt {
width: 660px;
/* height: 330px; */
padding: 20px;
}
.index-about .content .txt .tit {
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
}
.index-about .content .txt .desc {
line-height: 1.6;
}
.index-about .content .txt .desc p {
margin-bottom: 10px;
}
.movies {
padding-bottom: 10px;
}
/* 电影介绍 */
.movies .list .item {
margin-bottom: 15px;
}
.movies .list .item .img {
width: 380px;
float: left;
}
.movies .list .item .img img {
width: 100%;
height: 190px;
object-fit: cover;
margin-left: 10px;
border-radius: 5px;
}
.movies .list .item .txt {
float: left;
width: 820px;
padding: 20px;
height: 190px;
}
.movies .list .item .txt .tit {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.movies .list .item .txt .desc {
line-height: 1.6;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 设置方向 */
-webkit-line-clamp: 4;
/* 设置超过为省略号的行数 */
overflow: hidden;
}
/* 精彩照片 */
.phones .list .item {
width: 370px;
margin-right: 30px;
}
.phones .list .item:nth-child(n+3) {
margin-bottom: 30px;
}
.phones .list .item:hover .img img {
transform: scale(1.1);
}
.phones .list .item:hover .txt .tit {
color: #2196F3;
}
.phones .list .item .img {
overflow: hidden;
width: 100%;
height: 220px;
}
.phones .list .item .img img {
width: 100%;
height: 220px;
object-fit: cover;
transition: all .4s;
}
.phones .list .item .txt {
padding: 15px;
}
.phones .list .item .txt .tit {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
/* 底部 */
.footer {
margin-top: 36px;
text-align: center;
background: #0096be;
color: #fff;
padding: 12px 0;
font-size: 14px;
}
.footer p {
line-height: 30px;
}
.inpage-tit {
font-size: 25px;
padding-bottom: 15px;
text-align: center;
}
/* 关于 */
.about {
padding: 30px;
background: rgba(255, 255, 255, 0.8);
}
.about p {
text-indent: 2em;
margin-bottom: 15px;
line-height: 1.8;
}
.loginBox {
border-radius: 12px;
margin: 100px auto;
width: 1000px;
box-shadow: 0 0 10px #9abaf3;
}
.loginBox .img {
width: 500px;
float: left;
}
.loginBox .img img {
display: block;
width: 100%;
object-fit: cover;
}
.loginBox .cont {
float: left;
/* background-color: #fff; */
text-align: center;
/* width: 500px; */
width: 100%;
padding-bottom: 16px;
}
.loginBox .cont .title {
text-align: center;
font-size: 36px;
margin-bottom: 16px;
padding-top: 16px;
}
.loginBox .cont input {
border: 1px solid #d1d3e2;
background-color: #fff;
display: block;
font-size: 16px;
height: 42px;
border-radius: 40px;
margin: 20px auto;
width: 420px;
padding: 0 15px;
outline: 0;
}
.loginBox .cont button {
width: 452px;
height: 44px;
background-color: #2277ba;
color: #fff;
border-radius: 40px;
font-size: 16px;
outline: 0;
border: 0;
}
/* 返回顶部 */
.fixed-btn {
position: fixed;
right: 1%;
bottom: 5%;
width: 40px;
height: 40px;
/* border: 1px solid #eee; #c5d0ce */
background-color: rgba(197, 208, 206, .5);
font-size: 32px;
z-index: 1040;
text-align: center;
}
#btn_top {
text-decoration: none;
height: 100%;
width: 100%;
display: block;
color: #fff;
font-weight: bold;
}
.record-item {
display: flex;
}
.record-item img {
width: 400px;
}
.record-item .record-txt {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
}
.record-item .record-txt p:first-child {
width: 100%;
font-weight: 700;
}
.record-item .record-txt p:last-child {
width: 100%;
}
.txt-l {
text-align: left;
}
.txt-r {
text-align: right;
}
.ml-20 {
margin-left: 20px;
}
.order-99 {
order: 99
}
.video {
width: 100%;
height: 100%;
object-fit: fill;
}
.play-audio {
position: fixed;
right: 10px;
top: 10px;
width: 50px;
height: 50px;
}
.play-audio img {
width: 100%;
height: 100%;
cursor: pointer;
}
.animate-music {
animation: rotation 7s linear infinite forwards;
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
2.网页的浏览地址:
https://pxl666-2g38k3hmc6223509-1323863915.tcloudbaseapp.com/cartoon/index.html