展示社会公益项目html网页

最新推荐文章于 2025-05-27 21:54:09 发布

slwx280015

最新推荐文章于 2025-05-27 21:54:09 发布

阅读量1k

点赞数 24

文章标签： html 前端

本文链接：https://blog.csdn.net/slwx280015/article/details/137593909

版权

html网页代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实验二</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
}

/* 头部样式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
background-image: url("0163585e11976ca8012165182a5016.jpg@1280w_1l_2o_100sh.jpg");
}

/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}

/* 导航链接 */
.topnav a {
float: left;
display: block;
color: #008a10;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* 链接 - 修改颜色 */
.topnav a:hover {
background-color: #1740c8;
color: black;
}

/* 创建三个不相等的列 */
.column {
float: left;
padding: 10px;
}

/* 左右两侧宽度 */
.column.side {
width: 25%;
}

/* 中间区域宽度 */
.column.middle {
width: 50%;
}

/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}

/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
</style>
</head>
<body>
<link rel="stylesheet" href="外部样式.css" type="text/css">
<div class="header">
<h1 id="bt">社会公益项目</h1>
</div>

<div class="topnav">
<a href="https://www.redcross.org.cn/html/hszjz/index.html">捐款渠道</a>
<a href="https://chinavolunteer.mca.gov.cn/site/home">志愿者报名</a>
<a href="https://caoss.org.cn/news/html?id=13957">了解详情</a>
</div>

<div class="row">
<div class="column side">
<h2>当今中国</h2>
<p>公益慈善是现代社会越来越具有公共性、群众性和影响力的社会活动。公益慈善本来是两个词：公益+慈善，分别强调这类社会活动的结果和动机两个不同方面。但这两个词在现代社会越来越紧密地联系在一起，成为一个统一的社会话语乃至学术话语，以反映或表达这类社会活动的共同特征及其本质。

公益是指让不特定多数的社会成员普遍受益的社会活动。通常这类活动包括两大类，一是直接让公众受益的社会活动，如空气质量的改善、社会公平的实现等；二是通过改善弱势群体的状况间接让公众受益的社会活动，如扶贫济困、助学助老等。公益活动不同于由政府动用财政资源提供的公共服务，在于其主体不是政府而是政府以外的其他社会力量，资源不来自财政而来自社会。在现代社会，公益活动往往和公共服务结合起来，政府通过购买服务将大量的财政资源提供给社会组织，通过公益服务来实现公共服务，以提高整个社会的公众受益或社会福利水平。

慈善和公益有很密切的关系。从结果上看，慈善就是公益。但慈善更关注动机和行为。在中文语境中，慈和善包括慈念和善行两个方面，慈念是动机，善行是行为，慈和善加在一起，指的是基于仁慈兼爱之心关怀、施予、帮助、救济他人的善行善举和为此提供的善款善物。

谈到公益慈善，我们马上就会想到汶川特大地震，包括刚刚发生的天津爆炸，眼前会浮现出捐款捐物、救灾救难、志愿服务等一幕幕大公无私、扶危济困、关怀救助受灾受难群众的感人场景。公益慈善往往在大灾大难中凸显出来，也表现出巨大的力量。除了在各种战争、自然灾害、环境污染、流行病等突发事件发生时公益慈善表现出强烈的公共性、群众性和影响力之外，公益慈善也广泛存在于人们的日常生活中，在教育、医疗、文化、科学研究、环境保护、体育、社区等种种社会服务中，除了营利性的市场服务之外，也有大量非营利性的公益服务。公益服务并非由企业提供，也不是由政府提供的，而是由形形色色的非营利的公益慈善组织来提供和保障的。即使在大灾大难中，作为公益慈善的组织主体，也不是企业和政府，而是致力于公益慈善活动的非营利组织。因此在现代社会，公益慈善主要是由各种致力于公益慈善活动的非营利组织所开展的社会活动。

为什么公益慈善越来越具有公共性、群众性和影响力？从根本上说，公益慈善随着人类社会的发展进步越来越普遍和发达。具体来说主要有四个原因。

第一，公益慈善对公共服务形成越来越积极的补充、完善。从前是公共服务失灵的地方出现公益慈善，如今公共服务和公益慈善同步发展且相互融合，公益慈善的空间和资源越来越多地来自公共服务，而公共服务的效果和效率因公益慈善而得到改善，整个社会的公共空间、资源总量和社会活动的公共性因此得到显著提升。

第二，公益慈善越来越成为人人可为、全民追求的群众性社会活动。从前主要是富人做慈善，如今随着社会财富的增大，人们闲暇时间的增多、特别是互联网时代的到来，公益慈善变得人人可为、随手可为、随时可为、随处可为，甚至在一定意义上成为一种公德而自觉，成为一种责任而践行，成为一种时尚而流行。

第三，公益慈善成为媒体和自媒体所关注的话题，使其具有越来越大的社会影响力。无论是美闻还是丑闻，无论是大事还是小事，无论是大人物还是小人物，一旦涉及公益慈善，往往会透过媒体特别是新媒体被发酵和无限放大，形成较大的社会影响力。

第四，公益慈善成为社会创新的源动力之一，带来越来越大的增加值。公益创投、公益银行、社会企业、社会影响力投资等新公益业态不断涌现，使得公益慈善超越了营利或非营利的局限，成为社会财富新的增长点。

我们基于上述认识来讨论今日中国之公益慈善，包括其发展特征及存在问题、改革创新与法制建设以及发展趋势等。</p>
<p>播放器</p>
<audio src="周深 - 我的答案.mp3" type="mp3" controls></audio>
</div>

<div class="column middle">
<h2>公益演讲视频</h2>
<p id="cuti">不仅是中国社会，世界社会也在为公益活动做出努力。</p>
<iframe src="http://player.bilibili.com/player.html?aid=717849841&bvid=BV1cQ4y1y7xq&cid=403053000&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="100%"> </iframe>
<h3>水滴筹筹款心得</h3>
<p>认真对待，是传播的基础
真实的细节最打动人。文章写得越认真，能被广泛传播的可能性就越大。
筹款文章是大病患者与公众沟通和交流的媒介，求助内容是否真实、生动、流畅，图片是否清晰都决定着筹款的效果。
因此，“水滴筹”对于图文的要求主要有2个方面：

1.信息全面
“水滴筹”会对大病患者的个人信息及患病信息进行收集，但仍然需要更全面完整的信息，才能更好地赢得捐款人的信任和支持。
除了提供患者个人身份信息、诊断证明（加盖公章）以外，经济情况、治疗所需数额、预计花费目标、保险情况也需要如实说明。真诚求助才能获得无私的捐助。

2.图文并茂
图片尽量精美，能直观说明问题，增强公众对于筹款的感性认识。千万不要低估“读图时代”精美图片的说服能力。一图胜千言，首张照片，一定是患者的照片，如果有患病前后的对比照片最好。
</p>
</div>

<div class="column side">
<style>
a:link{
color: #000;
}
</style>
<h2>水滴筹相关例子</h2>
<p>水滴筹帮助了身患恶性肿瘤的清华少女，创造了一个小时筹集60万救助资金的奇迹；挽救了患淋巴细胞白血病的五岁女孩，呵护稚嫩的花朵不至于过早地凋零；救助了患急性白血病的退休教师，守护着红烛摇曳的灯火不会孤独地熄灭。每一天，水滴筹都会接到这样的病例，成千上万人因为同样的目的，聚集在了一起，用自己微弱的力量，呵护着脆弱的生命，顽强地生长。当公益不再是遥远而模糊的概念，而是触手可及能改变世界的力量，水滴筹让越来越多的人加入到了公益事业中来。明星杨颖（Angelababy）、张歆艺、袁弘、金晨、谭维维等，都曾在自己的朋友圈及微博上，通过水滴筹献出过爱心。</p>
<a href="https://www.shuidichou.com/" class="lian" target="_blank">水滴筹入口</a>
</div>
</div>

</body>
</html>

css外部样式代码

#bt{
   color: red;
}
body{
   background-image: url("true.jpg");
}
#cuti{
   font-weight: bold;
}
a:link{
   color: #d10909;
}
.lian:hover{
   border: 2px red solid;
}
a:visited{
   color: yellow;
}
.lian:active{
   background: black;
}