使用CSS的外链方式,写了一个五环
CSS的布局 附加radius的使用 |
思路: 一个大盒子里放两个子盒子; 两个子盒子上下排列,分别放3个和2个盒子用来制作圆环; 大盒子给相对定位,连个子盒子设为绝对定位; 用到CSS中的 border-radius 方法制作圆环,前提是用来制作圆环的五个盒子要添加边框 border 这个属性 |
|
html代码 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--CSS的外链方式--> |
|
CSS代码 | /*给外面的盒子添加样式和定位,主要是为了给五个环一个整体的定位*/ .radius{ position: relative; width: 300px; height: 150px; margin: 0 auto; padding: 0; background-color: lightskyblue; } /*给五个将要设置成环的盒子统一设置CSS样式*/ /*然后对上三个环和下两个环进行绝对定位,构成一个五环标记图*/ |
这是最终的效果
陌陌说:我们在使用CSS的布局时,可以先构思出一个整体的画面和给对应盒子临时性添加背景颜色,这样是有帮助我们看清盒子之间的层级关系从而提高效率哦