html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享

软件技术NINI

于 2024-08-03 13:22:29 发布

阅读量659

点赞数 10

文章标签： html css dreamweaver

本文链接：https://blog.csdn.net/2301_78133614/article/details/139251756

版权

一、👨‍🎓网站题目

卡通网站的设计与制作。

二、✍️网站描述

- 卡通kitty猫主题的网页一共八个页面
- kitty猫网页使用html css js制作有banana图
- 页面可以相互跳转包含表单三级页面
- 网页可以使用vscode hbuilder dw等打开修改
- 里面的图片和文字都可以替换为其他旅游网页
- html静态网页没有复杂效果布局简单原创html网页设计适合当作业使用

👨‍🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

四、🌐网站效果

五、🪓 代码实现

💒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">
    <link rel="stylesheet" href="css/style.css">
    <title>HelloKitty</title>
</head>

<body>
    <div class="bigbox">
        <div class="imglogo">
            <img src="image/8.gif" alt="">
            <script  color="255,182,193" opacity='1' zIndex="-1" count="100" src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js" type="text/javascript"></script>

        </div>
        <div class="banner">
            <div class="heard">
                <a href="">首页</a>
                <a href="">HelloKitty中心</a>
                <a href="">精彩图片</a>
                <a href="">联系我们</a>
            </div>
            <div class="xinwenlist">
                <div class="xinwen_list">
                    <h1>HelloKitty中心</h1>
                    <ul>
                        <li>*****特征*****</li>
                        <li>*****兴趣*****</li>
                        <li>*****个性*****</li>
                    </ul>
                </div>
                <div class="xinwen_list">
                    <h1>喜欢</h1>
                    <ul>
                        <li>喜欢的颜色</li>
                        <li>喜欢的食物</li>
                        <li>喜欢的音乐</li>
                    </ul>
                </div>
                <div class="xinwen_list">
                    <h1>简介</h1>
                    <ul>
                        <li>-----姓名-----</li>
                        <li>-----性别-----</li>
                        <li>-----生日-----</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="msgs">
            <div class="msgs_left">
                <div class="title">
                    <a href="">首页></a>
                    <a href="">HelloKitty中心</a>
                </div>
                <div class="msgnei">
                    <h1>简介</h1>
                    <div class="neirong">
                        <div>
                            <p class="shou">Hello Kitty（日语：ハローキティ；拉丁写法：Harōkiti），日本卡通角色，市面的中文译名有堤提猫、凯蒂猫、凯迪猫、吉蒂猫等名。另外，由于Hello Kitty没有嘴巴，在网络上亦有无口猫、无嘴猫的别名。她有这样一个故事。有一只小猫，有嘴巴（作者已经表示有嘴巴了），脸蛋圆圆的，左耳上扎着一个蝴蝶结，还有一截小尾巴，她的名字叫堤提猫 （Hello Kitty），凯蒂猫、吉蒂猫或无嘴猫。Kitty猫诞生于1974年，是个英国小女孩，名叫凯蒂·怀特（Kitty White），天蝎座，三年级，有只叫Charmmy Kitty的宠物猫，还有个双胞胎姐妹</p>
                            <img src="picture/1.webp" alt="">
                            <p>凯蒂猫的创始人信太郎卖过丝绸，做过橡胶凉鞋生意，他非常喜欢在产品上增添一些小设计来提高产品的销量。他发现，如果在鞋上添朵花，就能够以更高价格把鞋子卖出去。然后，他开始倒腾其他的廉价物品，每次都在产品上添点什么设计。
当时三丽鸥公司预定推出一款小钱包，上面的图案希望能设计出一个崭新的人物。而堤提猫的第一代设计师清水侑子在设计之初想到小孩子喜欢的动物，不外乎小熊、小狗和小猫而已，由于前两者早已被推出过，因此她便决定采用最喜欢的猫咪了，因此这只系上红色蝴蝶结的可爱女孩便出现在钱包上，这个女孩竟一发不可收拾地流行起来。</p>
                        </div>
                        <div>
                            <p>Hello Kitty 最初是在1974年由Sanrio公司的设计师清水侑子设计的。约一年后清水离开了公司。Hello Kitty商标于1976年注册。第二位设计者米洼节子，一直设计直到1980年此项任务交给山口裕子。
Hello Kitty被给予了英国血统,因为当时英国文化很受日本女孩欢迎。Kitty的名字来源于刘易斯·卡罗尔（Lewis Carroll）所著爱丽丝镜中奇遇一书中爱丽丝养的一只猫。1999年被创造出的堤提猫的男友Dear Daniel，其灵感来源于1971年比吉斯参与歌曲创作并由马克·莱斯特出演Daniel的一部电影Melody 。
Hello Kitty的虚构世界包括一大堆朋友和家庭成员。从2004年开始，她还有了一个她自己称为Charmmy Kitty的宠物波斯猫和一只叫作Sugar的宠物仓鼠。 Charmmy很像Hello Kitty但是相比之下更像猫。
Hello Kitty是一个可爱的女孩，而并不是猫。草根式营销
此策略造就了Hello Kitty的深入人心。当年在推出Hello Kitty时，三丽鸥公司几乎没有做任何市场测试和广告宣传，而且，只要不给Kitty猫可爱单纯的形象抹黑，三丽鸥公司对任何产品（除了烟、酒及枪支）几乎都会答应给予使用授权。
Hello Kitty出名后，三丽鸥也很少刻意花费做广告，而是采用全方位行销的概念，Hello Kitty 被印在每一种你可以想像的产品，小至贴纸、笔、笔记本、衣服、玩具、手表、杯子、盘子、筷子、手机、烤面包机、垃圾桶，大至电脑、跑步机、汽车，甚至是可以让人们置身其中的冒险主题乐园！并偶尔利用限量商品来刺激收集行为与重复购买率。
Hello Kitty的成功同时也给她的商业合作伙伴带来了巨大的商业利益。三丽鸥向日本超过500家公司以及海外的数百家企业进行了授权。</p>
                                                      </div>
                        <div>
                            <p>

如今Hello Kitty独特的形象已经出现在约2.2万种不同的产品上，畅销40多个国家。2004年，麦当劳公司正式在餐厅推出了迷你堤提猫挂饰，不同的色彩搭配可爱的造型，立刻赢得了消费者的肯定。在台湾，由于麦当劳推出的迷你Kitty很抢手，是否为对方购买一套 Hello Kitty甚至成了情侣们认定对方是否爱自己的标志。新加坡的麦当劳顾客在排队买 Kitty 与她男友 Dear Daniel 为主题的快乐儿童餐时，甚至发生了暴动。
一系列有效的销售策略，令Hello Kitty的商业价值得到充分的发挥。据悉，Hello Kitty每年为版权所有者三丽欧公司创造5亿美元的利润，同时也为获得授权使用其形象的公司赚取了几十亿美元的收益。据说，美国微软公司曾设想开价 56 亿美元收买堤提猫的版权。甚至，她的影响溢出了商业领域－－台湾当局认同的政治口水事件、香港的 Kitty谋杀案、全球文化运动……直至有人拿她当论文的主题。“她就像我的吉祥符”，诚如好莱坞人气王斯佳丽·约翰逊所言，这个脸蛋圆圆的的纯真可爱的女孩在成就无数人的梦幻的同时也成就了自己的动漫商业王国。
这只原本是在廉价塑料钱包上出现的可爱猫女孩图案，如今已摇身一变成为在全球赚到盘满钵满的可爱偶像。而且，不要忘记，与机器猫“哆啦A梦”和加菲猫不同，Hello Kitty只是商品，是没有任何电影或漫画支撑的。这只世界上最具市场价值的猫同世界上最著名的一只狗——SNOOPY（史努比）、世界上最受欢迎的一只熊——Winnie Pooh（维尼）等卡通形象一样，长盛不衰的原因在于有能力创造不仅吸引小朋友，也掳获全球女性芳心的产品。
30多年来，这个可爱的女孩继续微笑着，让更多的孩子们喜欢上了她，也成为了许多孩子们最忠实的玩伴。当一代女孩长大成为母亲后，依旧会和她的女儿一样，喜欢着这个女孩——Hello Kitty。</P>                        </div>
                    </div>
                </div>
            </div>
            <div class="msgs_right">
                <h1>图文欣赏</h1>
                <ul>
                    <li>
                        <img src="image/1.png" alt="">
                    </li>
                    <li>
                        <img src="image/2.png" alt="">

                    </li>
                    <li>
                        <img src="image/3.png" alt="">

                    </li>
                     <li>
                        <img src="image/4.png" alt="">

                    </li>
                    <li>
                        <img src="image/5.png" alt="">

                    </li>
                    <li>
                        <img src="image/6.png" alt="">

                    </li>


                </ul>
            </div>
        </div>
        <div class="yeshu">
            <div class="number">
                <a href="#">上一页</a>
                <a href="#" class="kaung">1</a>
                <a href="#" class="kaung">2</a>
                <a href="#" class="kaung">3</a>
                <a href="#">下一页</a>
            </div>
        </div>
        <div class="banquanxinxi">
           HelloKitty
        </div>
    </div>
</body>

</html>

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

软件技术NINI

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
复制链接

扫一扫