html+css制作五环（代码极简）
五环
把五环做成一个浮动，总是位于屏幕中央的效果。
难点
定位的练习 position ：fixed
位于body中间的时候 left：50%；top:50%;
css内部样式表的使用 style="text/css"
方法
- 使用border-radius: 50%再加上z-index设置层叠关系
- 首先我们用5个块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素div放置到浏览器中间位置。
设计须知
div的作用:div是一个块级元素。它可以将html分割成独立的、不同的部分。如果用id和class来标记div，那么该标签便可以被css所使用变的更有效，通过id或class设计各种的样式。
设计细节
html的设计：
首先给5个环设置class用来css文件关联样式，并把这5个环放置一个父级div中
div class ="plat">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div>
css样式设计：
通过绑定html中设置好的class，然后绘制五个环的形状和大小还有位置
.a1,.a2,.a3,.a4,.a5{
position:absolute;
width: 100px;
height: 100px;
background-color: transparent;
border: 10px solid;
border-radius: 110px;
}
绘制每个环的颜色和位置：
.a1{
border-color: blue;
left: 0;
top: 0; }
.a2{
border-color: black;
top: 0px;
left: 130px;
z-index: 4;
}
.a3{
border-color: yellow;
top: 0px;
left: 260px;
z-index: 4;
}
.a4{
border-color: red;
top: 65px;
left: 65px;
z-index: 5; }
.a5{
border-color: green;
top: 65px;
left: 198px;
z-index: 6;
}
设计父级div的位置：
首先要知道，我们设计的5环是在div内部，所以调整div的位置便可以实现浏览器居中i效果。
.plat{
position: fixed;
top: 50%;
left: 50%;
margin-left:-140px;
margin-top: -70px;
width: 280px;
height: 140px;
}
代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>居中五环</title>
<style type="text/css">
.a1,.a2,.a3,.a4,.a5{
position:absolute;
width: 100px;
height: 100px;
background-color: transparent;
border: 10px solid;
border-radius: 110px;
}
.plat{
position: fixed;
top: 50%;
left: 50%;
margin-left:-140px;
margin-top: -70px;
width: 280px;
height: 140px;
}
.a1{
border-color: blue;
left: 0;
top: 0;
}
.a2{
border-color: black;
top: 0px;
left: 130px;
z-index: 4;
}
.a3{
border-color: yellow;
top: 0px;
left: 260px;
z-index: 4;
}
.a4{
border-color: red;
top: 65px;
left: 65px;
z-index: 5;
}
.a5{
border-color: green;
top: 65px;
left: 198px;
z-index: 6;
}
</style>
<body>
<div class ="plat">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div>
</body>
</html>
效果
html+css制作五环（代码极简）的更多相关文章
- lombok使用指南，代码极简工具
我们的项目中会用到各种bean,比如vo,bo,dto等等,bean上的属性我们一般写get(),set()方法,整个java文件看起来很臃肿. 一.简介 我们今天介绍的lombok只用使用注解就可以 ...
- 【Python】Python3纯代码极简教程
#!/usr/bin/python3 ''' Python3.6.x简单教程 示例.注释 交互式和脚本式编程 变量类型 数字(Number) 字符串(String) 列表(Li ...
- 【Python】正则表达式纯代码极简教程
<Python3正则表达式>文字版详细教程链接:https://www.cnblogs.com/leejack/p/9189796.html ''' 内容:Python3正则表达式 日期: ...
- 三种简洁的经典高效的DIV+CSS制作的Tab导航简析
在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容.本文主要介绍几种简洁的选项卡效果的实现(不涉及滑动门和AJAX),附有实例,无图片,兼容性较好,方便大家 ...
- 原生JS轮播-各种效果的极简实现
寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...
- php 极简框架ES发布（代码总和不到 400 行）
ES 框架简介 ES 是一款 极简,灵活, 高性能,扩建性强 的php 框架. 未开源之前在商业公司 经历数年,数个高并发网站 实践使用! 框架结构 整个框架核心四个文件,所有文件加起来放在一起总行数 ...
- 30段极简Python代码：这些小技巧你都Get了么
学 Python 怎样才最快,当然是实战各种小项目,只有自己去想与写,才记得住规则.本文是 30 个极简任务,初学者可以尝试着自己实现:本文同样也是 30 段代码,Python 开发者也可以看看是不是 ...
- 你一定看得懂的 DDD+CQRS+EDA+ES 核心思想与极简可运行代码示例
前言 随着分布式架构微服务的兴起,DDD(领域驱动设计).CQRS(命令查询职责分离).EDA(事件驱动架构).ES(事件溯源)等概念也一并成为时下的火热概念,我也在早些时候阅读了一些大佬的分析文,学 ...
- 逻辑式编程语言极简实现（使用C#） - 4. 代码实现（完结）
本文是本系列的完结篇.本系列前面的文章: 逻辑式编程语言极简实现(使用C#) - 1. 逻辑式编程语言介绍 逻辑式编程语言极简实现(使用C#) - 2. 一道逻辑题:谁是凶手 逻辑式编程语言极简实现( ...
随机推荐
- 训练赛第一场A题 （ZOJ 2313）
解题报告:n个人围坐成一圈,并且将这n个人从1到n编号,然后编号为1 的人手上有一个物品,将这个物品往向左传递给第k个人,1<=k<=n/2,当这个物品再次传到编号为1 的人的手上时,游戏 ...
- C++利用cin输入时检测回车的方法
今天做TJU的OJ ,其中一道题是先读入一个字符串,再读入一个整数,循环往复,直到字符串是空,也就是说回车键结束循环. 但是cin对空格和回车都不敏感,都不影响继续读入数据,所以需要一种新的方式检测回 ...
- 【leetcode 简单】 第七十八题 Nim游戏
你和你的朋友,两个人一起玩 Nim游戏:桌子上有一堆石头,每次你们轮流拿掉 1 - 3 块石头. 拿掉最后一块石头的人就是获胜者.你作为先手. 你们是聪明人,每一步都是最优解. 编写一个函数,来判断你 ...
- 【leetcode 简单】 第六十三题 使用队列实现栈
使用队列实现栈的下列操作: push(x) -- 元素 x 入栈 pop() -- 移除栈顶元素 top() -- 获取栈顶元素 empty() -- 返回栈是否为空 注意: 你只能使用队列的基本操作 ...
- 【多视图几何】TUM 课程 第2章 刚体运动
课程的 YouTube 地址为:https://www.youtube.com/playlist?list=PLTBdjV_4f-EJn6udZ34tht9EVIW7lbeo4 .视频评论区可以找到课 ...
- 配置虚拟机时间使其与国内时间同步，linux时间 ntp
设置系统时间 [root@node2 ~]# date -s "10/30/18 09:30:00"Tue Oct 30 09:30:00 PDT 2018[root@node2 ...
- 查看oracle实例名
select name from v$database; show parameter service_names;
- 揭秘Patchwork APT攻击-恶意软件样本BADNEWS
1.前言 在2016年左右研究人员发现一个与东南亚和中国南海问题的APT攻击,该APT攻击利用MS Offcie系列漏洞通过钓鱼邮件的形式欺骗受害者点击木马.以美国在内的各国政府和公司为目标发送了大量 ...
- 牛x的JavaScript编辑器你知道几个
英文:Martin Heller 译文:葡萄城控件 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群343599877,我们一起学前端! 对于JavaScript程序员来说,目前有很 ...
- MySQL 联合查询
联合查询:将多次查询(多条select语句), 在记录上进行拼接(字段不会增加) 基本语法:多条select语句构成: 每一条select语句获取的字段数必须严格一致(但是字段类型无关) 语法 Sel ...