web网页设计期末课程大作业：红色中国文化主题网站设计——灌篮高手(4页)HTML+CSS

于 2023-12-08 20:50:51 发布
阅读量76 收藏
点赞数
分类专栏： web课程设计 文章标签： 前端 css html javascript 课程设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq__3200628753/article/details/126213791
版权

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录🌰

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、代码展示😈

1.HTML代码结构 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<html>
<head>
<meta charset="UTF-8">
<title>灌篮高手</title>
<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
</head>
<body>
<div class="nav">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="jieshao.html">故事简介</a></li>
    <li><a href="renwu.html">人物介绍</a></li>
	<li class="fr"><a href="denglu.html">登录</a></li>
  </ul>
</div>
<div class="head"><img src="images/banner.jpg" width="100%"></div>
<div  class="main">
  <div class="fls" ><img src="images/5.jpg" width="300"><br>
  </div>
  <div class="rls">
    <div>
      <h2>基本信息</h2>
    </div>
    <div>《灌篮高手》是日本漫画家井上雄彦以高中篮球为题材的少年漫画，在《周刊少年JUMP》1990年42号至1996年27号上连载，单行本在17个国家和地区发行。与《足球小将》和《棒球英豪》合称为日本运动漫画三大巅峰之作。1995年，《灌篮高手》获日本第40届小学馆漫画奖；2006年，日本文化厅媒体艺术祭10周年纪念企划“日本的媒体艺术100选”，《灌篮高手》获得漫画部门第1位 [1]  ；2009年入选由中国图书商报和中国出版科研所联合评出的“新中国60年中国最具影响力的600本书” [2]  。<br>
      单行本初版销量达到250万套，一举创下当年的销量纪录 [3]  ，2004年8月在日本国内发行突破一亿册（包括重制完全版） [4]  ，是集英社创社以来继《乌龙派出所》（60卷时）、《龙珠》（40卷时）、《航海王》（36卷时）之后第四部发行量超过一亿册的漫画。同时也是日本漫画销量史上卷均第二高的作品（仅次于《航海王》）。<br>
    </div>
    <p ><a href="jieshao.html" class="gd">更多信息</a></p>
    <br>
    <div  align="center"> <img src="images/3.jpg" width="310" height="200"> <img src="images/4.jpg" width="310" height="200"> </div>
    <p><a href="renwu.html" class="gd">更多图片</a></p>
  </div>
  <div style="clear:both"></div>
</div>
<div class="end">灌篮高手</div>
</body>
</html>

2.CSS样式代码 🏠


/* CSS Document */
body{width:1000px; background-color:#CC6666; line-height:24px; font-size:13px; margin:0px auto}

.main{background:rgba(255,255,255,0.5)}
.fls{float:left; width:300px; margin-right:20px; }
.rls{float:right; width:640px; margin-right:20px; }
a{ text-decoration:none;}
ul,li{list-style:none; margin:0; padding:0;}
.nav{  background:#CC3333}
.nav li{ display:inline-block;  line-height:60px  }
.nav li a{color:#fff; font-size:22px; padding:10px 30px}

.end{ background:#CC0000; color:#fff; padding:11px 0; font-size:20px;  text-align:center}
.c li{ margin-top:30px; width:33%; float:left; text-align:center}
.c li img{ max-width:90%}

.gd{ background:#CC0000; color:#fff; padding:5px 10px }
.dl2{ font-size:21px;  margin:0 auto; background:#ffe2b0; padding:60px 0}

.dl2 span{ display:inline-block; width:100px; text-align:right; padding-right:15px;}
.dl2 div{ margin:10px 0}
.dl2 input{ padding:7px 10px; border:#996666 solid 1px;}
#submit{ width:240px; background:#CC3333; color:#fff}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

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

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

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

IT-北溟有鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端网页设计期末课程大作业：旅游网页主题网站设计——三亚旅游网页设计(6个页面) HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web网页设计期末课程大作业——HTML+CSS+JavaScript美食餐饮文化主题网站设计与实现
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） 【查看更多源码地址】：https://blog.csdn.net/QQ_____365392777?type=blog
web前端期末大作业：云南旅游网页主题网站设计——云南城市旅游5页HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web网页设计期末课程大作业：美食餐饮文化主题网站设计——中华美德6页面HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） 【查看更多源码地址】：https://blog.csdn.net/QQ_____365392777?typ
web前端期末大作业：体育网页主题网站设计——体育兵乓球5页面HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web前端网页设计期末课程大作业：企业网页主题网站设计——舞蹈培训11页HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web网页设计期末课程大作业：家乡旅游主题网站设计——河北8页HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web网页设计期末课程大作业：美食餐饮文化主题网站设计——HTML+CSS+JavaScript美食餐厅网站设计与实现 11页面
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 ...
web网页设计期末课程大作业：旅游网页主题网站设计——中国风的温泉酒店预订网(13页)HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web网页设计期末课程大作业：水果网站设计——HTML+CSS+JavaScript水果超市(带论文)
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） 【查看更多源码地址】：https://blog.csdn.net/QQ_____365392777?typ
web网页设计期末课程大作业：动漫主题网站设计——关于我转生史莱姆这件事(6页)HTML+CSS
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web网页设计期末课程大作业：环境保护主题网站设计——农业三级带表单带js(14页)HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web前端网页设计期末课程大作业：中华传统文化题材网页源码——基于HTML实现中国水墨风书画艺术网站(12个页面)
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web网页设计期末课程大作业——电影介绍5页HTML+CSS制作
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域...
web前端网页设计期末课程大作业：关于城市旅游的HTML网页设计 ——北京
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
期末前端web大作业：餐饮美食网站设计与实现——HTML+CSS+JavaScript美食餐饮网站 3页面
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
html5期末大作业:商城网页设计——仿京东商城网页端模板(8页面) html+css+javascr
最新发布
11-17
作为HTML5期末大作业的一部分，我设计了一个商城网页，仿照京东商城的网页端模板，一共设计了8个页面。这个网页是用HTML、CSS和JavaScript来完成的。 首先，我设计了一个主页，用来展示商城的一些热门商品和促销活动。在主页上，我使用了HTML来构建页面的结构，然后使用CSS来设计页面的样式，比如布局、颜色、字体等，最后使用JavaScript来给页面添加一些动态效果，比如轮播图和商品的动态展示。 在主页的基础上，我还设计了商品列表页面，用来展示所有的商品信息；商品详情页面，用来展示单个商品的详细信息和用户评价；购物车页面，用来展示用户已经选择的商品和进行下单操作；订单确认页面，用户在这里可以查看并确认自己的订单信息；个人中心页面，用户可以在这里管理自己的个人信息和订单信息；登录页面和注册页面，用户可以在这里进行账号的登录和注册操作。 在整个设计过程中，我努力保持页面的整体风格和布局与京东商城网页端模板一致，同时也增加了一些自己的创意和改进，使得整个网页更加适合现代用户的需求和使用习惯。 总的来说，通过这个大作业的设计，我对HTML5、CSS和JavaScript的运用有了更加深入的理解和实践，同时也练习了大型项目的开发流程和团队协作能力，收获颇丰。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值