时间：2023-09-21 03:36:01 | 来源：网站运营
时间：2023-09-21 03:36:01 来源：网站运营
学生动漫网页设计模板下载 海绵宝宝大学生HTML网页制作作品 简单漫画网页设计成品 dreamweaver学生网站模板 静态HTML网页单页制作 dreamweaver网页设计与制作代码：HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
在线咨询
<!DOCTYPE html><html><head><meta charset="utf-8"><link type="text/css" rel="stylesheet" href="css/style.css" /><title>海绵宝宝</title></head><body><div class="wrapin"> <!--头部--> <header> <ul class="nav clearfix"> <li><a href="index.html">首页</a></li> <li><a href="juqing.html">剧情简介</a></li> <li><a href="juese.html">角色介绍</a></li> <li><a href="tupian.html">图片鉴赏</a></li> <li><a href="jingchai.html">精彩片段</a></li> </ul> </header> <div class="banner"> <img src="images/banner_1.jpg"/> </div> <!--内容--> <div class="con"> <div class="top clearfix"> <div class="text"> <h2>海绵宝宝</h2> <P>《海绵宝宝》（SpongeBob SquarePants）是一部由舍曼·科恩、沃特·杜赫、山姆·亨德森、保罗·蒂比特等导演，汤姆·肯尼、比尔·法格巴克、罗杰·布帕斯等配音的美国喜剧动画，于1999年7月17日在尼克国际儿童频道开播 。 <br> 《海绵宝宝》的故事情节主要围绕着主角海绵宝宝和他的好朋友派大星、邻居章鱼哥、上司蟹老板等人展开，场景设定于太平洋海底，一座被称为比奇堡的城市。2005年1月30日，该片荣获第32届安妮奖授予的“最佳TV动画制作”奖 。 <br> 这部动画除了固定描绘的卡通场景与人物之外，也会穿插一些真实的物件或人物：例如曾出演《海滩游侠》与《霹雳游侠》的大卫·哈塞尔霍夫，以本人的身份出演了几集。但海绵宝宝卡通的内容基本上与海洋知识无关，甚至夸大到完全不合乎科学与常识，例如海底生火、海底冲澡等，剧集内容也会时不时的嘲笑精致艺术和章鱼哥的劳工权益想法。</P> </div> <div class="pic"> <img src="images/img_03.jpg"/> </div> </div> <div class="tupian"> <div class="title"> <h2>图片鉴赏</h2> </div> <ul class="clearfix"> <li><img src="images/img_03.jpg"/></li> <li><img src="images/img_04.jpg"/></li> <li><img src="images/img_05.jpg"/></li> </ul> </div> </div> <!--底部--> <footer> <p>海绵宝宝</p> </footer></div></body></html>/*通用类*/* { margin: 0; padding: 0;}body { margin: 0 auto; font-size: 14px; background: #fff4e8; color: #333; position: relative;}img { border: none;}a { cursor: pointer; color: #333; text-decoration: none; outline: none;}ul { list-style-type: none;}em { font-style: normal;}.lt { float: left;}.rt { float: right;}div.clear { font: 0px Arial; line-height: 0; height: 0; overflow: hidden; clear: both;}.clearfix::after { content: ""; display: block; clear: both;}/*wrapin 主体容器宽度*/.wrapin { width: 1000px; margin-left: auto; margin-right: auto;}header { height: 50px; background: #feda3b;}.nav li { line-height: 50px; float: left; width: 20%; text-align: center; font-size: 16px;}.nav li a { color: #333;}.banner { display: block;}.banner img { width: 100%; display: block;}.con { padding: 15px; background: #fff;}.top .text { float: left; width: 60%; line-height: 26px;}.top .pic { float: right; width: 38%; margin-top: 20px;}.top .pic img { width: 100%;}.title { padding: 20px 0;}.title h2 { color: #6b4c15;}.tupian ul { margin: 0 -15px;}.tupian ul li { width: 33.33%; float: left; padding: 15px; box-sizing: border-box;}.tupian ul li img { width: 100%; height: 230px; object-fit: cover;}footer { background: #feda3b; text-align: center; line-height: 50px;}.juese li { position: relative; height: 200px;}.juese li .pic { height: 160px; width: 160px; position: absolute; left: 0; top: 20px; border-radius:160px; overflow:hidden; border:1px solid #333;}.juese li .pic img { height: 100%; width: 100%; object-fit:cover;}.juese li .text{ margin-left:180px; padding-top:30px;}.juese li .text h2{ margin-bottom:10px;}.juese li .text p{ line-height:26px;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：设计,作品,大学生,简单,漫画,模板,学生
