<!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. Mycat配置项详解

     schema.xml文件配置中的balance属性和writeType属性: . balance=", 不开启读写分离机制,所有读操作都发送到当前可用的 writeHost 上. . ba ...

  2. 浅谈Python设计模式 - 适配器模式

    声明:本系列文章主要参考<精通Python设计模式>一书,并且参考一些资料,结合自己的一些看法来总结而来. 从本篇便开始介绍结构型设计模式,而适配器设计模式便是该类设计模式的一种,那么什么 ...

  3. H3C 什么是漫游

  4. shell脚本返回值问题

    如果学习过高级语言比如java和c语言等,此时你要是获取一个函数的返回值,直接在函数里面写上return即可,然后在函数执行时将返回结果赋值给某个变量即可.但是在shell脚本中限制较多,因此如果我们 ...

  5. kuangbin专题专题四 Til the Cows Come Home POJ - 2387

    题目链接:https://vjudge.net/problem/POJ-2387 题意:从编号为n的城市到编号为1的城市的最短路. 思路:dijkstra模板题,直接套板子,代码中我会带点注释给初学者 ...

  6. 性能测试基础---测试流程，LR安装

    ·性能测试流程详解: 一般来说,性能测试通常可以分为以下过程: ·前期分析.测试计划.测试方案.测试环境的搭建.测试数据的准备.测试脚本的开发.测试场景的设计.测试场景的实现和执行.资源的监控.分析结 ...

  7. Distance(2019年牛客多校第八场D题+CDQ+树状数组)

    题目链接 传送门 思路 这个题在\(BZOJ\)上有个二维平面的版本(\(BZOJ2716\)天使玩偶),不过是权限题因此就不附带链接了,我也只是在算法进阶指南上看到过,那个题的写法是\(CDQ\), ...

  8. 配置VScode c语言环境

    vscode 提示 <sys/socket.h>找不到, 原来是不同平台上,头文件不一样. 参考:https://blog.csdn.net/qq_28581077/article/det ...

  9. idea忽略.iml文件

    .iml 和 eclipse中的.classpath,.project都属于开发工具配置文件, 也就是在项目导入ide的过程中生成的配置文件,每个人开发环境是不一样的,所以这个文件没必要提交. 而且如 ...

  10. firefox修改user-agent

    让firefox对web服务器伪装成任意浏览器,找一个iphone的useragent,瞬间firefox变身iPhone有木有,一般人我不告诉他嘿嘿 1.firefox地址栏中输入about:con ...