<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css.css">

    <title>Document</title>

</head>

<body>

    <div class="plat">

        <div class="circle1"></div>

        <div class="circle2"></div>

        <div class="circle3"></div>

        <div class="circle4"></div>

        <div class="circle5"></div>

    </div>

</body>

</html>

css代码如下

* {

    margin:;

    padding:;

}

.plat {

    position: absolute;

    left: 50%;

    top: 50%;

    margin-left: -190px;

    margin-top: -93px;

    height: 186px;

    width: 380px;

}

.circle1,

.circle2,

.circle3,

.circle4,

.circle5 {

    position: absolute;

    width: 100px;

    height: 100px;

    border: 10px solid red;

    border-radius: 50%;

}

.circle1 {

    border-color: red;

    left:;

    top:;

}

.circle2 {

    border-color: green;

    left: 130px;

    top: 0px;

    z-index:;

}

.circle3 {

    border-color: yellow;

    left: 260px;

    top: 0px;

}

.circle4 {

    border-color: olive;

    left: 65px;

    top: 65px;

}

.circle5 {

    border-color: pink;

    left: 195px;

    top: 65px;

}

结果显示如下：

参考自腾讯课堂！

谢谢

HTML+CSS编写五环居中案例的更多相关文章

  1. 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

    使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...

  2. css中关于居中的那点事儿

    css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

  3. css中各种居中的奇技淫巧总结

    css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200 ...

  4. HTML+CSS编写规范

    在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...

  5. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. css编写注意事项（不定时更新）

    CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...

  7. 个人css编写规范

    前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...

  8. css布局---各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  9. CSS编写指导规范和建议

    在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...

随机推荐

  1. Odoo XML中操作记录与函数

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826037.html 一:XML文件中定义记录 XML中定义记录: 每个<record>元素有 ...

  2. nohup 、&、 2>&1 命令分析

    nohup的意思是不间断的运行,&的意思是后台运行,2>&1的意思是标准输出和错误输出都重定向到同一个文件. 简单地说nohup运行时即使关掉控制台,它该运行还是运行. http ...

  3. Beta冲刺博客汇总（校园帮-追光的人）

    所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 汇总Beta阶段的博客,方便查看 冲刺日志 Beta之前-凡事预则立(校园帮-追光的人)5-22 Beta冲刺 ...

  4. Ofbiz项目学习——阶段性小结——更新数据

    一.根据一个字段进行修改 /** * 根据一个字段进行修改(这个条件字段可以是主键, 也可以不是主键) * @param dctx * @param context * @return */ publ ...

  5. Codeforces Round #552 (Div. 3)-D-Walking Robot-（贪心）

    http://codeforces.com/contest/1154/problem/D 解题: 1.无光的时候优先使用太阳能电池. 2.有光的时候 (1)太阳能电池没满电,让它充,使用普通电池 (2 ...

  6. python - 全局中间件（2.7）

    一.场景 在网站的所有页面中可能某些地方都需要相同的数据,此时可以在Django中定义全局数据并存储在session中,或使用模板语言放入页面中 注意:一定要加上 try: 进行潜在的异常捕捉,因为一 ...

  7. [CF787D] legacy

    题目 Rick和他的同事们研究出了一种新的有关放射的公式,于是许多坏人就在追赶他们.所以Rick希望在被坏人抓住之前把遗产给Morty. 在他们的宇宙里总共有n颗行星,每颗行星有它自己的编号(编号为1 ...

  8. MySQL中SUM和COUNT的区别

    COUNT:是对记录进行汇总,即计数 SUM:是对符合条件的数值列字段进行求和 原表数据如下: 1,当在where子句中使用Price>25时, COUNT函数返回的是符合条件的记录,SUM函数 ...

  9. 6-网页,网站,微信公众号基础入门(PHP学习_1)

    https://www.cnblogs.com/yangfengwu/p/11037675.html 安装PhpStrom http://www.jetbrains.com/phpstorm/ 然后百 ...

  10. JavaScript 中 call()、apply()、bind() 的用法

    "use strict"; ; var obj = { name:'小李', age:, getInfo(from, to) { console.log(arguments) co ...