绘制自适应奥运五环

怼烎@ 2022-05-24 12:28 125阅读 0赞

## **一、 绘制自适应五环** ##

1. 实现结果:

设计出五环的正确颜色和形状，并放置浏览器中间.

2. 设计思路

首先我们用5个div块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素div放置到浏览器中间位置。

3. 设计需知

(1).div

div的作用:div是一个块级元素。它可以将html分割成独立的、不同的部分。如果用id和class来标记div，那么该标签便可以被css所使用变的更有效，通过id或class设计各种的样式。

我们将用div元素来绘制五环的颜色和形状。

(2).需要用到的样式属性及其用法

<table> 
 <tbody> 
  <tr> 
   <td><p>属性</p></td> 
   <td><p>使用说明</p></td> 
  </tr> 
  <tr> 
   <td><p>margin</p></td> 
   <td><p>设置外边距</p> <p>margin: 上外边距值 右外边距值 下外边距值 左外边距值</p> <p>margin: 上外边距值 左右外边距值 下外边距值</p> <p>margin: 上下边距值 左右边距值</p> <p>margin: 所有的外边距值</p> <p>(padding与margin用法相同)</p></td> 
  </tr> 
  <tr> 
   <td><p>padding</p></td> 
   <td><p>设置内边距</p></td> 
  </tr> 
  <tr> 
   <td><p>position</p></td> 
   <td><p>设置元素的定位类型</p> <p>position: absolute (相对于父级元素定位)</p> <p>position: fixed(相对于浏览器窗口定位)</p></td> 
  </tr> 
  <tr> 
   <td><p>height</p></td> 
   <td><p>设置高度</p> <p>height: 高度值</p></td> 
  </tr> 
  <tr> 
   <td><p>width</p></td> 
   <td><p>设置宽度</p> <p>width: 宽度值</p></td> 
  </tr> 
  <tr> 
   <td><p>border</p></td> 
   <td><p>设置边框</p> <p>border:边框宽度 边框样式 边框颜色</p></td> 
  </tr> 
  <tr> 
   <td><p>border-radius</p></td> 
   <td><p>设置圆角边框</p> <p>border-radius: 圆角值</p></td> 
  </tr> 
  <tr> 
   <td><p>left</p></td> 
   <td><p>设置元素距离左边长度</p></td> 
  </tr> 
  <tr> 
   <td><p>top</p></td> 
   <td><p>设置元素距离上面长度</p></td> 
  </tr> 
 </tbody> 
</table>

4. 设计细节

(1). html设计:

首先给5个环设置class用来css文件关联样式，并把这5个环放置一个父级div中

代码如下:

</div>

(2). css样式设计

通过绑定html中设置好的class，然后绘制五个环的形状和大小还有位置

如下:

.circle1,.circle2,.circle3,.circle4,.circle5\{

position: absolute; //设置为相对于父级div的位置

height:100px; //图形的高度

width: 100px; //图形的宽度