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

软件技术NINI2024-06-02 17:07

一、👨‍🎓网站题目

卡通网站的设计与制作。

二、✍️网站描述

小猪佩奇主题的网页 一共五个个页面

  • 小猪佩奇网页使用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">
<style>
body {
    /* background: url(); */
    background-color: eac1d7;
}

.container {
    width: 1000px;
    margin: 0 auto;
}

header {
    width: 100%;
    height: 60px;
    z-index: 999;
}

header .container {
    display: flex;
    height: 100%;
}

header .nav_left {
    display: flex;
    width: 400px;
    height: 100%;
}

header .nav_left img {
    width: 200px;
    height: 50px;
    margin-top: 5px;
    padding-right: 10px;
    border-right: 1px solid #eac1d7;
}

header .nav_left .logo_text {
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

header .container .nav_right {
    width: 600px;
    height: 100%;
}

.two {
    width: 90px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#main {
    /* overflow: auto; */
    text-align: center;
}

#main a {
    text-decoration: none;
    display: inline-block;
    height: 60px;
    width: 100px;
    line-height: 60px;
}

ul {
    list-style: none;
}

#list {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    vertical-align: bottom;
    height: 60px;
    width: 600px;
}

#list li {
    float: left;
    height: 60px;
    line-height: 60px;
}

a:hover {
    color: #ffff;
}

#list li ul {
    display: none;
    position: absolute;
}

#list li:hover ul {
    display: block;
}

.two {
    z-index: 99999;
    background-color: #eac1d7;
    height: 240px;
    width: 100px;
}

.two li,
.two li a {
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.two li a:hover {
    color: #fff;
}

#list li:hover,
#list>li:hover .two li:hover {
    background-color: #4fb8e9;
}


/* banner/ */
.b {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 400px;
    background: url(../img/banner1.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.banner {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 400px;
    background: url(../img/banner.jpg) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.banner .container {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    margin: 0 auto;
}

.nav {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    line-height: 60px;
    text-align: center;
    background-color: rgba(0, 0, 0, .4);
    margin: 0 auto;
    padding: 0 17%;
    box-sizing: border-box;
}

.nav a {
    flex: 1;
    color: #4fb8e9;
}

.nav a:hover {
    background-color: #FFF;
}


/* content */

.content .container {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.first_area {
    width: 100%;
    text-align: center;
}

.content .container h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: normal;
}

.content .container p {
    color: #333;
    line-height: 2;
}

.container .map {
    width: 95%;
    margin-bottom: 50px;
}

.content .tools {
    display: flex;
    height: 100px;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 100px;
}

.tools .item {
    width: 280px;
    height: 100%;
    border: 1px solid #4fb8e9;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    font-size: 12px;
    text-align: center;
    color: #666;
}

.tools .item img {
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
}

.two_area {
    width: 90%;
    margin: 0 auto;
}

.two_area .two_title {
    width: 100%;
    background-color:#4fb8e9;
    margin: 0 auto;
    height: 30px;
    padding: 5px;
    line-height: 30px;
    color: #fff;
}

.two_area .two_title img {
    height: 30px;
    margin-right: 10px;
}

.two_container .list {
    width: 700px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.two_container .two_item {
    width: 300px;
    height: 70px;
    margin: 30px 50px 0 0;
    display: flex;
    flex-direction: column;
    color: #666;
}

.two_container .two_item input {
    display: inline-block;
    height: 25px;
    margin-top: 10px;
    border-radius: 2px;
    border: 1px solid #4fb8e9;
}

.two_container .submit {
    width: 700px;
    background-color: #4fb8e9;
    color: #fff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 5px;
}

footer {
    width: 100%;
}

footer .footer_top {
    height: 60px;
    background-color: #4fb8e9;
}

footer .bot_nav {
    display: flex;
    height: 60px;
    line-height: 40px;
    text-align: center;
}

footer .bot_nav a {
    flex: 1;
    color: #fff;
    width: 100%;
    height: 40px;
    line-height: 40px;
}

.footer_bottom {
    width: 100%;
    height: 300px;
    background-color: #eac1d7;
}

.footer_bottom .container {
    height: 100%;
    background: url(../img/footer4.png) no-repeat;
}
</style>
<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>
    
</head>

<body>
    <header>
        <div class="container">
            <div class="nav_left">
                <div class="logo_text">
                    <span>小猪佩奇</span>
                </div>
            </div>

            <div id="main">
                <ul id="list">
                    <li>
                        <a rel="nofollow" href="index.html">首页</a>
                    </li>
                     <li>
                     <a rel="nofollow" href="../小猪佩奇/juese.html">角色介绍</a>
                   
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <div class="banner">
 <img src="img/banner.jpg" alt="" class="map" style="    padding: 0;
    margin: 0;
    width: 100%;
    height: 400px;
    background-size: 100% 100%;
    position: relative;">
        <div class="container">
            <div class="nav">
                <a href="">猪爸爸</a>
                <a href="">猪妈妈</a>
                <a href="">佩奇</a>
                <a href="">乔治</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <div class="first_area">
                <P>小猪佩奇是一只可爱的粉色小猪，她与弟弟乔治、爸爸、妈妈快乐地住在一起。小猪佩奇最喜欢做的事情是玩游戏，打扮的漂漂亮亮，度假，以及住在小泥坑里快乐的跳上跳下。除了这些，她还喜欢到处探险，虽然有些时候会遇到一些小状况，但总可以化险为夷，而且都会带给大家意外的惊喜</P>
<P>2022年3月12日，据英国"天空"新闻网站称，俄罗斯一家法院裁定，俄罗斯企业可以使用小猪佩奇的商标而不受惩罚。
"Rapsinews"新闻网等多家俄罗斯媒体11日也报道称，俄罗斯法院3月2日驳回了英国官方小猪佩奇商标及著作权全球权利人------娱乐壹英国有限公司（Entertainment One UK Limited）的上诉。
俄罗斯"Pravo.ru"网站报道称，这项裁定针对的是，娱乐壹英国有限公司起诉俄罗斯企业家伊万·科热夫尼科夫一案。娱乐壹英国有限公司要求科热夫尼科夫就使用"小猪佩奇"动画片中的角色形象赔偿20000卢布以及诉讼费用等。</P>
<video width="320" height="240" controls autoplay>
  <source src="../小猪佩奇/img/视频/视频.mp4" type="video/mp4">
  <source src="../小猪佩奇/img/视频/视频.mp4" type="video/ogg">
  <source src="../小猪佩奇/img/视频/视频.mp4" type="video/webm">
  您的浏览器不支持 video 属性。
</video>
<video width="320" height="240" controls autoplay>
  <source src="../小猪佩奇/img/视频/2.mp4" type="video/mp4">
  <source src="../小猪佩奇/img/视频/2.mp4" type="video/ogg">
  <source src="../小猪佩奇/img/视频/2.mp4" type="video/webm">
  您的浏览器不支持 video 属性。
</video>
                <img src="img/map.jpg" alt="" class="map">
            </div>

            <div class="tools">
                <div class="item">
                    <span>猪爸爸猪妈妈信件箱</span>
                    <img src="img/local.png" alt="">
                </div>
                <div class="item">
                    <span>佩奇信件箱</span>
                    <img src="img/tel.png" alt="">
                </div>
                <div class="item">
                    <span>乔治信件箱子</span>
                    <img src="img/earth.png" alt="">
                </div>
            </div>

            <div class="two_area">
                <div class="two_title">
                    <img src="img/tel.png" alt=""> 在线留言
                </div>
                <div class="two_container">
                    <div class="list">
                        <div class="two_item">
                            <span>昵称</span>
                            <input type="text" height="30">
                        </div>
                        <div class="two_item">
                            <span>地址</span>
                            <input type="text">
                        </div>
                        <div class="two_item">
                            <span>电话</span>
                            <input type="text">
                        </div>
                        <div class="two_item">
                            <span>留言</span>
                            <input type="text">
                        </div>
                    </div>

                    <div class="submit">提交</div>


                </div>

            </div>
        </div>
    </div>

    <footer>
        <div class="footer_top" id="main">
            <div>小猪佩奇</div>
    
     
    </footer>
</body>

</html>

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

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

七、🎁更多干货

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

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

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：

:3021557545

绿泡泡：XiaoMei_NN

4.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦

文出处链接和本声明。

相关推荐
桂月二二28 分钟前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062062 小时前
ubuntu向一个pc主机通过web发送数据，pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb2 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角2 小时前
CSS 颜色
前端·css
浪浪山小白兔3 小时前
HTML5 新表单属性详解
前端·html·html5
lee5763 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579653 小时前
AI赋能Flutter开发：ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me4 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者4 小时前
如何构建一个简单的React应用？
前端·react.js·前端框架
qq_392794484 小时前
前端缓存策略：强缓存与协商缓存深度剖析
前端·缓存
热门推荐
01centos7 init.d 和system.d02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04xgboost: Why not implement distributed XGBoost on top of spark05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06密码学原理技术-第六章-introduction to pulibc-key cryptography07PyTorch AMP 混合精度中grad_scaler.py的scale函数解析08Windows10安装PCL1.14.0及点云配准09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10如何实现抖音直播弹幕抓取（PHP版本）