css前端笔试题--分别用2、3、5个div实现十字架效果-CSDN博客

两个：


<!DOCTYPE HTML>
<html>
<style type="text/css">
div{
	background:red;	
	position:absolute;
	top:50%;
	left:50%;
	width:50px;
	height:50px;
}
#d1{
	width:150px;
	margin: -25px 0px 0px -75px;
}
#d2{
	height:150px;
	margin: -75px 0px 0px -25px;
}
</style>
<body>
<!-- 用两个div实现十字架 -->

<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

三个：


<!DOCTYPE HTML>
<html>
<style type="text/css">
div{
	background:red;	
	position:absolute;
	top:50%;
	left:50%;
	width:50px;
	height:50px;
}
#d1{
	margin: -75px 0px 0px -25px;
}
#d2{
	width:150px;
	margin: -25px 0px 0px -75px;
}
#d3{
	margin: 25px 0px 0px -25px;
}
</style>
<body>
<!-- 用三个div实现十字架 -->

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>

五个：


<!DOCTYPE HTML>
<html>
<style type="text/css">
div{
	background:red;	
	position:absolute;
	width:50px;
	height:50px;
	top:50%;
	left:50%;
}
#d1{
	margin: -75px 0px 0px -25px;
}
[id ^= d2]{
	margin: -25px 0px 0px -25px;
}
#d2_1{
	margin-left:-75px;	
}
#d2_3
{
	margin-left:25px;	
}
#d3{
	margin: 25px 0px 0px -25px;
}
</style>
<body>
<!-- 用五个div实现十字架 -->

<div id="d1"></div>
<div id="d2_1"></div>
<div id="d2_2"></div>
<div id="d2_3"></div>
<div id="d3"></div>
</body>
</html>