“惜水园”网页节水知识板块的设计与实现

一、节水知识板块设计

二、节水知识板块代码
1.HTML代码

<div class="knowledge">
				<div class="case_nav">
					<ul class="u1">
						<li class="l1">
							<span>节水知识</span>
						</li>
						<li class="l2">
							<a href="#">更多</a>
						</li>
					</ul>
				</div>
				<div class="knowledge_two">
					<ul>
						<li>
							<img src="img/1.jpg"/>
							<span>
								身国内信土意识、身识如何掌握时令“以猪畜水”？这关系到如何将自己肾中的这个亥子水真正畜好，如何去养护好肾水。
							</span>
						</li>
						<li class="knowledge_two_margin10">
							<img src="img/2.jpg"/>
							<span>在每年的11月份就应当主动将水囤积起来，以备开春以后使用，甚至可以备夏天使用。
							这关系到如何将自己肾中的这个亥子水真正畜好，如何去养护好肾水。</span>
						</li>
						<li class="knowledge_two_margin10">
							<img src="img/3.jpg" />
							<span>
								在每年的11月份就应当主动将水囤积起来，以备开春以后使用，甚至可以备夏天使用。
								这关系到如何将自己肾中的这个亥子水真正畜好，如何去养护好肾水。
							</span>
							
						</li>
					</ul>
				</div>
			</div>

2.CSS代码

#box .knowledge{
	width: 100%;
	height: 480px;
	margin-top: 10px;
	font-size: 16px;
}

#box .knowledge .knowledge_two{
	width: 100%;
	height: 420px;
	margin-top: 4px;
}
#box .knowledge .knowledge_two ul li{
	width: 32%;
	height: 350px;
	background-color: white;
	float: left;
}

.knowledge_two ul li span {
	width: 500px;
	height: 50px;
}

.knowledge_two ul li img {
	width: 100%;
	height: 350px;
}

.knowledge_two ul li:hover {
	background-color: #55ABF1;
	width: 33%;
}

#box .knowledge .knowledge_two ul .knowledge_two_margin10{
	margin-left: 1.6875rem;
}

三、总结
通过前期收集节水相关的图片素材，我了解到了惜水节水的重要性，特别是同学在任务汇报过程中给我们播放的非洲水资源枯竭的视频，让我更加明白的水资源对于我们的重要性。在制作节水知识板块的过程中，我们遇到了浮动塌陷的问题，通过老师的讲解以及借助互联网，我们最终解决了该任务，实现了一开始设计的效果