HTML静态网页成品作业(HTML+CSS)——动漫樱桃小丸子网页(4个页面)

本文主要是介绍HTML静态网页成品作业(HTML+CSS)——动漫樱桃小丸子网页(4个页面),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有4个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="container"><div class="top"><img src="./images/top.jpg" alt=""></div><div class="header"><img src="./images/logo.jpeg" alt=""><div class="nav"><a href="index.html">首页</a><a href="juqing.html">剧情介绍</a><a href="juese.html">角色介绍</a><a href="jingcai.html">精彩剧情</a></div></div><div class="banner"><img src="./images/banner.jpg" alt=""></div><div class="mid"><div class="mid-img"><img src="./images/1.jpg" alt=""></div><div class="mid-img"><img src="./images/2.png" alt=""></div><div class="mid-img"><img src="./images/3.png" alt=""></div><div class="mid-img"><img src="./images/4.png" alt=""></div><div class="mid-img"><img src="./images/5.jpg" alt=""></div></div><div class="content"><div class="content-img"><img src="./images/quanjia.jpeg" alt=""></div><div class="content-text"><h4>樱桃小丸子</h4><p>《樱桃小丸子》是日本动画公司制作的电视动画。其动画连续二十余年高居日本动画收视率前三位,到2013年时已超过1000集,仍于每周日黄金时段下午六点在日本富士电视台上进行连载热播,是日本男女老少心中的国民动画。本作品是以作者的童年生活为蓝本,故事围绕着小丸子以及其家人和同学展开,有关于亲情、友谊,或是一些生活小事,其中有笑有泪,令人回想起童年的稚气。</p></div></div><div class="content1"><div class="content1-box"><div class="content1-img"><img src="./images/j1.webp" alt=""></div><p>春假没事整天睡觉的小丸子,和小玉、山根等人一起去看海豚表演,以为这样可以活动一下身心,但是,由于山根一心想成为海豚训练师,因此把小丸子当作海豚练习,反而累垮了小丸子。</p></div><div class="content1-box"><div class="content1-img"><img src="./images/j2.webp" alt=""></div><p>喜欢郊游的准备 第二天就是全班同学一起去郊游的日子了,小丸子一整天兴高采烈地期待着。小丸子还特地花了200日元买了个手电筒。 可惜此时小丸子家却发生了一件大事...</p></div><div class="content1-box"><div class="content1-img"><img src="./images/j3.webp" alt=""></div><p>第二天就是母亲节了,小丸子想给妈妈准备礼物,但她全部的财产也才250日元,想找姐姐借却遭到了拒绝。无计可施的小丸子只好带上这笔钱来到百货店,看到很中意的东西,但那高...</p></div></div><div class="footer">Copyright © 樱桃小丸子网站</div></div>
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

这篇关于HTML静态网页成品作业(HTML+CSS)——动漫樱桃小丸子网页(4个页面)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1134019

相关文章

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,:本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”:浏览器到底缓存了谁?三、设计思路:把“发版”做成“自愈”四、代码

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,:本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1:直接下载(推荐)方案 2:手动构造

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫(Navigation Guards)本质上就是 在路

C#自动化实现检测并删除PDF文件中的空白页面

《C#自动化实现检测并删除PDF文件中的空白页面》PDF文档在日常工作和生活中扮演着重要的角色,本文将深入探讨如何使用C#编程语言,结合强大的PDF处理库,自动化地检测并删除PDF文件中的空白页面,感... 目录理解PDF空白页的定义与挑战引入Spire.PDF for .NET库核心实现:检测并删除空白页