CSS 案例1--制作五环

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;

}





阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页