使用1个标签，2个标签，3个标签，5个标签实现一个十字架

最新推荐文章于 2021-10-12 20:29:07 发布

众乐-Ryan

最新推荐文章于 2021-10-12 20:29:07 发布

阅读量1k

点赞数

分类专栏： web前端 css 文章标签： web前端 css

本文链接：https://blog.csdn.net/fendouzhe123/article/details/42029723

版权

web前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

2、请使用1个标签，2个标签，3个标签，5个标签实现一个如下图的水平、垂直都居中短边为50px，长边为150px的在界面垂直和水平居中红色十字架。（网上已经很多答案，你还能想到哪些方法，不限浏览器）

实现代码如下：

<!DOCTYPE>
<html>
<head>
<style type="text/css">
	/**包裹div样式*/
	div.container{
		width: 150px;
		height:150px;
		float:left;
		margin:10px 0px 0px 10px;
	}
	/**用1个div标签实现*/
	.cross{
		width:50px;
		height:150px;
		background:red;
		vertical-align: middle;
		position:relative;
		left:50px;
	}
	.cross:before{
		position: absolute;
		top:50px;
		left:-50px;
		
		width:50px;
		height:50px;
		background:red;
		vertical-align: middle;
		content:"";
	}
	.cross:after{
		position: absolute;
		top:50px;
		left:50px;
		
		width:50px;
		height:50px;
		background:red;
		vertical-align: middle;
		content:"";
	}
	/**用2个div标签实现*/
	div.s_first{
		position:relative;
		top:50px;
		left:0px;
		width:150px;
		height:50px;
		background:red;
	}
	div.s_second{
		position:relative;
		top:-50px;
		left:50px;
		width:50px;
		height:150px;
		background:red;
	}
	/**用3个div标签实现*/
	div.t_first{
		position:relative;
		top:0px;
		left:50px;
		width:50px;
		height:150px;
		background:red;
	}
	div.t_second{
		position:relative;
		top:-100px;
		left:0px;
		width:50px;
		height:50px;
		background:red;
	}
	div.t_third{
		position:relative;
		top:-150px;
		left:100px;
		width:50px;
		height:50px;
		background:red;
	}
	/**用5个div标签实现*/
	div.f_first{
		position:relative;
		top:0px;
		left:50px;
		width:50px;
		height:50px;
		background:red;
	}
	div.f_second{
		position:relative;
		top:0px;
		left:0px;
		width:50px;
		height:50px;
		background:red;
	}
	div.f_third{
		position:relative;
		top:-50px;
		left:50px;
		width:50px;
		height:50px;
		background:red;
	}
	div.f_fourth{
		position:relative;
		top:-100px;
		left:100px;
		width:50px;
		height:50px;
		background:red;
	}
	div.f_fifth{
		position:relative;
		top:-100px;
		left:50px;
		width:50px;
		height:50px;
		background:red;
	}
</style>
</head>
<body>
<div class="container">
	<div class="cross"></div>
</div>
<div class="container">
	<div class="s_first"></div>
	<div class="s_second"></div>
</div>
<div class="container">
	<div class="t_first"></div>
	<div class="t_second"></div>
	<div class="t_third"></div>
</div>
<div class="container">
	<div class="f_first"></div>
	<div class="f_second"></div>
	<div class="f_third"></div>
	<div class="f_fourth"></div>
	<div class="f_fifth"></div>
</div>

</body>
</html>

众乐-Ryan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用1个标签，2个标签，3个标签，5个标签实现一个十字架

2、请使用1个标签，2个标签，3个标签，5个标签实现一个如下图的水平、垂直都居中短边为50px，长边为150px的在界面垂直和水平居中红色十字架。（网上已经很多答案，你还能想到哪些方法，不限浏览器）实现代码如下： /**包裹div样式*/ div.container{ width: 150px; height:150px; float:left;
复制链接

扫一扫