一、 绘制自适应五环
1. 实现结果:
设计出五环的正确颜色和形状，并放置浏览器中间.
2. 设计思路
首先我们用5个div块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素div放置到浏览器中间位置。
3. 设计需知
(1).div
div的作用:div是一个块级元素。它可以将html分割成独立的、不同的部分。如果用id和class来标记div，那么该标签便可以被css所使用变的更有效，通过id或class设计各种的样式。
我们将用div元素来绘制五环的颜色和形状。
(2).需要用到的样式属性及其用法
属性 |
使用说明 |
margin |
设置外边距 margin: 上外边距值 右外边距值 下外边距值 左外边距值 margin: 上外边距值 左右外边距值 下外边距值 margin: 上下边距值 左右边距值 margin: 所有的外边距值 (padding与margin用法相同) |
padding |
设置内边距 |
position |
设置元素的定位类型 position: absolute (相对于父级元素定位) position: fixed(相对于浏览器窗口定位) |
height |
设置高度 height: 高度值 |
width |
设置宽度 width: 宽度值 |
border |
设置边框 border:边框宽度 边框样式 边框颜色 |
border-radius |
设置圆角边框 border-radius: 圆角值 |
left |
设置元素距离左边长度 |
top |
设置元素距离上面长度 |
4. 设计细节
(1). html设计:
首先给5个环设置class用来css文件关联样式，并把这5个环放置一个父级div中
代码如下:
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
(2). css样式设计
通过绑定html中设置好的class，然后绘制五个环的形状和大小还有位置
如下:
.circle1,.circle2,.circle3,.circle4,.circle5{
position: absolute; //设置为相对于父级div的位置
height:100px; //图形的高度
width: 100px; //图形的宽度
border:10px solid black; //图形的宽度 样式 颜色
border-radius:50%; //设置为圈形
}
(3).绘制每个环的颜色和位置
这里要注意，每个环的颜色不同，位置是需要简单的计算，第一个环的位置相对于父级div是距左0距上0，因为圆的半径为50px，所以第二个环的位置应该是距左105距上0(中间留了5px的缝隙)，以此类推。
代码如下:
.circle1{
border-color: red;
left: 0;
top: 0;
}
.circle2{
border-color: yellow;
left: 105px;
top: 0;
}
.circle3{
border-color: blue;
left: 210px;
top: 0;
}
.circle4{
border-color: green;
left: 52.5px;
top: 75px;
}
.circle5{
border-color: black;
left: 157.5px;
top: 75px;
}
(4).设计父级div的位置
首先要知道，我们设计的5环是在div内部，所以调整div的位置便可以实现浏览器居中i效果。
.plat{
position: fixed; //设置为相对于浏览器
left: 50%; //设置到浏览器中间长度
top: 50%; //设置到浏览器中间高度
margin-left:-157.5px;
margin-top:-90px;
}
若是没有为margin-left和margin-top赋负值的话，你会发现 这个五环的左上角在中间位置
所以需要注意的是计算出你所设计的五环的长和宽并且减去长和宽的距离。
生成效果如下:
