基于HTML+CSS制作感恩，传统节日，感恩节【网页设计】

软件技术NINI

已于 2024-07-10 16:51:26 修改

阅读量999

点赞数 30

分类专栏：传统文化文章标签： html css 前端

于 2024-06-01 00:43:57 首次发布

本文链接：https://blog.csdn.net/2301_78133614/article/details/139363758

版权

传统文化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、👨‍🎓网站题目

🥧 感恩、🍰传统节日、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

二、✍️网站描述

🍧感恩主题网站主要对各种感恩进行展示，让浏览者清晰地了解到各种感恩的详细信息，便于浏览者进行选择。

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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>
<title>感恩</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="main" width="1200" border="0" cellpadding="0" cellspacing="0">

    <tr>
        <td id="menu">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td><a href="1.html">首页</a></td>
                    <td><a href="qiyuan.html">起源</a></td>
                    <td><a href="xingcheng.html">形成</a></td>
                    <td><a href="biaoxian.html">表现</a></td>
                    <td><a href="liuyan.html">登录</a></td>         
                </tr>
            </table>
        </td>
    </tr>
    <tr>
    
        <td id="content">
            <p>“感恩“是积极心理学中一个重要的特质，指的是对生活中美好事物的感激和欣赏。一般意义上的解释为“对别人的帮助给予感激”。推而广之，感恩是对外界施予自己的恩惠和自己给予自己的恩惠表示物质上或是精神上的感谢。

    人的一生，离不开他人的关爱与帮助，“滴水之恩，当涌泉相报”就是一种典型的感恩心理，也是珍贵人格品质的体现，对他人说一声“谢谢”显得格外重要。

      同样，酸甜苦辣的生活既会有顺心如意，也有挫折困境。有时，面对压力是历练自己坚强品质的机会。看到自己的付出和勇气、肯定“我尽了自己最大的努力”也是一种感恩，对自己说一声“谢谢”非常重要。1.积极的欣赏和肯定你爱的人

    积极的欣赏即是有意识地去发现对方身上那些好的品质，比如善良、体贴、优雅或特长，并且大声地告诉对方，这样做可以“增加对彼此关系中积极事物的认识“。如果同时能再注重细节的话，比如关注到每个人每天表现出来的不太一样的闪光点，对彼此关系的促进就会更强了。

     感恩能让我们更多地参与到生活中去，并提醒我们有些美好的事情并不是我们所认为的理所当然。当我们尝试多挖掘一些生活中的温暖画面，并充分表达时，如”谢谢你和我一起去食堂吃早餐，一路聊天很愉快“，我们的快乐也许会增添很多。

    2.认识到什么是“足够好”


        </td>
    </tr>
        <tr>
        <td>
        <table width="1200" border="0" id="zi">
  <tr>
    <td >&nbsp;</td>
  </tr>
  <tr>
    <td><img src="image/q.jpg" width="590" height="100">
    </td>
    <td >&nbsp;</td>
    <td><p>    有时，我们会因执着于追求自己心中的完美标准，容易为一些小事而烦恼，进而对他人的评价也是批评多过赞美。虽然这并不意味着应该一味忍让，但可以尝试尽力和对方达成共识，或者可以允许和而不同共存。

     因此，不管是对自己琮是在与人相处中，建议大家尽量去认识到自己和对方已经做得“足够好”了，即使并不完全如心愿，但如果已经尽了最大努力，那么“少关注细节，多关注自己/对方”才是最明智的选择。

     积极心理学中的“感恩”强调感激和欣赏发生在你身上的美好的事情，懂得知足，这是一种喜悦、平和的感受，并不需要伴有自责和内疚感。

    3.练习内在的和外在的感恩
</td>
        <div class="qb_1">
            <div class="qb_1_2">
            <P>    感恩这种积极情感其实很容易获得，坚持做简单的练习就能持续提升幸福感，将感恩变为一种习惯。

    可以从‘内心的感恩’开始，先私下里表达对自己的感激之情。比如每天或每周写一篇感恩日记，提醒自己生活中的美好事物。不要只对那些显而易见的、重要的事情表达感激之情，“真正快乐的人会对一些微不足道的小事表达感谢之情。” 

    接着可以“把内在感恩转向‘外在的感恩’，将你的感激之情表达出来”。向身边值得的人表达你的感激之情，永远也不要低估你的表达给他人带去的积极影响。</p>
</P>
            </div>
        </div>


</body>
</html>

💒CSS样式代码

@charset "utf-8";
*{margin:0; padding:0; list-style-type:none;}
body{font-size:14px; background:#f5f4d8;}
a img{border:none;}
.clear{clear:both;}
#main{width:1200px; margin:0 auto;}
#menu{background:#7c5a3f; height:40px;}
#menu a{color:#fff; text-decoration:none;}
#menu a:hover{text-decoration:underline;}
#menu table{width:1200px;}
#menu table td{text-align:center;}
#content{background:#fff; line-height:30px; padding:20px;}
#content p{text-indent:30px;}
#zi{margin-top:10px;background:#fff; line-height:30px;}
#zi span{margin-left:20px; color:#FFF}
#zi p{ padding:20px;}
#footer{background:#ddd; text-align:center; color:#000; padding:20px 0;}

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

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。

七、🎁更多干货

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

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

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：
QQ:3021557545

绿泡泡：XiaoMei_NN

4.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦

软件技术NINI

关注

30
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
基于HTML+CSS制作感恩，传统节日，感恩节【网页设计】

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件。
复制链接

扫一扫