CSS 案例1--制作五环

最新推荐文章于 2021-11-15 16:45:29 发布

DK_bin

最新推荐文章于 2021-11-15 16:45:29 发布

阅读量1.8k

点赞数 2

分类专栏：前端案例 IT前端知识学习

本文链接：https://blog.csdn.net/qq_32124881/article/details/80319824

版权

IT前端知识学习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端案例

5 篇文章 0 订阅

订阅专栏

1、奥运五环

把奥运五环做成一个浮动，总是位于屏幕中央的效果。

2、难点

定位的练习。position ：fixed

位于body中间的时候 left：50%；top:50%;

margin-left:-半个身长；

margin-top:-半个身高;

注意：子集基于父级的剧中呢？

3、代码

	<div class="wrapper">
		<div class="huan1 black position1" ></div>
		<div class="huan1 yellow position2"></div>
		<div class="huan1 blue position3"></div>
		<div class="huan1 green position4"></div>
		<div class="huan1 red position5"></div>		
	</div>

.black{
	border-color: black;
}
.position1{
	position: absolute;
	left: 95px;
	top:0px;
	z-index: 3;
}
.yellow{
	border-color: yellow;
}
.position2{
	position: absolute;
	left: 45px;
	top:50px;
}
.blue{
	border-color: blue;
}
.position3{
	position: absolute;
	left: 0px;
	top:0px;
}

.green{
	border-color: green;
}
.position4{
	position: absolute;
	left: 140px;
	top:50px;
}
.red{
	border-color: red;
}
.position5{
	position: absolute;
	left: 190px;
	top:0px;
}
.huan1{
	width: 80px;
	height:80px;
	border-width: 5px;
	border-style: solid;
	border-radius: 50%;
}
.wrapper{
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left:-140px;
	margin-top: -70px;
	width: 280px;
	height: 140px;
}

4、效果

5、拓展---剧中问题总结

（1）、文字位于盒容器的居中--搜索标签

 	<div class="sousuo">
 		<a href="http://www.baidu.com">搜索产品</a>
 	</div>

div.sousuo{
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	height: 30px;
	width:85px;
	line-height: 30px;
	background-color: #f40;
	border-width: 1px;
	border-radius: 50%;
	margin: 50px;
}
a:hover{
	color: green;
}

（2）、盒元素基于body的居中--如上面五环的例子

不再写了。

（3）、子集盒元素基于父级盒元素的居中--margin塌陷

bfc解决方案

position:absolute;

display:inline-box;

float:left/right;

overflow:hidden;

方法一百分比+计算：

 	<div class="box_1">
 		<div class="box_2">
 			
 		</div>
 	</div>

.box_1{
	position: fixed;
	left: 50%;
	top: 50%;
	margin-top:-50px;
	margin-left: -50px;
	height: 100px;
	width: 100px;
	background-color: green;
}

.box_2{
	position: absolute;
	left: 25px;
	top:25px;
	height: 50px;
	width: 50px;
	background-color: red;
}

方法二：

两次百分比

 	<div class="box_1">
 		<div class="box_2">
 			
 		</div>
 	</div>

.box_1{
	position: fixed;
	left: 50%;
	top: 50%;
	margin-top:-150px;
	margin-left: -150px;
	height: 300px;
	width: 300px;
	background-color: green;
}

.box_2{
	position: absolute;
	left: 50%;
	top:50%;
	margin-left: -25px;
	margin-top: -25px;
	height: 50px;
	width: 50px;
	background-color: red;
}

经过马老师点拨了一下，用两次百分比就搞定了，效果：

方法三：

子集的内容区覆盖父级的宽度，增加父级的padding值

 	<div class="box_1">
 		<div class="box_2">
 			
 		</div>
 	</div>

.box_1{
	width: 100px;
	height: 100px;
	backgrongd-color:red;
	padding: 10px;
	border:10px solid black;
	margin: 100px;
}
.box_2{
	width: 100px;
	height: 100px;
	background-color: green;
	
}

方法四：左右对齐

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS初识</title>
	<link rel="stylesheet" href="CSS初识样式表.css">
</head>
<body>
	 <!-- 居中总结 -->
	 <!-- 方法一 -->
	 <div>这里是内容区，用margin 来实现左右居中</div>




</body>
</html>

*{
	margin: 0;
	padding: 0;
}
body{
	text-align: center;
}
div{
	width: 60%;
	height: 100px;
	background-color: red;
	/*margin-left   margin-right  同时为auto 的时候，作用居中*/
	margin-left: auto;
	margin-right: auto;

}

DK_bin

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS 案例1--制作五环

1、奥运五环把奥运五环做成一个浮动，总是位于屏幕中央的效果。2、难点定位的练习。position ：fixed 位于body中间的时候 left：50%；top:50%;margin-left:-半个身长；margin-top:-半个身高;注意：子集基于父级的剧中呢？3、代码 &lt;div class="wrapper"&gt; &lt;div class="huan1 ...
复制链接

扫一扫