梁少爷的前端之旅5（两个简单的小例子）

今天写两个实例
1.奥运五环

css

.xiaokuang 
{   position: absolute;
	width:100px;
    height:100px;
	border:10px solid black;
	border-radius:50%;
	border-color: red;	
	left:0px;
	top:0px;
}
.xiaokuang1 
{   position: absolute;
	width:100px;
    height:100px;
	border:10px solid black;
	border-radius:50%;
	border-color: blueviolet;	
	left:120px;
	top:0px;
}

就在这展示两个环实现五环的话可以自己再加自己设置位置就好
当然其实可以简单点就是把相同的类型如：width：100px 这种的提出来提前一次性写完相同的属性

<div  class="plat">                                      加框用的
<div class="xiaokuang"></div>	
		<div class="xiaokuang1"></div>
</div>

.plat{
	position: absolute;
	width:380px;
    height:200px;
	border:5px solid black;
	left:50%;
	top:50%;                       <!--这里我们把它设为相对网页绝对居中 -->
}
.xiaokuang 
xiaokuang 1
xiaokuang 2
{
 position: absolute;
	width:100px;
    height:100px;
	border:10px solid black;               <!--线的粗细10px分辨率  实心  黑色边-->
	border-radius:50%;
	}
	.xiaokuang 
	{
		border-color: red;	
	left:0px;
	top:0px;
	}

这样可以省很多时间后面加也方便

注意的是：1.这里一定要 position: absolute;
2.border-radius:50%;（这个可能大部分都知道 border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。）

梁少爷的前端之旅5（两个简单的小例子）
（懒得写5个了！）
2.两栏布局

.right{
	position: absolute;
	width:30px;
    height:100px;
    right:0;                                关键
background-color: #0000FF;
}
.left{
	margin-right:100px;                     关键
	
    height:100px;
background-color: #123;
}

<div class="right"></div>
		
	    <div class="left"></div>          注意这里的left和right不能调换顺序

梁少爷的前端之旅5（两个简单的小例子）

相关推荐