使用CSS的外链方式，写了一个五环

CSS的布局

附加radius的使用

思路：

一个大盒子里放两个子盒子；

两个子盒子上下排列，分别放3个和2个盒子用来制作圆环；

大盒子给相对定位，连个子盒子设为绝对定位；

用到CSS中的 border-radius 方法制作圆环，前提是用来制作圆环的五个盒子要添加边框 border 这个属性

  
html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

<!--CSS的外链方式-->
        <link rel="stylesheet" href="css/base.css" />
        <title>五环</title>
    </head>
    <body>
        <!--给一个大盒子外框-->
        <div class="radius">
            <!--子盒子一放上面三个环-->
            <div class="sub">
                <div class="b-r a"></div>
                <div class="b-r b"></div>
                <div class="b-r c"></div>
            </div>
            <!--子盒子二放下面两个环-->
            <div class="sup">
                <div class="b-r d"></div>
                <div class="b-r e"></div>
            </div>
        </div>
    </body>
</html>

  
CSS代码 /*给外面的盒子添加样式和定位，主要是为了给五个环一个整体的定位*/
.radius{
    position: relative;
    width: 300px;
    height: 150px;
    margin: 0 auto;
    padding: 0;
    background-color: lightskyblue;
}

/*给五个将要设置成环的盒子统一设置CSS样式*/
.b-r{
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 50%;/*radius的使用，给一个正方形设置50%可制作一个圆*/
}
/*分别给五个环盒子添加边框和颜色，边框即圆环*/
.a{
    border: 10px solid blue;
}
.b{
    border: 10px solid black;
}
.c{
    border: 10px solid green;
}
.d{
    border: 10px solid yellow;
}
.e{
    border: 10px solid red;
}

/*然后对上三个环和下两个环进行绝对定位，构成一个五环标记图*/
.sub{
    width: 300px;
    height: 100px;
    position: absolute;
    float: left;
    /*background-color: aquamarine;*/
}
.sup{
    width: 200px;
    height: 100px;
    position: absolute;
    margin: 50px;  
    /*background-color: cornflowerblue;*/
}

  

这是最终的效果

陌陌说：我们在使用CSS的布局时，可以先构思出一个整体的画面和给对应盒子临时性添加背景颜色，这样是有帮助我们看清盒子之间的层级关系从而提高效率哦

CSS + radius 五环的更多相关文章

  1. html+css制作五环（代码极简）

    五环 把五环做成一个浮动,总是位于屏幕中央的效果. 难点 定位的练习 position :fixed 位于body中间的时候 left:50%:top:50%; css内部样式表的使用 style=& ...

  2. HTML+CSS编写五环居中案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  4. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  5. Div+Css中transparent制作奥运五环

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. html+css实现奥运五环(环环相扣)

    <!DOCTYPE html> <html> <head> <title>奥运五环</title> <style type=" ...

  7. 用html和css制作奥运五环

    <html><head><meta charset="utf-8"> <style>.circle1,.circle2,.circl ...

  8. 前端css框架SASS使用教程（转）

    一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一 ...

  9. CSS系列——前端进阶之路：初涉Less

    前言:最近帮一个朋友解决点问题,在查看组件源码的时候涉及到了less语法,这可难倒博主了.没办法,既然用到就要学呗,谁让咱是无所不能的程序猿呢!所以今天来学习下Less,算是笔记,也希望给初学less ...

随机推荐

  1. JVM 总结

    面试 java 虚拟机 jvm 基础 jvm Write Once Run EveryWhere >jar 包可以在任何兼容jvm上运行 >jvm 适配器 屏蔽掉底层差异 >内存管理 ...

  2. codevs 3498 小木棍

    3498 小木棍  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 乔治有一些同样长的小木棍,他把这些木棍随意 ...

  3. TP-Link的Atheros芯片的WR886n v5 安装SuperWRT系统

    安装SuperWRT系统 本教程以TP-Link的Atheros芯片的WR886n v5为例,教新手如何刷入一个已支持设备的固件. 下载设备固件请访问:这里 (没有支持你的设备?自由动手一下:hack ...

  4. 解决VS命令提示符 “Setting environment for using Microsoft Visual Studio. 此时不应有“系列错误

    一.起因 近期在玩Boost库.当然首先是要进行Boost库的安装和配置.于是浅墨Google了一下boost库的安装配置攻略.下载了最新版1.55的boost库.就愉悦地開始进行配置了. 当进行到第 ...

  5. 设计并实现一个LRU Cache

    一.什么是Cache 1 概念 Cache,即高速缓存,是介于CPU和内存之间的高速小容量存储器.在金字塔式存储体系中它位于自顶向下的第二层,仅次于CPU寄存器.其容量远小于内存,但速度却可以接近CP ...

  6. 通过构建Cocoapods私有库进行组件化开发探索

    专题一 一.创建私有索引库 选Github或者码云都可以,本例以Github为例.创建私有索引库用来作为自己组件库的索引: 二.本地添加私有索引库 添加:pod repo add 索引库名称 索引库地 ...

  7. mysql group by 组内排序 group by 原理

    mysql group by 组内排序   SELECT * FROM (SELECT MAX(id) AS t,wukong_uid, 1 AS tag FROM  toutiao_uid_gath ...

  8. 【OI】关于快速幂的简单理解

    都知道算某个数的幂需要线性的复杂度,为了优化复杂度,就出现了所谓的快速幂. 快速幂的代码很短,但是要原理需要一点心思. 首先,我们知道, a^b = a^c * a^d (c+d=b) 那么,不就可以 ...

  9. ubuntu14安装docker-ce

    先卸载旧的docker sudo apt-get remove docker docker-engine docker.io docker-ce 通过HTTPS使用存储库(repository) su ...

  10. linux 查看php扩展

    php -i |less 查看配置文件在哪里,编译参数 php -m |less 查看php加载的模块 less可以自由的上下访问,比more要灵活一点. 如果不使用less,信息一次性给予,不太好查 ...