<!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. 调用python脚本报错/usr/bin/env: python : No such file or directory

    一.调用python脚本报错 /usr/bin/env: python: No such file or directory 二.解决方法 原因是在windows上编写的脚本,使用dos2unix对脚 ...

  2. Linux——Pxe+Nfs+Kickstart自动部署安装Centos7.4

    PXE简介 PXE,全名Pre-boot Execution Environment,预启动执行环境:通过网络接口启动计算机,不依赖本地存储设备(如硬盘)或本地已安装的操作系统:由Intel和Syst ...

  3. “IOS11不再信赖WOSIGN证书”公众号运营者如何应对

    ptd->_thandle = (uintptr_t)(-1); {{}/*** 传入需要的参数,设置给*/{}给Fragment添加newInstance方法,将需要的参数传入,设置到bund ...

  4. ubuntu坑（持续更新～）

    0.you should not install packages from any repository that represents a different system version to ...

  5. QT工程中添加资源(简单明了)

    1. 在工程文件下右击添加新文件 2. 在QT目录下选择QT Resource File 3. 填写资源名称 4. 点击完成就可以看到自己建立的资源了 5. 点击右键添加现有文件,找到自己要添加的资源 ...

  6. es6 -- rest 参数

    es6 引入了rest参数(形式:...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中. function ...

  7. 判断json对象是否在数组中

    // 判断对象是否在数组中function objinArrar(check,param){ var isExisted = false; var index = -1; for(var i=0;i& ...

  8. Trie Service

    Description Build tries from a list of <word, freq> pairs. Save top 10 for each node. Example ...

  9. eslint Cannot read property 'range' of null错误

    eslint Cannot read property 'range' of null错误   手动添加的配置,2个项目OK,还个项目 运行报错 Cannot read property 'range ...

  10. (尚029)Vue_案例_交互footer组件功能

    需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...