`
stargaga
  • 浏览: 18688 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
社区版块
存档分类
最新评论

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

 
阅读更多
两个： 
<!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>
1
顶
0
踩
分享到：
| css中的样式缩写 border/margin/backgroun ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics