某天的作业

最新推荐文章于 2022-04-06 17:00:42 发布

原创最新推荐文章于 2022-04-06 17:00:42 发布 · 362 阅读

1 ·

CC 4.0 BY-SA版权

作者分享了使用HTML和CSS实现特定设计的作业过程，包括样式应用、布局调整及图片元素整合。作业最终效果在Firefox32.03中展示，强调了字体的调整与整体视觉呈现。

学习HTML/CSS也有段时间了，这是某天老师布置的作业，贴出自己的代码来，望批评指正。

作业：用HTML/CSS实现下图：

实现代码如下：

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	.bg
	{
		margin: auto;
		font-family: Arial;
		color: white;
		width: 292px;
		height: 592px;
	}
	.p1
	{
		font-size: 15px;
		font-weight: bold;
		height: 67px;
		line-height: 67px;
		background-color: rgb(79,192,232);
		text-align: center;
	}
	.p2
	{
		margin-top: 18px;
		height: 195px;
		background-color: rgb(79,192,232);
	}
	.p2_1
	{
		float: left;
		width: 75px;
		height: 75px;
		line-height: 75px;
	}
	.p2_2
	{
		font-size: 15px;
		font-weight: bold;
		float: left;
		width: 217px;
		height: 75px;
		line-height: 75px;
	}
	.p2_3
	{
		position: relative;
		left: 12px;
		top: 4px;
		height: 120px;
		font-size: 13px;
		line-height: 19px;
		word-spacing: -1px;
	}
	.p3
	{
		margin-top: 18px;
		height:295px;
		background-color: rgb(79,192,232);
	}
	.p3_1
	{
		height: 55px;
		background-color: rgb(59,174,218);
	}
	.p3_1_1
	{
		position: relative;
		left: 15px;
		top: 15px;
		width: 55px;
		float: left;
	}
	.p3_1_2
	{
		width: 182px;
		font-size: 15px;
		font-weight: bold;
		line-height: 55px;
		text-align: center;
		float: left;
	}
	.p3_1_3
	{
		position: relative;
		left: 15px;
		top: 15px;
		width: 55px;
		float: left;
	}
	.p3_2
	{
		height: 240px;	
		text-align: center;
	}
	.p_button
	{
		margin-left: auto;
		margin-right: auto;
		width: 160px;
		height: 45px;
		background-color: rgb(9,174,218);
		line-height: 45px;
		font-size: 15px;
	}
	</style>
</head>
<body>
	<div class="bg">
		<div class="p1"><b>LOAD MORE</b></div>
		<div class="p2">
			<div class="p2_1"><img src="la.png"></div>
			<div class="p2_2">   <b>LOREM IPSUM DOLOR</b></div>
			<div class="p2_3">
				Quisque posuere risus erat at scelerisque felis <br />
				pulvinar quis.Maecenas arcu lorem,laoreet at <br />
				dui in,hendrerit mattis mi.Sed eu vehicula lectus <br />
				felis pulvinar quis.Maecenas arcu lorem,laoreet <br />
				at posuere risus erat.<b>Read More</b>
			</div>
		</div>
		<div class="p3">
			<div class="p3_1">
				<div class="p3_1_1"><img src="arrow.png"/></div>
				<div class="p3_1_2">WEDNESDAY</div>
				<div class="p3_1_3"><img src="arrow2.png"/></div>
			</div>
			<div class="p3_2">
				<div style="font-size:140px;">26</div>
				<div class="p_button"><b>ADD EVENT</b></div>
			</div>
		</div>
	</div>
</body>
</html>

说明：

arrow.png&arrow2.png分别是25pixel×25pixel的两个小箭头。

la.png则是75pixel×75pixel的小喇叭

最终效果如下（in Firefox 32.03）：

字体差的有点多，但是效果自认为还是不错的。