HTML5期末大作业:用DIV+CSS技术设计的网页与实现(剪纸传统文化网页设计主题)

news2024/12/23 18:46:53

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码: 【🗂️HTML+CSS+JS实例代码 (炫酷代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】

🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!


📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货


一、👨‍🎓网站题目

🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。


二、✍️网站描述

🏷️ 这个首页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

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

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


四、🌐网站演示

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


五、⚙️ 网站代码

🧱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="main">
<!---ibox开始--->

<div class="top">
<div class="logo"><img src="images/logo.png" /></div>
<div id="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="about.html">剪纸简介</a></li>
<li><a href="zuopin.html">作品鉴赏</a></li>
</ul>
</div>

</div>

<div class="box">
  <img src="images/banner.jpg" />
</div>

<!---box1开始--->
<div class="bx01">
<div class="bx01-left">

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 中国剪纸是一种用剪刀或刻刀在纸上剪刻花纹,用于装点生活或配合其他民俗活动的民间艺术。在中国,剪纸具有广泛的群众基础,交融于各族人民的社会生活,是各种民俗活动的重要组成部分。其传承赓续的视觉形象和造型格式,蕴涵了丰富的文化历史信息,表达了广大民众的社会认知、道德观念、实践经验、生活理想和审美情趣,具有认知、教化、表意、抒情、娱乐、交往等多重社会价值。</p>


</div>
<div class="bx01-right"><img src="images/img1.jpg" /></div>
</div>
<!---box2开始--->
<div class="bx02">
<div class="bx02-left"><img src="images/img4.jpg" /></div>
<div class="bx02-right">
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2006年5月20日,剪纸艺术遗产经国务院批准列入第一批国家级非物质文化遗产名录。2009年9月28日至10月2日举行的联合国教科文组织保护非物质文化遗产政府间委员会第四次会议上,中国申报的中国剪纸项目入选"人类非物质文化遗产代表作名录"。2018年12月,教育部办公厅关于公布南京航空航天大学为中国剪纸中华优秀传统文化传承基地。</p>
</div>
</div>
<!---box3开始--->
<div class="bx03">
</div>

<div class="chuanc">
 <div class="left">
 <div class="tit"><span><img src="images/ico01.png"></span><h2>剪纸用途</h2><span><img src="images/ico02.png"></span></div>
 <div class="wensd">
 <p>
 张贴用,即直接张贴于门窗、墙壁、灯彩、彩扎之上以为装饰。如窗花、墙花、顶棚花、烟格子、灯笼花、纸扎花、门笺;摆衬用,即用于点缀礼品、嫁妆、祭品、供品。如喜花、供花、礼花、烛台花、斗香花、重阳旗;刺绣底样,用于衣饰、鞋帽、枕头。如鞋花、枕头花、帽花、围涎花、衣袖花、背带花;印染用,即作为蓝印花布的印版,用于衣料,被面、门帘、包袱、围兜、头巾等。
 </p>
 </div>
 </div>
 <div class="right">
 <img src="images/cc01.jpg">
 <img src="images/cc02.jpg">
  <img src="images/cc03.jpg">
   <img src="images/cc04.jpg">
 </div>
 
 </div>

<div class="foot">
<h2>传统手工艺@剪纸</h2>
</div>

</div>


</body>
</html>


💒CSS样式代码


@charset "utf-8";
/* CSS Document */
body{ margin:0 auto; font-size:12px; font-family: "微软雅黑"; line-height:22px; background:#eaeaea;   }

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

li{ list-style:none;}

a{ text-decoration:none;}

a{ text-decoration:none;}
img{ border:0; margin:0; padding:0;} 
/* 首页 */
.main{ width:1400px; height:auto; overflow:hidden;  margin:0 auto; background:#FFF;}
/*---top开始-----*/
.top{ width: 1400px;height: 137px;background:#faebd8;}
.logo{ width: 326px;
margin-right: 227px;
float: left;
height: 90px;
margin-left: 76px;
margin-top: 26px;}
#nav{
	width: 770px;
height: 50px;
float: left;
margin-top: 65px;
}
#nav ul{ margin:0 auto;}
#nav ul li{height: 50px;
line-height: 50px;
float: left;
text-align: center;
margin: 0px 60px;}
#nav li a {
	color: #d4070c;
font-family: "宋体";
font-size: 22px;
margin-left: 2px;
display: block;
font-weight:bold;
}
#nav li a:hover{ color:#F96;}
.box {
	height: 460px;
width: 1400px;
	
        }

.bx01{ width:1276px; height:474px; margin:0 auto; margin-top:50px;}
.bx01-left{ width: 507px;
    height: 400px;
    float: left;
    margin-left: 15px;
    padding-top: 74px;}
.bx01-left p{ float:left;  line-height: 35px;font-size: 18px; padding-right:60px;}


.bx01-right{ width:754px; height:474px; float:left;}
.bx02{ width:1276px; height:380px; margin:0 auto; margin-bottom:20px;}
.bx02-left{ width:522px; height:380px; float:left; }
.bx02-left img{ display:block; float:right;}
.bx02-right{ width:754px; height:380px; float:left; }
.bx02-right p{ margin-top:109px; margin-left:63px; line-height:35px; font-size:18px; font-family:"微软雅黑"; }
.bx03{ height:200px; background:#F8F9FC;}
.chuanc{ width:1400px; height:990px;}
.chuanc .left{ width:410px; height:990px; float:left; background:#D8DFED;}
.chuanc .left .tit{ width:280px;
height: 60px;
margin: 0 auto;
margin-bottom: 77px;
margin-top:204px;}
.chuanc .left .tit span{ width:33px; height:55px; display:block; float:left;}
.chuanc .left .tit h2{ float: left;
font-family:"宋体";
height: 55px;
display: block;
margin: 0px 20px;
font-size: 40px;
color: #182941;
line-height: 55px;}
.chuanc .right{ width:990px; height:990px; float:left; }
.chuanc .right img{ float:left; margin-left:40px; margin-top:100px;}
.chuanc .wensd{ width:280px; height:460px; margin:0 auto;}
.chuanc .wensd p{ line-height:40px; font-size:16px; color:#182941;}
.foot{ height:100px; background:#faebd8; margin:0 auto; padding-top:35px;}
.foot h2{ font-size:18px; line-height:40px;  color:#d4070c; font-weight:normal; text-align:center;}

.qy-bx1{ height:724px; margin-top:76px; }
.qy-bx1 .left{ width:604px;  float:left; margin-left:107px;  padding-right:50px;}
.qy-bx1 .left .tit{ width: 310px;
height: 55px;
margin: 0 auto;
margin-bottom: 60px;}
.qy-bx1 .left .tit span{ width:33px; height:55px; display:block; float:left;}
.qy-bx1 .left .tit h2{ float: left;
font-family:"宋体";
height: 55px;
display: block;
margin: 0px 40px;
font-size: 40px;
color: #aa7647;
line-height: 55px;}
.qy-bx1 .left p{ line-height:40px; font-size:18px; text-indent:2em;}
.qy-bx1 .left .wenzi{ height:500px;overflow-y: scroll;}
.qy-bx1 .right{ width:556px; height:559px; float:left; margin-top:60px; margin-left:55px;}
.zp{ width: 1400px;
height: 800px;}
.zp ul{ padding:30px; }
.zp ul li{ width: 400px;
height: 300px;
float: left;
padding: 22px;
text-align: center;}
.zp ul li img{ width:400px; height:250px;}
.zp ul li h1{ color:#141313; height:40px; font-weight:normal; font-size:24px; line-height:40px;}
.zpxq{
	padding:20px;
	height:auto;
	overflow:hidden;
	}
.zpxq p{
	line-height:35px;
	font-size:18px;
	margin-bottom:10px;
	text-indent:2em;
	}
.zpxq img{
	display:block;
	margin:0 auto;
	margin-top:20px;
	margin-bottom:20px;
	}
.title{
	height:40px;
	line-height:40px;
	font-size:20px;
	text-align:center;
	margin:0px 20px;
	}




























六、🥇 如何让学习不再盲目

第一、带着目标去学习,无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么,是想解决什么问题,实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的,书籍是浩如烟海的。我们尽情徜徉其中的时候,千万不要被海水淹死,没有自我了。在学习过程中,我们会发现每一个知识点都是有她的边界和背景的,我们要善于归纳整理知识

第三、学到了就要用到

有时,我们一天下来感觉学到了很多干货,那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事,但只有会学习的人,才有价值。


七、🎁更多干货

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

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

3.

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/59394.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

二本土木工程管理毕业5年,零基础转型大数据开发,收割长沙深圳多个大数据offer...

点击上方 "大数据肌肉猿"关注, 星标一起成长点击下方链接&#xff0c;进入高质量学习交流群今日更新| 1052个转型案例分享-大数据交流群分享一位学习群同学的转型经历&#xff0c;他是二本土木类工程管理专业&#xff0c;17年毕业&#xff0c;毕业后在长沙工地从事了…

Java基于springboot+vue的汽车饰品销售购物商城系统 前后端分离

开发背景 随着我国科技和经济的发展&#xff0c;我国的汽车数量也越来越多&#xff0c;基本家家户户都拥有了自己的汽车&#xff0c;为了让汽车用起来更加的舒心&#xff0c;于是各类琳琅满目的汽车饰品也出现了。大多数时候人们在购买汽车饰品的时候都回到这些专卖店购买&…

C++之面向对象

目录 对象与类 类的语法&#xff1a; C中class与struct的区别&#xff1a; 通过类实例化对象的方式 具体案例 类作用域与分文件编写 创建circle.h头文件 创建源文件circle.cpp 创建all.cpp来作为程序的入口 封装 封装的意义 访问权限符 成员属性私有化 优点 具体…

Python解题 - 括号上色(递归)

题目 小艺酱又得到了一堆括号。括号是严格匹配的。现在给括号进行上色。上色有三个要求&#xff1a; 1、只有三种上色方案&#xff0c;不上色&#xff0c;上红色&#xff0c;上蓝色。 2、每对括号只有一个上色。 3、相邻的两个括号不能上相同的颜色&#xff0c;但是可以都不上色…

【Java面试指北】Exception Error Throwable 你分得清么?

读本篇文章之前&#xff0c;如果让你叙述一下 Exception Error Throwable 的区别&#xff0c;你能回答出来么&#xff1f; 你的反应是不是像下面一样呢&#xff1f; 你在写代码时会经常 try catch(Exception)在 log 中会看到 OutOfMemoryErrorThrowable 似乎不常见&#xff0c…

为什么大部分人做网赚是赚不到钱的,这才是真正的原因!

说实话&#xff0c;互联网已经发展到现在的水平&#xff0c;目前来看&#xff0c;互联网上只存在两种平台&#xff0c;一种是社交平台&#xff0c;一种是内容平台。 所有的抖音、知乎、小红书、搜索引擎、淘宝等等这些都是内容平台&#xff0c;如果你想要解决精准流量问题&…

JSP+MySQL基于SSM的高校毕业生就业管理系统

本高校毕业生就业管理系统主要包括系统用户管理模块、招聘信息管理模块、简历接收管理、投递简历管理、登录模块、和退出模块等多个模块。它帮助高校毕业生就业管理实现了信息化、网络化,通过测试,实现了系统设计目标,相比传统的管理模式,本系统合理的利用了高校毕业生就业管理…

配电网重构|基于新颖的启发式算法SOE的随机(SDNR)配电网重构(Matlab代码实现)【算例33节点、84节点、119节点、136节点、417节点】

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f4dd;目前更新&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;电力系统相关知识&#xff0c;期刊论文&…

【数据集NO.3】人脸识别数据集汇总

文章目录前言一、IMDB-WIKI人脸数据集二、WiderFace人脸检测数据集三、GENKI 人脸图像数据集四、哥伦比亚大学公众人物脸部数据库五、CelebA人脸数据集六、美国国防部人脸库七、MTFL人脸识别数据集八、BioID人脸数据集九、PersonID人脸识别数据集十、CMU PIE人脸库十一、Youtub…

Linux虚拟内存

问题 什么是虚拟内存地址 &#xff1f;Linux 内核为啥要引入虚拟内存而不直接使用物理内存 &#xff1f;虚拟内存空间到底长啥样&#xff1f;内核如何管理虚拟内存&#xff1f;什么又是物理内存地址 &#xff1f;如何访问物理内存&#xff1f; 什么是虚拟内存地址 举一个生活…

Redis学习笔记(四)

事务 一个命令执行的队列&#xff0c;中间不会被打断或者干扰基本操作、 开启事务&#xff1a;multi 作用&#xff1a;设定事务的开启位置&#xff0c;执行此命令后&#xff0c;后续所有指令均加入事务中 执行事务&#xff1a;exec 作用&#xff1a;设定事务结束的位置&#xf…

【MySQL】表的增删改查(一)

你可以了解世间万物&#xff0c;但追根溯源的唯一途径便是亲身尝试。——《心灵捕手》 前言&#xff1a; 大家好&#xff0c;我是拳击哥&#xff0c;今天给大家讲解的是mysql表GRUD操作中的新增数据、查询数据以及表中数据的排序、去重等。因篇幅过长&#xff0c;分为两期来讲解…

Linux——匿名管道、命名管道及进程池概念和实现原理

目录 一.什么是匿名管道 二.如何使用匿名管道 &#xff08;一&#xff09;.pipe原理 &#xff08;二&#xff09;.pipe使用 三.命名管道概念及区别 &#xff08;一&#xff09;.什么是命名管道 &#xff08;二&#xff09;.与匿名管道的联系和区别 四.命名管道的使用 &…

Python——分支语句

1.bool 数据类型&#xff1a;真和假&#xff0c;只有两个值&#xff0c;就是True和False。 2.if语句使用的语法&#xff1a; 3.else语句&#xff1a;&#xff08;同上&#xff09; 4.比较运算符&#xff1a; a b&#xff1a;a和b是否相等 a ! b&#xff1a; a和b是否不相等 a…

【网络层】子网划分、无分类编址CIDR、构成超网、ARP协议

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录子网划分-----减少浪费IP----两级IP不够灵活-----变三级IP地址-----对外还是表现以前的网络号---------只是拿出部分主机号来做子网号子网划分实例-------对外不展示内部的子网划分----子网掩码---与运算---…

什么是【固件】?

文章目录一、软件 硬件 固件二、BIOS&#xff08;Basic Input/output System&#xff09;三、百度百科的解释四、固件的工作原理五、应用六、参考链接一、软件 硬件 固件 通常我们会将硬件和软件分开看待&#xff0c;二者协同工作为我们提供计算机的体验。硬件是摸得着的实体&…

[附源码]计算机毕业设计学生宿舍维修管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

假设检验(1)-假设检验的基本概念

数理统计的另一基本任务是对总体参数作某种假设&#xff0c;然后根据所得的样本&#xff0c;运用统计分析的方法来检验这一假设是否成立&#xff0c;从而作出接受或拒绝的决定&#xff0e; 这就是假设检验问题&#xff0e; 3. 1. 1 假设检验的基本思想和推理方法 我们先举一个…

C\C++刷题DAY5

目录 1.第一题 2.第二题 3.第三题 1.第一题 160. 相交链表 - 力扣&#xff08;LeetCode&#xff09; 思路分析&#xff1a; 看链表相不相交&#xff0c;是看链表的地址。把两个链表的地址一一比对&#xff0c;如有有相同的地址&#xff0c;那么相交&#xff0c;如果各不相同…

详解自监督发展趋势! 何恺明连获三年CVPR最高引用的秘诀是?

点击文末公众号卡片&#xff0c;不错过计算机会议投稿信息 0 引言 许多加了我好友的读者知道尼谟之前的研究方向是“自监督学习”&#xff0c;而最近我无意中发现&#xff0c;CVPR最近三年引用量最高的论文竟然都是来自监督学习领域的&#xff0c;且三篇论文的作者都包括Face…