css

/*第三屏*/
.screen-3{
	background: #2b333b;
	position:relative;
}
.screen-3__icon{
	width: 107px; 
	height:140px;
	background: url('../img/sc3.png') no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	margin-top: -70px;
}
.screen-3__wrap{
	width: 1200px;
	height: 640px;
	margin: 0 auto;

}

.screen-3__heading{

	font-weight: bolder;
	width: 410px;
	font-size: 36px;
	color: white;
	text-align: left;
	padding-top: 228px;
	margin-left: 676px;
	position: relative;
}
.screen-3__heading::after{
	content: '';
	width: 50px;
	height: 3px;
	background-color: #ff0000;
	position: absolute;
	left: 0;
	bottom: -32px;
	border-radius: 3px;

}
.screen-3__sub-heading{
	width: 550px;
	font-weight: normal;
	font-size: 16px;
	color: white;
	text-align: left;
	padding-top: 26px;
	margin-top: 25px;
	margin-left: 676px;
}

.screen-3__language{
	width: 600px;
	height: 100px;
	margin-left: 676px;
	margin-top: 150px;
}
.screen-3__language__items{
	display: inline-block;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	line-height: 66px;
	text-align: center;
	margin-right: 35px;
}

.screen-3__language__items_color_blue{
	border: 5px solid #1f5975;
	color: #1f5975;
}
.screen-3__language__items_color_purple{
	border: 5px solid #424d76;
	color: #424d76;
}
.screen-3__language__items_color_red{
	border: 5px solid #6b4146;
	color: #6b4146;
}
.screen-3__language__items_color_cyan{
	border: 5px solid #29535f;
	color: #29535f;
}
.screen-3__language__items_color_yellow{
	border: 5px solid #3e4e40;
	color: #3e4e40;
}

html

<div class="screen-3">
		<div class="screen-3__wrap">
			<h2 class="screen-3__heading">强大的语言课程体系支持</h2>
			<h3 class="screen-3__sub-heading">
			学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br/>
			，让你体验开发全流程
			</h3>
			<div class="screen-3__icon"></div>
			<div class="screen-3__language">
				<a class="screen-3__language__items screen-3__language__items_color_blue">HTML5</a>
				<a class="screen-3__language__items screen-3__language__items_color_purple">PHP</a>
				<a class="screen-3__language__items screen-3__language__items_color_red" >JAVA</a>
				<a class="screen-3__language__items screen-3__language__items_color_cyan">Python</a>
				<a class="screen-3__language__items screen-3__language__items_color_yellow">Node.js</a>
			</div>
		</div>
	</div>	

我的做法：标题，首先是按照psd测出的距离来确定大标题的位置，用padding_top和margin-left来实现的，

然后左边的图标，是用定位来实现垂直居中的。右下角的几个圈圈是添加a元素实现的。做出来后缩放如图，感觉哪里不太对，做这屏的时候感觉也很乱。这屏的思路是什么，比如说题目要求内容宽度为1200，有没有更好的方法实现标题居盒子右边，而文字又向左对齐呢？还有右下角圈圈有没有其他实现方法？