网站布局方面有哪些？文章目录、文章、网站介绍-唐朝资源网

文章目录

一、‍网站标题

传统春节网页设计制作、圣诞节开发、中秋节、端午节传统节日习俗庆典、地域特色、网站模板等网站设计制作。

二、✍️网站说明

️完成的大学生传统节日网页作业是用DIV CSS布局制作的。主要内容包括节日介绍、节日发展、风俗庆典、地域特色等。作品多页。学生的HTML静态网页基本制作完成，页面布局干净简洁。网页技术应用包括网页背景颜色、字体大小和字体设置、超链接、图形页面、菜单栏、顶部大图等网页基础知识点

一个好的网页设计应该包括（取决于个人要求）

页面分为四个部分：页眉、菜单导航栏（最好是下拉）、中间内容部分和页脚。所有页面都有超链接，可以跳转到三级页面，由5-10个页面组成。页面样式和样式统一布局，显示正常网页制作代码模板，不杂乱，使用Div+Css技术。菜单美观醒目，二级菜单可以正常弹出和跳转。必须有JS特效，比如图片旋转的定时切换和手动切换。页面中有多媒体元素，如gif，视频，音乐，表单技术的使用。页面清爽、美观、大方、与众不同。不仅要能够呈现用户所需要的内容，还要满足布局好、界面美观、配色优雅、表现形式多样的要求。三、网站介绍

网站布局：拟采用目前主流的浮动网页布局结构，兼容各大主流浏览器，显示效果稳定。

网站编程：拟使用最新的网页编程语言HTML5+CSS3+JS编程语言完成网站的功能设计。并保证网站代码与市面上所有主流浏览器兼容网页制作代码模板，并达到打开后立即看到网站的效果。

网站素材：计划从各个平台收集好看的图片素材，精心挑选适合网页风格的图片，然后用PS制作适合网页大小的图片。

网站文件：网站系统文件类型包括：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑：网页作品代码简单，可以使用任何HTML编辑软件（如Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等）运行、修改和编辑。

地点：

(1）html文件包含：index.html为首页，其他html为二级页面；

(2）css文件包含：css所有页面样式、文字滚动、图片放大等；

(3）js文件包含：js实现动态轮播效果、表单提交、点击事件等(js代码用于个别网页)。

四、网站演示

图片[1]-网站布局方面有哪些？文章目录、文章、网站介绍-唐朝资源网

图片[2]-网站布局方面有哪些？文章目录、文章、网站介绍-唐朝资源网

图片[3]-网站布局方面有哪些？文章目录、文章、网站介绍-唐朝资源网

图片[4]-网站布局方面有哪些？文章目录、文章、网站介绍-唐朝资源网

图片[5]-网站布局方面有哪些？文章目录、文章、网站介绍-唐朝资源网

图片[6]-网站布局方面有哪些？文章目录、文章、网站介绍-唐朝资源网

图片[7]-网站布局方面有哪些？文章目录、文章、网站介绍-唐朝资源网

五、⚙️网站代码HTML结构代码

<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中国传统节日——端午节</title>
<link rel="stylesheet" type="text/css" href="css/index.css" >
</head>
<body>
<div class="page">
<div class="banner"><img src="images/banner.jpg"  /></div>
<div class="daohang"><p><a href="index.html" >首页</a></p><p><a href="jianjie.html" >端午简介</a></p><p><a href="chuanshuo.html" >起源传说</a></p><p><a href="shisu.html" >各种食俗</a></p><p><a href="yiguo.html" >异国端午</a></p><p><a href="yanyu.html" >端午谚语</a></p><p><a href="ketang.html" >端午课堂</a></p><p><a href="liuyan.html" >客户留言</a></p><p><a href="zuozhe.html" >关于作者</a></p></div>
<div class="content">
<div class="zuo">
<img src="images/zuo1.jpg"  />
<div class="fangshi"><h1>端午节歌谣</h1><p>　　棕子香，香厨房。艾叶香，香满堂。桃枝插在大门上，出门一望麦儿黄。这儿端阳，那儿端阳，处处都端阳。<br />
  　　
  五月五，是端阳。门插艾，香满堂。吃粽子，洒白糖。龙舟下水喜洋洋。<br />
  　　
  五月节，天气热，放下锄头歇一歇；山上清风爽，杨梅红出血。 五月五，是端午，背个竹篓入山谷；溪边百草香，最香是菖蒲。<br />
  　　
  五月五日午，天师骑艾虎；薄剑斩百邪鬼入虎品。</p>
</div>
       
</div>
<div class="you">
<div class="jieshao"><h1>端午简介</h1>
<p><img src="images/jieshao.jpg"  width="218" height="147" style="float:left; margin-right:19px;" />　　　端午节（英文为Dragon Boat Festival或Double Fifth Festival）又称为端阳节，为每年的农历5月初五<br />
赛龙舟日，在湖北、湖南、贵州、四川一带，端午节又分为大端午与小端午。小端午为每年农历五月初五，大端午为每年农历五月十五日。　<br />
　　
时至今日，端午节在中国人民中仍是一个十分盛行的隆重节日。国家非常重视非物质文化遗产的保护，2006年5月20日，该民俗经国务院批准列入第一批国家级非物质文化遗产名录。　<br />
　　
2009年9月30日在阿联酋首都阿布扎比召开的联合国教科文组织保护非物质文化遗产政府间委员会会议决定：中国端午节成功入选《世界人类非物质文化遗产代表作名录》。</p>
  </div>
<div class="jieshao"><h1>起源传说</h1>
<p><a href="chuanshuo1.html" >纪念屈原</a></p>
<p><a href="chuanshuo2.html" >迎接伍子胥</a></p>
<p><a href="chuanshuo3.html" >纪念孝女曹娥</a></p>
<p><a href="chuanshuo4.html" >迎涛神</a></p>
<p><a href="chuanshuo5.html" >龙的节日</a></p>
<p><a href="chuanshuo6.html" >恶日禁忌</a></p>
<p><a href="chuanshuo7.html" >夏至</a></p>
  </div>
<div class="jieshaoB">
  <h1>图说端午</h1>
  <p><marquee><img src="images/tushuo1.jpg"  /><img src="images/tushuo2.jpg"  /><img src="images/tushuo3.jpg"  /><img src="images/tushuo4.jpg"  /><img src="images/tushuo5.jpg"  /><img src="images/tushuo6.jpg"  /></marquee></p>
  </div>
</div>
<div class="clearit"></div>
<div class="foot_bg">
<div class="foot"><p></p></div>
</div>
</div>
</div>
</body>
</html>

CSS 样式代码

@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
*{margin:0;padding:0;border:0;}
body {	font-family: "宋体";font-size: 12px;color:#000000;line-height: 20px;text-align:left}
td,th {font-family: "宋体";font-size: 12px;color: #000000;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
A:hover {TEXT-DECORATION: underline;}
ul,li{list-style-type:none;}
.clearit{clear:both;}
.page{width:1003px; margin:0 auto;}
.daohang{width:1003px; height:42px; margin:0 auto; overflow:hidden; background:url(../images/daohang.jpg) repeat-x;}
.daohang p{width:110px; line-height:42px; display:block; float:left; text-align:center; font-size:14px; }
.daohang p a{color:#FFFF00;}
.content{width:1003px; margin:0 auto; background:#cdffa8; padding:20px 0 0;}
.zuo{width:220px; float:left; margin-left:10px; display:inline;}
.fangshi{width:220px; border:1px solid #036b27; }
.fangshi h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:26px; line-height:26px; border-bottom:1px solid #036b27; color:#036b27;}
.fangshi p{text-align:left; padding:0 10px; line-height:24px;color:#036b27;}
.you{width:750px; float:left; margin-left:10px; display:inline;}
.jieshao{width:748px;border:1px solid #036b27; background:#ffffff; margin-bottom:10px; }
.jieshao h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#ffffff;border-bottom:1px solid #036b27; color:#036b27;}
.jieshao p{text-align:left; padding:10px; line-height:24px;color:#036b27;}
.jieshaoB{width:748px;border:1px solid #036b27; background:#ffffff; margin-bottom:10px; }
.jieshaoB h1{font-size:14px; padding:0 10px; font-weight:bold; line-height:28px; line-height:28px; background:#ffffff;border-bottom:1px solid #036b27; color:#036b27;}
.jieshaoB p{padding:10px 0;}
.jieshaoB img{width:200px; margin-right:10px; padding:1px; border:1px solid #FFFF00; background:#FFFFFF;}
.foot{width:1003px; margin:0 auto; padding:70px 0 20px; background:url(../images/foot.jpg) repeat-x top;}
.foot p{text-align:center; line-height:30px; color:#000000;}
.foot_bg{width:1003px; margin:0 auto; background:#00a634;}
.you h2{font-size:14px; font-weight:bold; text-align:center; line-height:30px; border-bottom:1px solid #FFFF00; color:#FFFF00;}
.neirong{padding:0 20px 200px; line-height:24px; color:#036b27; background:url(../images/neirong_bg.jpg) no-repeat bottom;}
.neirong h1{font-size:14px; font-weight:bold; text-align:center; line-height:30px; border-bottom:2px solid #036b27;}
.zhanshi{padding-bottom:20px; overflow:hidden;}
.zhanshi img{width:160px; display:block; float:left; margin-left:10px; display:inline;}
.messageB{width:600px; padding:10px 0; overflow:hidden; text-align:left; line-height:24px;}
.messageB ul li{line-height:24px; margin-top:16px; list-style:none; padding:0;border:0;}
.messageB ul li span{vertical-align:middle; padding-right:12px;}
.messageB ul li .message_in{width:300px; height:22px; border:1px solid #999999;vertical-align:middle;line-height:22px; padding:0;}
.messageB ul li .message_te{width:500px; height:90px; border:1px solid #999999;vertical-align:middle;line-height:18px; padding:0;}
.messageB ul li .message_btn{width:64px; height:20px;  padding:0; line-height:20px; background:url(../images/btn.gif) no-repeat; color:#FFFFFF; font-weight:bold; cursor:hand;}

六、如何让学习不再盲目

很多编程初学者都学过基础语法，但不知道语法的目的，如何加深形象，如何提升自己。这个时候，每天自己刷一些题就很重要了。），你可以去牛客网的初学者编程培训。本主题为编程入门级，适合刚学过语法的初学者。题目涉及基本编程语法、基本结构等，每道题都有练习模式和考试模式，可以恢复到考试模式进行模拟，也可以通过练习模式。练习。

七、更多干货

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

2.[跟我来|获取更多源代码 |精品篇】带你学习各种前端插件、3D炫酷效果、图片展示、文字效果，以及全站模板、大学毕业生HTML模板、final大作业模板等！ “这里有很多前端开发者，讨论前端Node知识，互相学习”！

欢迎交流学习以上内容及技术相关问题

本站下载的源码均来自公开网络收集转发二次开发而来，若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，我们会及时删除，给您带来的不便，我们深表歉意。下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。

THE END