CSS + radius 五环

使用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的布局时,可以先构思出一个整体的画面和给对应盒子临时性添加背景颜色,这样是有帮助我们看清盒子之间的层级关系从而提高效率哦

时间: 2024-11-10 01:00:49

CSS + radius 五环的相关文章

CSS-论css如何纯代码实现内凹圆角

进行中...今天没时间了,明天继续研究.挂上来,怕自己忘了这个问题. <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>内凹圆角</title> <style type="text/css"> .radius { width: 100px; height: 50px; line-height: 50px; displ

IE兼容CSS3圆角border-radius的方法

IE兼容CSS3圆角border-radius的方法 优化网站js效果,网上看见一个很简单方便的兼容圆角的方法,记下来. 和大家分享一下,知道的高手就当捧个过场.嘻嘻 1.下载border-radius.htc 2.CSS .radius{ -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc); } 优点: 一.最为方便让IE实现圆角

js实现左右点击图片层叠滚动特效

需要加载js有 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/jquery.corner.js"></script><script type="text/javascript" src=

Div+Css(1):Div+Css中transparent制作奥运五环

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>奥运五环</title> <style type="text/css"> body{ margin: 20px; background-color: #efefef; } ul.flag{ list-style: none;

CSS之居中五环

<div class="plat"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="

php验证码+缩略图+饼状图+五环图

@1.验证码 1 captcher.php 2 header('Content-type:image/png'); 3 session_start(); 4 $img = imagecreate(100, 30); 5 $captcha = array( 6 'a', 'b', 'c', 'd', 'e', 'f', 7 'g', 'h', 'i', 'j', 'k', 'l', 8 'm', 'n', 'o', 'p', 'q', 'r', 9 's', 't', 'u', 'v', 'w',

关于前端CSS预处理器Sass的小知识!

前面的话 ??"CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提 供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用 定义 ??Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能.Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式

【CSS】使用边框和背景

1. 应用边框样式 先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border-style 和 border-color . <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"

领会CSS,灵感

说来惭愧自认为对css了解,但在项目中却很少有正确的使用css,如果面向对象的css吧,其实也不是不想用而是css天生就是面向对象的,高度可重用,但是如果把每个都单独提取,难免会有过多的class以及自己也比较懒. 你要干嘛就选择什么样的标签,命名也一样.从内容本质出发,它是干什么的. 微型格式,如果某些内容需要的标签没有,可以使用class来代替 class="vcard"联系信息. 通过需求和流程图可以事先考虑如何布局使用什么元素. 标签的使用: ul无序列表 ol有序列表 dl&