期末前端web大作业——名侦探柯南网页制作 Hbuiderx制作网页 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业

最新推荐文章于 2024-06-17 16:21:18 发布
最新推荐文章于 2024-06-17 16:21:18 发布
阅读量836 收藏 17
点赞数 21
文章标签： 前端 课程设计 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38514354/article/details/136648520
版权

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

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖

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

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

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

一、网页效果🌌

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

二、代码展示😈

1.HTML代码结构 🧱

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="web">
<div class="top">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="renwu.html">热门人物</a></li>
<li><a href="tuijian.html">热门推荐</a></li>
<li><a href="denglu.html">会员登陆</a></li>
<li><a href="zhuce.html">会员注册</a></li>
</ul>
</div>
<div class="sous">
<form>
<input class="inut" />
<button class="btn"></button>
</form>
</div>
</div>

<div class="banner">
<img src="images/banner.jpg" />
</div>
<div class="box1">
<div class="bx">
<img src="images/img1.jpg" />
<p>热门连载</p>
</div>
<div class="bx">
<img src="images/img2.jpg" />
<p>最新更新</p>
</div>
<div class="bx">
<img src="images/img3.jpg" />
<p>新番动漫</p>
</div>
<div class="bx">
<img src="images/img4.jpg" />
<p>经典完结</p>
</div>
</div>
<div class="tit">热门动漫人物</div>
<div class="box2">
<div class="bx2">
<img src="images/img5.jpg" />
哆唻A梦
</div>
<div class="bx2">
<img src="images/img6.jpg" />
漩涡鸣人
</div>
<div class="bx2">
<img src="images/img7.jpg" />
江户川柯南
</div>
<div class="bx2">
<img src="images/img8.jpg" />
宇智波佐助
</div>
<div class="bx2">
<img src="images/img9.jpg" />
野比大雄
</div>
</div>
<div class="tit">经典动漫</div>
<div class="box3">
<div class="bx3">
<img src="images/img10.jpg" />
<p>哆啦A梦</p>
<p>ドラえもん</p>
</div>
<div class="bx3">
<img src="images/img11.jpg" />
<p>火影忍者</p>
<p>NARUTO -ナルト-</p>
</div>
<div class="bx3">
<img src="images/img12.jpg" />
<p>名侦探柯南</p>
<p>名探偵コナン</p>
</div>
</div>
<div class="tit">最新更新</div>
<div class="box4">
<div class="bx4">
<img src="images/img13.jpg" />
</div>
<div class="bx4">
<img src="images/img14.jpg" />
</div>
<div class="bx4">
<img src="images/img15.jpg" />
</div>
</div>
<div class="foot">
<p>Copyright&copy;经典动漫网版权所有Rights Reserved.</p>
</div>
</div>
</body>
</html>

2.CSS样式代码 🏠


body {
	margin: 0 auto;
	font-size: 12px;
	font-family: "微软雅黑",arial;
	line-height: 22px;
	background: #e0ecfa;
}

div,p,input,li,h1,h2,h3,h4,h5 {
	height: auto;
	margin: 0;
	padding: 0px;
	vertical-align: middle;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

.web {
	width: 1140px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	background: #FFF;
	padding: 0px 30px;
}

.top {
	height: 55px;
	padding-top: 15px;
}

.logo {
	width: 116px;
	height: 39px;
	float: left;
	margin-right: 50px;
}

.nav {
	width: 720px;
	height: 39px;
	float: left;
}

.nav ul {
	padding: 0px;
	margin: 0;
}

.nav ul li {
	height: 39px;
	line-height: 39px;
	float: left;
	margin: 0px 20px;
}

.nav ul li a {
	font-size: 18px;
	color: #000;
}

.sous {
	width: 140px;
	height: 39px;
	float: right;
}

.inut {
	width: 110px;
	height: 39px;
	border: none;
	border-bottom: 1px solid #000;
	float: left;
}

.btn {
	width: 30px;
	height: 30px;
	background: url(../images/btn.jpg) no-repeat;
	border: none;
	margin-top: 10px;
}

.banner {
	width: 1140px;
	height: 364px;
	margin-bottom: 25px;
}

.box1 {
	width: 910px;
	height: 90px;
	margin: 0 auto;
	margin-bottom: 40px;
}

.box1 .bx {
	width: 88px;
	height: 90px;
	float: left;
	margin: 0px 60px;
	text-align: center;
	font-size: 14px;
}

.box1 .bx img {
	margin-bottom: 10px;
}

.tit {
	height: 60px;
	line-height: 60px;
	padding-left: 20px;
	font-size: 26px;
	margin-bottom: 15px;
	color: #464543;
}

.box2 {
	height: 250px;
}

.box2 .bx2 {
	width: 193px;
	height: 250px;
	float: left;
	margin: 0px 17px;
	text-align: center;
	font-size: 16px;
}

.box2 .bx2 img {
	margin-bottom: 15px;
}

.box3 {
	height: 270px;
}

.box3 .bx3 {
	width: 337px;
	height: 270px;
	float: left;
	margin: 0px 18px;
}

.box3 .bx3 img {
	margin-bottom: 10px;
}

.box3 .bx3 p {
	line-height: 25px;
	font-size: 16px;
}

.box4 {
	height: 305px;
}

.box4 .bx4 {
	width: 337px;
	height: 305px;
	float: left;
	margin: 0px 18px;
}


	width: 300px;
	font-size: 16px;
	margin-top: 25px;
	height: 42px;
	border: 0;
	overflow: hidden;
	vertical-align: middle;
	line-height: 42px;
	color: #fff;
	background: url(../images/ico7.png) no-repeat;
}

.jies {
	width: 1140px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
}

.lv-box {
	height: 225px;
	padding: 20px 0px;
}

.lv-box img {
	width: 300px;
	height: 203px;
	float: left;
	margin-right: 20px;
}

.lv-box-r {
	width: 820px;
	height: 225px;
	float: left;
}

.lv-box .lv-tit {
	font-size: 16px;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
}

.lv-box p {
	font-size: 14px;
	line-height: 30px;
	float: left;
	text-indent: 2em;
}

.lv-box a {
	color: #000;
}

.lv-box span {
	height: 50px;
	line-height: 50px;
	float: right;
	margin-right: 20px;
}

.lv-box span a {
	color: #F00;
}

.nr {
	width: 1140px;
	height: auto;
	overflow: hidden;
	background: #FFF;
	padding-top: 20px;
	padding-bottom: 20px;
}

.neititle {
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	text-align: center;
	border-bottom: #CCC 1px dashed;
	margin-bottom: 20px;
}

.llbx1 {
	height: auto;
	overflow: hidden;
	margin-bottom: 30px;
}

.img1 {
	margin: 0px 20px;
	float: left;
	float: left
}

.img2 {
	margin: 0px 20px;
	float: left;
	float: right;
}

.llbx1 p {
	font-size: 16px;
	line-height: 30px;
	text-indent: 2em;
}

三、个人总结😊

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

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

四、更多干货🚀

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

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

3.以上内容技术相关问题😈欢迎一起交流学习🔥在这里插入图片描述

html5网页设计
关注
  • 21
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
HTML网页设计
07-31 5万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
明日科技后台js文件
hyty的博客
11-17 785
amazeui.min.js /*! Amaze UI v2.3.0 | by Amaze UI Team | (c) 2015 AllMobilize, Inc. | Licensed under MIT | 2015-04-08T06:04:29 UTC */ !function t(e,i,n){function o(a,r){if(!i[a]){if(!e[a]){var l="func...
web前端网页设计作品web期末大作业web前端作业网页制作代码web大作业制作网页代码
07-10
临近期末, 你是否还在为HTML网页设计期末...多套(HTML+CSS+JS)网页设计的学生期末大作业，都符合学校或者学生考试期末作业的水平，都是div+css框架代码写的，可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载!
期末前端web大作业——我的家乡陕西介绍网页制作源码
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
web前端期末大作业——基于HTML+CSS制作河南旅游网页设计
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
Web网页设计制作-毕业设计期末大作业-HTML、CSS、JavaScript前端网页项目源码
06-15
Web网页设计制作-毕业设计期末大作业-HTML、CSS、JavaScript前端网页项目源码，非常精美的个人手打98分静态网页设计项目源码，看存储大小就知道足够精美，代码完整下载即用无需修改，确保可以运行。 Web网页设计...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码H20.zip
05-09
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 481
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1476
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 587
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
lyd的博客
06-15 440
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
web前端拖拽工具：探索其复杂性、困惑度与爆发度
liyrbtqe_66w的博客
06-12 449
综上所述，Web前端拖拽工具虽然带来了便捷和效率，但同时也伴随着一定的复杂性、困惑度和挑战。对于开发者来说，深入了解拖拽工具的技术原理和应用场景，掌握其使用方法和优化技巧，是提升开发效率和降低项目风险的关键所在。然而，在实际项目中，由于项目需求、技术栈以及团队协作等多种因素的影响，开发者可能会遇到各种复杂的问题和挑战。然而，随着功能的增多和复杂化，开发者在使用拖拽工具时可能会遇到一些困惑和挑战。同时，随着Web组件化、模块化等趋势的普及，拖拽工具也可能会朝着更加标准化、可复用的方向发展。
Web前端写随机抽奖：技术与创意的碰撞
yvnmth_025y的博客
06-16 300
这些创意构思不仅能够提升抽奖活动的趣味性和互动性，还能够吸引更多的用户参与。除了基本的抽奖功能和界面设计外，我们还需要关注用户的交互体验。同时，我们还要确保抽奖过程的公平性和透明度，避免出现任何作弊行为。通过构建合理的抽奖逻辑、设计美观的界面、优化交互体验以及拓展创意构思，我们可以为用户带来更加有趣和丰富的抽奖体验。在Web前端的世界里，随机抽奖功能不仅是一种常见的交互元素，更是技术与创意的完美结合。下面，我们将从四个方面、五个方面、六个方面和七个方面，深入探讨Web前端实现随机抽奖的技术要点和创意构思。
qml实现点击按钮往Columnt添加一个组件对象
海涛高软
06-17 171
FR：徐海涛(hunkxu)
【React】React 的StrictMode作用是什么，怎么使用？
最新发布
读心悦
06-17 121
React的是一个用于在开发环境中检测潜在问题的工具，它可以帮助开发者在开发阶段识别并解决一些常见的编码问题，从而提高代码质量和应用的可靠性。以下是。
Web网页前端教程免费：引领您踏入编程的奇幻世界
rteybftr_mjku的博客
06-12 714
您将学习JavaScript的基础知识，包括变量、函数、条件语句等，以及如何使用JavaScript实现页面交互、表单验证、动画效果等功能。通过这一阶段的学习，您的网页将变得更加生动有趣，吸引更多用户的关注。在本教程的最后阶段，我们将向您介绍一些常用的前端框架和工具，如React、Vue、Angular等，并教您如何使用它们进行项目开发。通过这一阶段的学习，您将能够构建出基本的网页结构，为后续的前端开发打下坚实基础。通过这一阶段的学习，您的网页将变得更加美观、易读和易用。别担心，本文将为您带来一份。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 889
Vue在表单校验中trigger属性指定何时触发校验规则
apex触发器满足条件时弹出对话框
Debug yourself!
06-13 764
在Salesforce中，Apex触发器是在记录的数据库操作（如插入、更新、删除）之前或之后执行的逻辑。由于Apex触发器运行在服务器端，无法直接触发客户端（浏览器）上的对话框。
web前端期末大作业 html css javascript网页设计实例 企业网站制作
06-28
回答3：</h3><br/>为了完成web前端期末大作业 html css javascript网页设计实例 企业网站制作，首先需要掌握HTML、CSS、JavaScript这3门语言的基本知识。HTML提供了网页的结构和内容，CSS则负责网页的外观和样式，而...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

html5网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值