夏目友人帐网页制作

最新推荐文章于 2024-07-21 19:13:42 发布
最新推荐文章于 2024-07-21 19:13:42 发布
阅读量117 收藏 2
点赞数
文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmx_123456/article/details/134436146
版权 
<!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>

主要页面

mmx_123456
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
夏目友人帐网页制作，主要页面
11-16
夏目友人帐网页制作，主要页面
纯CSS3绘制的猫咪老师——献给喜欢CSS3及《夏目友人帐》的你
weixin_30656145的博客
04-13 269
　　最近正发愁着毕业设计做些什么，而后闲逛时看到了诸如twitter小鸟、哆啦A梦、灰太狼等纯CSS3实现的图像。于是本着初学的心态，挑了喜欢的卡通形象来解闷。 　　于是花了一个晚上做完，现在想来多少有点遗憾。因为当时没有分段做个记录，要不现在就能搞个更详细的制作过程给各位了。 　　综上，这篇博文主要用来分享用CSS3绘图的心得及所需的技术。 　　不知道园里有朋友看过《夏目友人帐》没，不然很...
夏目友人帐 动漫 网页设计 html源码 大作业
VX_laoxuezhangzy的博客
06-09 133
【html+css+javascript】动漫5页 夏目友人帐主题5页 带js轮播图 代码带注释 带登录页登录带js验证。dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。主要分为 首页、故事介绍、人物介绍·、精美壁纸。网页比较简单，适合初学者 ,学生网页。用到的是flex弹性布局。
夏目友人帐 动漫主题网页设计 html源码 5页 带js轮播图 代码带注释
m0_37916936的博客
04-24 198
【html+css+javascript】动漫5页 夏目友人帐主题5页 带js轮播图 代码带注释 带登录页登录带js验证。dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。主要分为 首页、故事介绍、人物介绍·、精美壁纸。网页比较简单，适合初学者 ,学生网页。用到的是flex弹性布局。
夏目友人帐 win7主题
06-30
夏目友人帐_ver2.0_win7主题 出自绯空研萌组。 使用前需破解
夏目动漫周边进销存管理系统方案.doc
09-24
夏目动漫周边进销存管理系统是一款针对动漫周边商品的库存、采购与销售进行高效管理的软件解决方案。该系统旨在提供全面的业务流程管理，确保库存数据的准确性和实时性，提高运营效率。 一、系统分析 1、业务流程...
【STC8A8K64S4A12开发板】—ADC模数转换讲解_电子友人张的博客-CSDN博客.mhtml
03-16
【STC8A8K64S4A12开发板】—ADC模数转换讲解_电子友人张的博客-CSDN博客.mhtml
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 891
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML5应用的安全防护策略与实践
@云安全小杜
07-17 447
随着HTML5及其相关技术（如CSS3和JavaScript）的普及，Web应用变得越来越强大和复杂，同时也成为黑客攻击的目标。本文将探讨HTML5应用面临的常见安全威胁，以及如何通过最佳实践和代码示例来增强应用的安全性。
HTML5-canvas1
Violetto_Yan的博客
07-20 254
context.beginPath（）之后会用指定新的状态回值。最后一次会把前面的覆盖掉。把图形包在beginPath（）和closePath（）里面。若分别context.strokeStyle=“ ”fillRect()用fillstyle绘制填充矩形。最后一个lineto可以省略 ，会自动连接。strokeRect() 用 绘制矩形边框。4、后绘制的图形会遮挡前面的图形。1、canvas：创建画布。3、canvas自带api。绘制封闭图形 有空隙。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 3902
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 888
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
css性能优化的方法
最新发布
jht_520的博客
07-21 70
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 754
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
拖拽上传（预览图片）
喵喵的博客
07-18 430
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
【CSS in Depth 2 精译_019】3.2 CSS 的盒模型
PeacefulWinter的博客
07-18 1410
本篇为《CSS in Depth》全新第二版第3.2小节内容，主要介绍了盒模型的相关概念及注意事项，并对第一版内容上做了大幅更新。建议基础薄弱的朋友先收藏起来，再跟着书中示例慢慢学习体会盒模型的用法。
CSS基础学习之元素定位（6）
07-17 635
属性用于指定一个元素在文档中的定位方式。和属性则决定了该元素的最终位置。
只用 CSS 能玩出什么花样？
艾恩小灰灰的博客
07-17 1090
CSS 的潜力远远超出了日常布局和样式的范畴。通过巧妙运用其功能，我们不仅能够构建美观且功能性的网站，还能创造出令人赞叹的视觉艺术。从基本形状到复杂的动画，CSS 提供了无尽的可能性，等待着每一位前端开发者去探索和实现。以上代码示例展示了 CSS 的部分能力，但真正的乐趣在于实验和创造。所以，拿起你的代码编辑器，开始探索 CSS 的无限可能性吧！
推荐几部高评价动漫并给出链接
08-11
3. 《夏目友人帐》：这部作品是一部幻想题材的日本动漫，讲述了少年夏目拥有看见妖怪的能力并与他们建立友谊的故事。它以温馨感人的故事情节，细腻的画面和优美的音乐，深受观众的喜爱。[链接]...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值