一、设计背景及主题
（一）设计背景
在经济发展日新月异的今天，人们的生活水平有了显著的提高，但仍有部分人生活在水生火热中，这就使得越来越多的人伸出援助之手，用自己的爱心拂去他们心头的阴霾。而作为当代大学生的我们，更应该承担起时代责任，在公益活动中，实现个人对社会的价值，有利于我们积极承担社会责任，为我们树立正确的人生观，价值观起到了关键作用。
所谓青年智则国智，青年强则国强，青年热爱公益则国家风行公益。中国的未来靠青年一代，青年的整个精神状态决定着整个国家和民族的未来，青年的广大代表是当今的大学生，大学生中最活跃的是学生社团。所以说重视高校社团公益的发展，才能推动高校公益事业的发展和繁荣，也才能推动整个社会的和谐发展！
因此，我以“爱心公益”为主题设计该网页，希望能为我国的公益事业尽自己的绵薄之力。
（二）设计主题
在该次网页设计中，我选择以“爱心公益”为网站主题，并通过公益项目、公益图集以及公益新闻来增强网站的丰富性和广泛性从而使人们关注到“爱心公益”的活动当中，而志愿者报名这一部分则是为部分志愿者提供做公益事业的平台，使得我国公益事业愈发强大。
下面我对该网站各个部分做如下简述：
◎公益项目主要是对有关公益的各个项目的介绍和宣传，加深用户对于各类公益项目的了解。
◎公益图集主要是人们在做公益的过程中所拍的照片对用户进行一个共享，使得用户更加直观的了解公益事业，感受到来自公益事业的热情。
◎公益新闻主要是对时实公益新闻的一个转播，满足用户对于当即时段的公益报道的信息需求，激发用用户对于公益事业的热情。
◎志愿者报名主要是为有志愿公益意愿的用户提供机会，收集 并统计志愿者的信息。
二、设计思路及技术说明
（一）设计思路
1、确定网站名称
根据“爱心公益”的主题，我选择以“公益小站”为网站主标题，以“让爱不停歇”为网站副标题，较为符合爱心公益的网站主题，增强用户的归属感，能够引发用户的浏览兴趣。
2、构析网站结构及风格
网站链接结构：星状链接结构，类似服务器的链接结构，每个页面之间都建立有链接，便于用户浏览各个页面。
网站风格：主要特点为简约大气，便于用户操作，因此选择将导航栏置于最顶端，各个页面均以导航栏和页面图片为首，然后对各个部分的内容作出详细介绍。
网站标准色调：考虑到该网站的主题及受众群体，我选择以红色作为该网站的主色调，体现网站热情有爱情的主题氛围。
网站栏目：网站栏目主要设计为五大部分，分别首页、公益项目、公益图集、公益新闻、志愿者报名。
3、搜集网站资料
通过百度来搜索有关“爱心公益”的新闻、项目和图片为网站的建立做准备。
4、确立网站目录结构
网站文件以“爱心公益小站”为文件夹名，按文件类型设置css、img、js三个目录存放不同类型的网页文件。
（二）技术说明
硬件环境：Windows 10操作系统
软件需求：VScode
网页图片来源：https://www.pexels.com/videos/
三、制作及开发过程
（一）导航栏
<div class="logo">爱心公益小站</div><ul><li><a href="index.html">首页</a></li><li><a href="xiangmu.html">公益项目</a></li><li><a href="xinwen.html">公益新闻</a></li><li><a href="tuji.html">公益图集</a></li><li><a href="baoming.html">志愿者报名</a></li></ul></div>
（二）Index页面主要代码
<div id="oldman" class="tabcontent"><h1>空巢老人</h1><p>以人为本，善待老人。</p></div><div id="children" class="tabcontent"><h1>留守儿童</h1><p>心系校园,情系留守儿童</p> </div><div id="poor" class="tabcontent"> <h1>扶贫助贫</h1><p>精准识别贫困人口,脱贫攻坚致富幸福。</p></div><button id="defaultOpen" class="tablink" οnclick="openPicture(event,'oldman')" >空巢老人</button><button class="tablink" οnclick="openPicture(event,'children')">留守儿童</button><button class="tablink" οnclick="openPicture(event,'poor')">扶贫助贫</button><script>document.getElementById("defaultOpen").click();</script></div><br><br><div class="main"><!--中间内容--><div class="aboutus"><!--关于我们--><img src="https://images.pexels.com/photos/1098795/pexels-photo-1098795.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"><p>公益是个人或组织自愿通过做好事、行善举而提供给社会公众的公共产品。在这里，做好事、行善举是对个人或组织行为的价值判断；行动的结果是向非特定的社会成员提供公益产品。</p><p>公益活动是现代社会条件下的产物，是公民参与精神的表征。公益活动要生产出有利于提升公共安全、有利于增加社会福利的公共产品。在组织公益活动时，要遵循公德、符合公意，努力形成参与者多赢共益的良好氛围。因而，公益活动至少应包含公民、公共、公德、公意和共益等五个要素。</p></div><div class="gonggao"><!--活动公告--><div class="title"><img src="images/laba.png">活动公告</div><ul><li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li><li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li><li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li><li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li><li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li><li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li><li><a href="#">免费午餐计划，帮助孩子们免于饥饿</a></li></ul></div> <div class="jinxing"><!--公益进行中--><div class="title"><span>公益进行中</span><a href="xiangmu.html">查看更多+</a></div><ul><li><img src="images/jinxing1.jpg"><p class="p1">让空巢老人“老有所依”</p><p class="p2">近年来，随着大量农村青壮年劳动力外出务工，农村中出现了规模庞大的空巢老人群体，本应安享晚年的他们是否真的“老有所养、老有所乐”？</p><a href="xiangqing1.html">查看详情</a></li><li><img src="images/jinxing2.jpg"><p class="p1">关爱贫困留守儿童</p><p class="p2">在中国有这样一个弱势群体。他们的父母为了生计远走他乡离开年幼的孩子，外出打工，用勤劳获取家庭收入，为经济发展和社会稳定作…</p><a href="xiangqing1.html">查看详情</a></li><li><img src="images/jinxing3.jpg"><p class="p1">乡村支教美丽中国</p><p class="p2">我们说教育改变命运，但对于乡村的孩子，谁在引导他们的人生？有这么一群年轻人，他们相信，这些孩子跟你我没什么不同，推一把，他们的…</p><a href="xiangqing1.html">查看详情</a></li><li><img src="images/jinxing4.jpg"><p class="p1">为阅读插上爱的翅膀</p><p class="p2">“开学我最期待的事，就是拆开新书闻里面的味道”——这也是众多乡村儿童的心声，他们渴望通过书籍看到广阔的世界。让远方的小伙伴…</p><a href="xiangqing1.html">查看详情</a></li> </ul></div>
</div>
（三）网站底部
<p>@Copyright 2020 <br>Design by Zhao Pengru</p></div>
（三）公益项目页面主要代码
<img src="https://images.pexels.com/photos/1362910/pexels-photo-1362910.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"></div><div class="main"><!--中间内容--><div class="xiangmu"><!--公益项目--><div class="title"><span>公益项目</span></div><ul><li><img src="images/jinxing1.jpg"><p class="p1">让空巢老人“老有所依”</p><p class="p2">近年来，随着大量农村青壮年劳动力外出务工，农村中出现了规模庞大的空巢老人群体，本应安享晚年的他们是否真的“老有所养、老有所乐”？空巢老人问题不是一个简单的个人问题，已经成为我国亟待破解的社会命题。早在1999国际老年人年，国际卫生组织就提出了“积极老龄化”的观点，即通过倡导积极老龄化，最大限度地增加健康、参与和保障的机会，以实现尽可能延长人类健康预期寿命，提高老年期生活质量的目标。</p><a href="xiangqing1.html">查看详情</a></li><li><img src="images/jinxing2.jpg"><p class="p1">关爱贫困留守儿童</p><p class="p2">在中国有这样一个弱势群体。他们的父母为了生计远走他乡离开年幼的孩子，外出打工，用勤劳获取家庭收入，为经济发展和社会稳定作出了贡献，但他们却留在了农村家里，与父母相伴的时间微乎其微，包括内地城市，也有父母双双外出去繁华都市打工。这些本应是父母掌上明珠的儿童集中起来便成了一个特殊的群体———留守儿童。</p><a href="xiangqing1.html">查看详情</a></li><li><img src="images/jinxing3.jpg"><p class="p1">乡村支教美丽中国</p><p class="p2">我们说教育改变命运，但对于乡村的孩子，谁在引导他们的人生？有这么一群年轻人，他们相信，这些孩子跟你我没什么不同，推一把，他们的梦也能实现，这些人正在农村教书，两年。我们相信：所有中国孩子，无论出身，都应该享有同等的优质教育。我们需要您的支持，来共同实现这个愿景。</p><a href="xiangqing1.html">查看详情</a></li><li><img src="images/jinxing4.jpg"><p class="p1">为阅读插上爱的翅膀</p><p class="p2">“开学我最期待的事，就是拆开新书闻里面的味道”——这也是众多乡村儿童的心声，他们渴望通过书籍看到广阔的世界。让远方的小伙伴都有书可读。赠人书籍手有余香，让我们为阅读插上爱的翅膀，捐赠图书给乡村儿童。</p><a href="xiangqing1.html">查看详情</a></li><li><img src="images/jinxing5.jpg"><p class="p1">让每个人都能喝上干净水</p><p class="p2">近年来，全国各地水污染事件频发，再次敲响了生态环保的警钟，水是生命之源，没有老百姓的饮水安全，何来民生幸福？有效提高饮用水水源保护区环境应急管理能力，保障群众饮水安全是一件大事。</p><a href="xiangqing1.html">查看详情</a></li> </ul> </div> </div>
（五）公益图集页面主要部分
<img src="https://images.pexels.com/photos/1739855/pexels-photo-1739855.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"></div><div class="main"><!--中间内容--><div class="tuji"><!--公益图集--><div class="title"><span>公益图集</span></div><ul><li><img src="images/tuji1.jpg"><p>慰问留守儿童送书包活动</p></li><li><img src="images/tuji2.jpg"><p>志愿者们给空巢老人免费健康检查</p></li><li><img src="images/tuji3.jpg"><p>“分享温暖，爱心传递”捐书活动</p></li><li><img src="images/tuji4.jpg"><p>奉献青春乡村支教</p></li> </ul> </div> </div>
（六）公益新闻页面主要部分
<img src="https://images.pexels.com/photos/1344275/pexels-photo-1344275.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"></div><div class="main"><!--中间内容--><div class="xinwen"><!--公益新闻--><div class="title"><span>公益新闻</span></div><ul><li><p><a href="xiangqing2.html">爱心捐书，点亮全城 | 让边远山区的孩子有书看 </a></p><span>2019-06-26</span></ul> </div> </div>
（七） 志愿者报名页面
<div class="baoming"><!--志愿者报名--><div class="title"><span>志愿者报名</span></div><p>电话报名：010-12345678</p><p>在线报名：</p><div class="input-box"><span>姓名：</span><input type="text"/></div><div class="input-box"><span>电话：</span><input type="text"/></div><div class="input-box"><span>报名项目:</span><input type="text"/></div><input type="button" value="报名" class="button"/></div>
</div>
（十）Css部分
*{margin:0;padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;}
body{font-size:14px;}
/*导航*/
.nav{width:1000px;height:40px;line-height:40px;margin:auto;background:#dd3b30;}
.nav .logo{font-size:20px;font-weight:bold;color:#fff;float:left;margin-left:20px;}
.nav ul{float:right;}
.nav li{float:left;}
.nav li a{display:block;width:120px;height:40px;color:#fff;text-align:center;}
.nav li a:hover{background:#9b211f;}
/*banner*/
.banner{width:1000px;margin:auto;}
.banner img{height: 500px;width: 100%;}
/*首页中间内容*/
.main{width:1000px;overflow:hidden;margin:20px auto;}
.aboutus{width:700px;float:left;}
.aboutus img{width:280px;height:200px;float:left;margin-right:20px;}
.aboutus p{text-indent:28px;line-height:26px;}
.gonggao{width:280px;float:right;}
.gonggao .title{width:100%;height:30px;line-height:30px;background-color:#dd3b30;color:#fff;font-size:20px;}
.gonggao .title img{height:20px;float:left;margin:5px;}
.gonggao ul{width:260px;margin:auto;}
.gonggao li{height:26px;line-height:26px;background:url(../images/xin.jpg) no-repeat left center;text-indent:20px;overflow:hidden;}
.gonggao li a{color:#000;}
.gonggao li a:hover{color:#dd3b30;}
.jinxing{width:100%;clear:both;padding-top:10px;overflow:hidden;}
.jinxing .title{height:30px;line-height:30px;border-bottom:1px solid #dd3b30;font-size:20px;color:#dd3b30;}
.jinxing .title span{display:block;width:100px;height:30px;border-bottom:3px solid #dd3b30;text-align:center;float:left;}
.jinxing .title a{float:right;font-size:14px;color:#333;}
.jinxing .title a:hover{text-decoration:underline;}
.jinxing ul{padding-top:10px;}
.jinxing li{width:240px;margin:5px;float:left;background:#f2f2f2;}
.jinxing li img{width:240px;height:180px;}
.jinxing li p{width:230px;margin:auto;}
.jinxing li .p1{font-size:16px;height:30px;line-height:30px;font-weight:bold;overflow:hidden;}
.jinxing li .p2{line-height:20px;height:80px;overflow:hidden;}
.jinxing li a{display:block;width:100px;height:30px;line-height:30px;border-radius:15px;border:1px solid #dd3b30;margin:10px auto;text-align:center;color:#dd3b30;}
.jinxing li a:hover{background:#dd3b30;color:#fff;}
/*底部*/
.footer{ width:1000px;margin:auto;background:#dd3b30;padding-top:10px;padding-bottom:10px;}
.footer p{font-size:15px;line-height:30px;text-align:center;color:#fff;}
/*公益项目*/
.xiangmu .title{font-size:20px;color:#fff;text-align:center;}
.xiangmu .title span{display:block;width:200px;height:30px;line-height:30px;margin:auto;background:#dd3b30;}
.xiangmu li{width:100%;height:180px;background:#f2f2f2;margin-top:20px;}
.xiangmu li img{width:240px;height:180px;float:left;margin-right:20px;}
.xiangmu li p{width:720px;float:left;}
.xiangmu li .p1{font-size:16px;height:30px;line-height:30px;font-weight:bold;overflow:hidden;margin-top:10px;}
.xiangmu li .p2{line-height:24px;height:96px;overflow:hidden;}
.xiangmu li a{display:block;width:100px;height:30px;line-height:30px;border-radius:15px;border:1px solid #dd3b30;float:right;text-align:center;color:#dd3b30;margin-right:20px;}
.xiangmu li a:hover{background:#dd3b30;color:#fff;}
/*公益新闻*/
.xinwen .title{font-size:20px;color:#fff;text-align:center;}
.xinwen .title span{display:block;width:200px;height:30px;line-height:30px;margin:auto;background:#dd3b30;}
.xinwen li{width:100%;height:40px;line-height:40px;border-bottom:1px dashed #dd3b30;}
.xinwen li p{width:800px;float:left;overflow:hidden;}
.xinwen li a{color:#333;font-size:16px;font-weight:bold;}
.xinwen li a:hover{color:#dd3b30;}
.xinwen li span{float:right;}
/*公益图集*/
.tuji .title{font-size:20px;color:#fff;text-align:center;}
.tuji .title span{display:block;width:200px;height:30px;line-height:30px;margin:auto;background:#dd3b30;}
.tuji ul{margin-top:10px;}
.tuji li{width:480px;float:left;margin:10px;}
.tuji li img{display:block;width:480px;height:320px;}
.tuji li p{width:100%;height:30px;line-height:30px;background:#dd3b30;color:#fff;text-align:center;font-size:20px;}
/*报名*/
.baoming .title{font-size:20px;color:#fff;text-align:center;}
.baoming .title span{display:block;width:200px;height:30px;line-height:30px;margin:auto;background:#dd3b30;}
.baoming p{font-size:20px;line-height:30px;margin-bottom:20px;}
.baoming .input-box{height:30px;line-height:30px;font-size:20px;margin-bottom:20px;}
.baoming .input-box span{display:block;width:100px;float:left;}
.baoming .input-box input{display:block;width:300px;height:28px;border:1px solid #333;}
.baoming .button{display:block;width:100px;height:30px;border:none;background:#dd3b30;color:#fff;font-size:20px;margin-left:150px;cursor:pointer;}
/*详情*/
.xiangqing .weizhi{height:30px;line-height:30px;border-bottom:1px solid #dd3b30;color:#000;}
.xiangqing .weizhi a{color:#000;}
.xiangqing .weizhi a:hover{text-decoration:underline;}
.xiangqing .pic1{float:right;margin-left:20px;margin-top:20px;}
.xiangqing .pic2{float:left;width:300px;margin-right:20px;margin-top:20px;}
.xiangqing .pic3{display:block;margin:auto;}
.xiangqing h3{text-align:center;line-height:30px;margin-top:10px;}
.xiangqing p{line-height:2;text-indent:28px;}
.xiangqing .btn{display:block;width:100px;height:30px;line-height:30px;border-radius:15px;border:1px solid #dd3b30;text-align:center;color:#dd3b30;margin:20px auto;}
.xiangqing .btn:hover{background:#dd3b30;color:#fff;}.tablink {background-color: #dd3b30;color: white;float: left;border: none;outline: none;cursor: pointer;padding: 14px 16px;font-size: 17px;width: 33.3333333%;
}.tablink:hover {background-color: #777;
}
.welcome1{width:1000px;margin:auto;
}
/* Style the tab content */
.tabcontent {color: white;display: none;padding: 50px;text-align: center;
}
#oldman{height: 350px;background-image: url("https://images.pexels.com/photos/2884575/pexels-photo-2884575.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500");
}
#children{height: 350px;background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2531661478,1804846467&fm=26&gp=0.jpg");
}
#poor{height: 350px;background-image: url("https://images.pexels.com/photos/1125850/pexels-photo-1125850.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500");}```
四、遇到的问题及解决方案
*问题一：如何消除图片的边距，是图片贴边展示？
问题描述：当我需要顶部的banner横向充满整个屏幕以显示宽屏效果时，把这个banner的width设置为100%，我们发现边上会有一些边距，如图：
解决方法；
在CSS的body中设置两个属性：
margin:0px;
padding:0px;
问题二：如何使得div随着嵌入其中的浮动div一起变大？
问题描述：一个DIV中嵌入浮动的层div，如果里面这个浮动的div加入内容变高之后，他的父层也就是外面的div是不会随着里面的div变大而变大的
解决方法：
要在父层的div的CSS中加入两个属性：
overflow:hidden;
zoom:1;
问题三：.margin-top,margin-bottom不能正常显示时，怎么办？
**解决方法：
在子层的前后加上一个
height:0;
overflow:hidden;
}
问题四：如何使得div的子层居底部对齐？
解决方法：运用position定位
#box{
position:relative;
border:1px solidred;
width:600px;
hegiht:400px;
}div子层
#box .wrap{
position:absolute;
bottom:0;border:1px dashedblue;
width:200px;
height:100px
}
问题五：排列时边框重叠问题
解决办法：设置，margin-right：-1px; margin-bottom: -1px;padding-bottom: 1px;来解决下边框隐藏问题。