<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>夏目友人帐</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 导航栏 -->
<header>
<a href="#"><img src="imgs/log.png" class="logo"></a>
<ul class="nav">
<li class="nav_active"><a href="index.html">首页</a></li>
<li><a href="html/about.html">关于我们</a></li>
<li><a href="html/pro_center.html">人物中心</a></li>
<li><a href="html/news_center.html">详细介绍</a></li>
<li><a href="html/service.html">客户服务</a></li>
<li><a href="html/contact.html">联系我们</a></li>
</ul>
</header>
<!-- 轮播banner -->
<div class="banner">
<!-- 图片 -->
<div class="banner_box">
<div class="banner_img show">
<img src="imgs/banner_01.png">
</div>
<div class="banner_img">
<img src="imgs/banner_02.png">
</div>
<div class="banner_img">
<img src="imgs/banner_03.png">
</div>
</div>
<!-- 切图按钮 -->
<div class="img_btn left_btn"><img src="imgs/left_btn.png"></div>
<div class="img_btn right_btn"><img src="imgs/right_btn.png"></div>
</div>
<!--欢迎模块-->
<div class="welcome">
<p class="welcome_title">WELCOME TO XIAMU</p>
<p class="welcome_text">夏目贵志生来拥有强大的灵力,能看到妖怪和神明的存在。
因其父母双亡,常年辗转于互相推卸责任的亲戚之间,并受到同龄人的欺负。
被其能力影响,未曾与任何人深交,造成性格一定程度上的孤僻。本性和善,宽厚,踏实。
对于自身的不幸,无论是对人类还是妖怪都未曾抱怨过。</p>
</div>
<!-- 卡片墙 -->
<div class="card">
<div class="card_box">
<div class="card_img">
<img src="imgs/index-cultural01.png" alt="">
</div>
<div class="card_title">
<h5>喵咪老师,斑大人</h5>
</div>
<div class="card_text">
<p>我好歹也是保镖,有种就来挑战我。</p>
</div>
</div>
<div class="card_box">
<div class="card_img">
<img src="imgs/index-cultural02.png" alt="">
</div>
<div class="card_title">
<h5>夏目贵志</h5>
</div>
<div class="card_text">
<p>一个人会寂寞,只是怕踏出最初那一步。</p>
</div>
</div>
<div class="card_box">
<div class="card_img">
<img src="imgs/index-cultural03.png" alt="">
</div>
<div class="card_title">
<h5>露神</h5>
</div>
<div class="card_text">
<p>信仰越来越弱,我便越来越小。 </p>
</div>
</div>
<div class="card_box">
<div class="card_img">
<img src="imgs/index-cultural04.png" alt="">
</div>
<div class="card_title">
<h5>玲子</h5>
</div>
<div class="card_text">
<p>人类都是势利和无情的。</p>
</div>
</div>
</div>
<!-- 产品模块 -->
<div class="product">
<p class="product_title">PRODUCTION CENTER</p>
<p class="product_text">主要人物中心</p>
</div>
<!-- 产品图片 -->
<div class="pro_center">
<div class="pro_center_box">
<div class="img_box">
<div class="pro_img">
<img src="imgs/pro-center1.jpg" alt="">
</div>
<div class="pro_box">
<p>夏目玲子</p>
</div>
</div>
<div class="img_box">
<div class="pro_img">
<img src="imgs/pro-center2.jpg" alt="">
</div>
<div class="pro_box">
<p>友人帐</p>
</div>
</div>
<div class="img_box">
<div class="pro_img">
<img src="imgs/pro-center3.jpg" alt="">
</div>
<div class="pro_box">
<p>藤原夫妇和夏目</p>
</div>
</div>
<div class="img_box">
<div class="pro_img">
<img src="imgs/pro-center4.jpg" alt="">
</div>
<div class="pro_box">
<p>夏目的朋友们</p>
</div>
</div>
<div class="img_box">
<div class="pro_img">
<img src="imgs/pro-center5.jpg" alt="">
</div>
<div class="pro_box">
<p>周一</p>
</div>
</div>
<div class="img_box">
<div class="pro_img">
<img src="imgs/pro-center6.jpg" alt="">
</div>
<div class="pro_box">
<p>柊</p>
</div>
</div>
</div>
</div>
<!-- 信息模块 -->
<div class="news">
<p class="news_title">INTRODUCTION</p>
<p class="news_text"> 详情介绍等你来看</p>
</div>
<!-- 大咖云集 -->
<div class="bigshot">
<div class="shot_left">
<div class="shot_img">
<img src="imgs/news01.png" alt="">
</div>
<ul class="strip_list">
<li class="strip"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="shot_right">
<div class="news_data">
<h1 class="day">11</h1>
<span class="data">2023-11</span>
</div>
<div class="shot_news">
<p class="shot_news_title">充满温馨与不舍的治愈系作品「夏目友人帐」</p>
<p class="shot_news_text">日本漫画家绿川幸的代表作(连载于白泉社 月刊LaLa),2008年开始播出电视动画第1季,最新作品为2018年9月播出的首部剧场版「缘结空蝉」。
截至目前为止动画总共80集(含特别篇、OVA)外加一部剧场版,想知道每一话剧情在演什么或是想要找出哪一位妖怪登场的集数就往下看吧!</p>
</div>
<div class="news_list">
<ul>
<li>
<span>· 夏目友人帐 第6季 </span>
<span>(2017年放送)</span>
</li>
<li>
<span>· 夏目友人帐 第5季 </span>
<span>(2016年放送)</span>
</li>
<li>
<span>· 夏目友人帐 第4季 </span>
<span>(2012年放送)</span>
</li>
<li>
<span>· 夏目友人帐 第3季 </span>
<span>(2011年放送)</span>
</li>
<li>
<span>· 夏目友人帐 第2季 </span>
<span>(2009年放送)</span>
</li>
<li>
<span>· 夏目友人帐 第1季 </span>
<span>(2008年放送)</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<footer>
<div class="footer_box">
<div class="list">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">主要内容</a></li>
<li><a href="#">主要人物</a></li>
<li><a href="#">详情介绍</a></li>
<li><a href="#">治愈作品</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#">人物中心</a></li>
<li><a href="#">夏目玲子</a></li>
<li><a href="#">友人帐</a></li>
<li><a href="#">藤原夫妇</a></li>
<li><a href="#">夏目</a></li>
<li><a href="#">其他人物</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#">详细介绍</a></li>
<li><a href="#">主要人物介绍</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#">客户服务</a></li>
<li><a href="#">暂无</a></li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#">在线留言</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="input_box">
<input type="text" class="name" value="请输入您的姓名">
<input type="text" class="phone" value="请输入您的联系方式">
<textarea>请输入您的留言</textarea><br>
<input type="button" value="提交">
</div>
</div>
<hr>
<p class="footer_text">Copyright02016WenCun.com A1l Rights Reserved
Design by WenCun 粤ICP备13005446号-1</p>
</footer>
<script src="js/banner.js"></script>
</body>
</html>
主要页面