用html+css简单写一个奥运五环
1：效果图展示
2：关键点
1）将元素固定到屏幕中央
2）使用盒子模型，内部一个环固定位置，其他四个环根据合理的位置相对固定
3：代码段展示
html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/lesson.css"/></head><body><div class="wrapper"><div class="blue yuan"></div><div class="black yuan"></div><div class="red yuan"></div><div class="yellow yuan"></div><div class="green yuan"></div></div></body></html>
css
*{margin: 0;padding: 0;}div{width: 150px;height: 150px;}div.wrapper {width: 550px;height: 250px;}.green{position: absolute;left:280px;top: 80px;border: 10px solid green;}.red{position: absolute;left:360px;top: 0px;border: 10px solid red;}.yellow{position: absolute;left:80px;top: 80px;border: 10px solid yellow;}.black{position: absolute;left:180px;top: 0px;border: 10px solid black;}.blue{border: 10px solid blue;}.yuan{border-radius: 50%;}.wrapper{position: fixed;left: 50%;top: 50%;margin-left: -265px;margin-top: -125px;}
