一、👨🎓网站题目
卡通网站的设计与制作。
二、✍️网站描述
小猪佩奇主题的网页 一共五个个页面
- 小猪佩奇网页使用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.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦
文出处链接和本声明。
