项目概述
项目一：海绵宝宝第一套
- 项目规模：大型综合网站
- 页面数量：8个主要页面
- 技术栈：HTML5 + CSS3
- 特色功能：用户系统、视频播放、音乐播放、图集展示
项目二：海绵宝宝第二套
- 项目规模：中型展示网站
- 页面数量：5个主要页面
- 技术栈：HTML5 + CSS3
- 特色功能：角色介绍、剧情展示、图片鉴赏
此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
1. 文件结构设计
第一套项目结构：
01 海绵宝宝 第一套/
├── css/
│ ├── common.css # 公共样式
│ └── style.css # 主样式文件
├── images/ # 图片资源
├── music/ # 音频资源
├── video/ # 视频资源
├── index.html # 首页
├── login.html # 登录页
├── register.html # 注册页
├── role_intro.html # 角色介绍
├── atlas.html # 图集欣赏
├── video.html # 在线视频
├── classicline.html # 经典台词
├── awards.html # 获奖记录
└── contactus.html # 联系我们
第二套项目结构：
01 海绵宝宝 第二套/
├── images/ # 图片资源
├── index.html # 首页
├── juqing.html # 剧情简介
├── juese.html # 主人公介绍
├── tupian.html # 图片鉴赏
├── jingcai.html # 精彩片段
└── style.css # 样式文件
2. 作品演示
3. 部分代码演示
HTML
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/style.css">
<title>海绵宝宝</title>
</head>
<body>
<div class="top">
<ul class="loginbar clearboth container">
<li><a href="index.html">SPONGE<span>BOB.</span></a></li>
<li> | <a href="rigister.html">注册</a></li>
<li><a href="login.html">登录</a></li>
</ul>
</div>
<div id="header">
<ul class="nav clearboth container">
<li><a href="index.html">首页</a></li>
<li><a href="role_intro.html">角色介绍</a></li>
<li><a href="atlas.html">图集欣赏</a></li>
<li><a href="video.html">在线视频</a></li>
<li><a href="classicline.html">经典台词</a></li>
<li><a href="awards.html">获奖记录</a></li>
<li><a href="contactus.html">联系我们</a></li>
</ul>
</div>
<div class="banner-wrapper clear"></div>
<div class="container">
<div class="column-title">
<h2>剧情简介</h2>
</div>
<div class="column-one-content">
<div class="column-one-text column-text">
<p>海绵宝宝是方块形的黄色海绵，住在比基尼海滩(裤头村、比奇堡)的一个菠萝里，他的宠物是一只会"猫~猫~"叫的海蜗牛小蜗，海绵宝宝喜欢捕捉水母，职业是蟹堡王(The Krusty
Krab)里的头号厨师。派大星和姗迪都是他的朋友。海绵宝宝总是能给平静的世界制造麻烦，虽然闹出一些笑话，不过他总能摆脱困境，然后又制造出新的麻烦。</p>
</div>
</div>
<div class="column-two clearboth">
<div class="column-title">
<h2>动画制作</h2>
</div>
<div class="column-two-card left">
<h2>01</h2>
<h3>导演</h3>
<p>舍曼·科恩、沃特·杜赫、山姆·亨德森、杰·朗德、Dan Povenmire、保罗·蒂比特</p>
</div>
<div class="column-two-card left">
<h2>02</h2>
<h3>副导演</h3>
<p>卢克·史卡利</p>
</div>
<div class="column-two-card left">
<h2>03</h2>
<h3>编剧</h3>
<p>史蒂芬·海伦伯格、蒂姆·希尔、肯特·奥斯本、史蒂文·班克斯、彼得·伯恩斯</p>
</div>
<div class="column-two-card left">
<h2>04</h2>
<h3>摄影</h3>
<p>布莱恩·查康、Ralph Kaechele</p>
</div>
<div class="column-two-card left">
<h2>05</h2>
<h3>剪辑</h3>
<p>罗比·罗伯茨、Bradley Carow、米兰达·尤瑟夫</p>
</div>
<div class="column-two-card right">
<h2>06</h2>
<h3>服装设计</h3>
<p>罗宾·沃尔什</p>
</div>
</div>
<div class="column-three clear">
<div class="column-title">
<h2>《海绵宝宝》片头</h2>
</div>
<div class="index-video">
<video src="video/index.mp4" width="100%" height="100%" controls></video>
</div>
</div>
<div class="column-four">
<div class="column-title">
<h2>《海绵宝宝》建筑</h2>
</div>
<div class="column-four-content clearboth">
<div class="column-four-img">
<img src="images/index1.jpg" alt="">
</div>
<div class="column-four-img">
<img src="images/index2.jpg" alt="">
</div>
<div class="column-four-img">
<img src="images/index3.jpg" alt="">
</div>
<div class="column-four-img">
<img src="images/index4.webp.jpg" alt="">
</div>
<div class="column-four-img">
<img src="images/index5.jpg" alt="">
</div>
<div class="column-four-img">
<img src="images/index6.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="copyright">
版权声明©2023My.All Rights Reserved
</div>
</body>
</html>
CSS
/* 登录 注册界面 */
#bg-box{
position: relative;
width: 100%;
height: 100vh;
}
#bg-box::after{
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: url(../images/banner1.jpg) no-repeat center/cover;
filter: blur(4px);
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - 35px);
}
.register-form{
position: relative;
width: 400px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.form-header {
text-align: center;
margin-bottom: 30px;
}
.form-header h2 {
color: #09d2fe;
font-size: 28px;
margin-bottom: 10px;
}
.form-header p {
color: #666;
font-size: 14px;
}
.form-body {
padding: 0 15px;
}
.account-bar {
margin-bottom: 20px;
position: relative;
}
.account-bar label {
display: block;
margin-bottom: 8px;
color: #333;
font-size: 14px;
}
.account-bar input[type="text"],
.account-bar input[type="email"],
.account-bar input[type="password"] {
width: 100%;
height: 40px;
padding: 0 15px;
border: 2px solid #e0e0e0;
border-radius: 5px;
font-size: 14px;
transition: all 0.3s ease;
box-sizing: border-box;
}
.account-bar input:focus {
border-color: #09d2fe;
outline: none;
box-shadow: 0 0 0 3px rgba(9, 210, 254, 0.1);
}
.remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.remember-me {
display: flex;
align-items: center;
color: #666;
font-size: 14px;
}
.remember-me input[type="checkbox"] {
margin-right: 6px;
}
.forgot-password {
color: #09d2fe;
font-size: 14px;
text-decoration: none;
transition: color 0.3s ease;
}
.forgot-password:hover {
color: #0281E8;
text-decoration: underline;
}
.submit-bar {
margin: 25px 0;
}
.submit-bar input[type="submit"] {
width: 100%;
height: 44px;
background-color: #09d2fe;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-bar input[type="submit"]:hover {
background-color: #0281E8;
}
.register-link {
text-align: center;
color: #666;
font-size: 14px;
}
.register-link a {
color: #09d2fe;
text-decoration: none;
margin-left: 5px;
transition: color 0.3s ease;
}
.register-link a:hover {
color: #0281E8;
text-decoration: underline;
}
/* 角色介绍 */
.role-card-wrapper{
margin-bottom: 40px;
justify-content: space-between;
flex-wrap: wrap;
}
.role-card{
width: 31%;
}
.role-img{
height: 372px;
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.137);
box-sizing: border-box;
}
.role-img img{
height: 100%;
}
.role-text{
padding: 20px;
}
.role-text h3{
color: #0281E8;
padding-bottom: 10px;
}
.role-card-wrapper2{
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.137);
box-sizing: border-box;
}
.role-card-wrapper2{
align-items: center;
margin-bottom: 40px;
}
.role-card-wrapper2 .role-img2{
width: 25%;
}
.role-img2 img{
width: 100%;
}
.role-card-wrapper2 .role-text{
flex: 1;
}
/* 图集欣赏 */
.atlas-wrapper img:hover{
filter: brightness(1);
}
.phone-img-wrapper,
.computer-img-wrapper
{
flex-wrap: wrap;
justify-content: space-between;
}
.phone-img-wrapper img{
width: 19%;
margin-bottom: 15px;
filter: brightness(0.9);
}
.computer-img-wrapper img{
width: 32.5%;
height: 220px;
margin-bottom: 15px;
filter: brightness(0.8);
}
.computer-img-wrapper{
margin-bottom: 25px;
}
/* 在线视频 */
.video-container{
background: url(../images/bg.png) no-repeat center/cover;
}
.video-container .column-title h3{
border-left-color: #ffee34;
}
.online-video a{
display: inline-block;
margin-bottom: 20px;
color: #034CFF;
text-decoration: underline;
}
.online-video a:hover{
color: #ffee34;
text-shadow: 0 0 5px gray;
}
.video-top-left{
width: 70%;
}
.video-top-right{
flex: 1;
padding: 30px;
}
.video-top-right h2{
margin-bottom: 30px;
}
.video-column-music ul>li{
margin-bottom: 10px;
}
.video-column-music p{
display: inline-block;
width: 70%;
height: 54px;
line-height: 54px;
vertical-align: middle;
font-size: 16px;
border-bottom: 1px solid #0281E8;
}
.video-column-music p:hover{
color: #ffee34;
cursor: pointer;
}
.video-column-music audio{
width: 20%;
margin-left: 20px;
vertical-align: middle;
}
.video-clip-card-wrapper{
margin-bottom: 40px;
flex-wrap: wrap;
justify-content: space-between;
}
.video-clip-card{
width: 19%;
}
.video-clip-v video{
border-radius: 15px;
vertical-align: top;
}
.video-clip-t p{
padding: 10px 0;
}
4. 源码地址
分享文件：海绵宝宝.zip
链接：https://pan.xunlei.com/s/VOS2KLBawRXrHZuAppFmWvZqA1
提取码：nvea
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
