HTML+CSS编写五环居中案例
<!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编写五环居中案例的更多相关文章
- 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
- css中各种居中的奇技淫巧总结
css中各种居中的奇技淫巧总结 第一种,在固定布局中比较常用的技巧设置container的margin:0 auto: 第二种(从布局中入手) css .outer{ height:200 ...
- HTML+CSS编写规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
- CSS实现div居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css编写注意事项（不定时更新）
CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...
- 个人css编写规范
前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...
- css布局---各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- CSS编写指导规范和建议
在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...
随机推荐
- rds - mysql修改存储过程/函数的方式
rds 不支持账户A 给账户B 创建授权存储过程,只能是当前登录账户给自己创建,要登陆对应账户删除原有存储过程重新创建即为修改. 例子如下: 先登陆新账号然后执行如下sql语句即可: DROP PRO ...
- Layout POJ - 3169
题目链接:https://vjudge.net/problem/POJ-3169 题意:有一些奶牛,有些奶牛相互喜欢,他们之间的距离必须小于等于一个K. 有些奶牛相互讨厌,他们之间的距离必须大于等于一 ...
- 目标检测论文解读5——YOLO v1
背景 之前热门的目标检测方法都是two stage的,即分为region proposal和classification两个阶段,本文是对one stage方法的初次探索. 方法 首先看一下模型的网络 ...
- PAT 乙级 1006.换个格式输出整数 C++/Java
1006 换个格式输出整数 (15 分) 题目来源 让我们用字母 B 来表示“百”.字母 S 表示“十”,用 12...n 来表示不为零的个位数字 n(n < 1000),换个格式来输出任一个不 ...
- 【PyTorch v1.1.0文档研习】60分钟快速上手
阅读文档:使用 PyTorch 进行深度学习:60分钟快速入门. 本教程的目标是: 总体上理解 PyTorch 的张量库和神经网络 训练一个小的神经网络来进行图像分类 PyTorch 是个啥? 这是基 ...
- jvm内存模型-和内存分配以及jdk、jre、jvm是什么关系(阿里，美团，京东)
参考:JVM的垃圾回收机制 总结(垃圾收集.回收算法.垃圾回收器) 1.什么是jvm?(1)jvm是一种用于计算设备的规范,它是一个虚构出来的机器,是通过在实际的计算机上仿真模拟各种功能实现的.(2) ...
- 关于Java锁（学习笔记）
个人学习笔记! 1)分布式锁的实现?①数据库实现单点.非重入.非阻塞.无失效时间.依赖数据库(要自己设置,可结合排它锁.乐观锁.悲观锁等混合使用)②缓存(Redis等)集群部署解决单点问题.分布式锁方 ...
- yolov2
在这篇文章中,作者首先在YOLOv1的基础上提出了改进的YOLOv2,然后提出了一种检测与分类联合训练方法,使用这种联合训练方法在COCO检测数据集(用于检测)和ImageNet分类数据集(用于分类) ...
- MongoDB 查看集合与索引状态命令
1.查看集合状态命令 MongoDB Enterprise > db.trs_action_dzwl_zm.stats() 2.查看索引状态命令 MongoDB Enterprise > ...
- 做个小插件（打开Part路径插件）
1 (CAIDAN.men) VERSION EDIT UG_GATEWAY_MAIN_MENUBAR AFTER UG_HELP CASCADE_BUTTON TOOLS LABEL 工具 END_ ...