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. 一道逻辑题:谁是凶手 逻辑式编程语言极简实现( ...
随机推荐
- iframe中的历史记录问题汇总及解决方案[转]
在做页面统计的时候遇到了两个问题: 1.包含iframe的页面,在IE下按后退按钮不能刷新主页面.隐藏Iframe的src是统计程序的url,每点一次后退,就会发出一次页面加载时间请求. 2.由js动 ...
- 即时新闻展示插件jQuery News Ticker，超级简单！
有时候我们为了节省页面空间,会在页面明显处放一小条,用来展示比较重要的即时新闻,一般以轮播的形式出现.今天要介绍的jQuery News Ticker插件就是用来实现这个即时新闻展示功能的,效果图如下 ...
- 谈谈Flash图表中数据的采集
一般来说flash中的数据是不能被现有技术很容易采集到的,但是也不能谈flash色变,要具体问题具体分析,有些flash是可以通过一些分析发现背后的数据.然后采集就变得很容易了. 具体案例:搜房房价走 ...
- HDU 4311 Meeting point-1 求一个点到其它点的曼哈顿距离之和
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4311 解题报告:在一个平面上有 n 个点,求一个点到其它的 n 个点的距离之和最小是多少. 首先不得不 ...
- shell操作典型案例--FTP操作
从FTP服务器上下载文件或上传文件到FTP服务器是生产环境中比较常见的场景之一. shell操作FTP的方式整理如下: 思路一:使用shell调用ftp等客户端 使用FTP方式,通过shell调用ft ...
- sql server 查询本年的每个月的数据
一.以一行数据的形式,显示本年的12月的数据,本示例以2017年为例,根据CreateDate字段判断,计算总和,查询语句如下: end) as '1月', end) as '2月', end) as ...
- APScheduler API -- apscheduler.schedulers.base
apscheduler.schedulers.base API class apscheduler.schedulers.base.BaseScheduler(gconfig={}, **option ...
- MUI上拉加载下拉刷新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 串口流控制详解（CTS/RTS,DTR/DSR）
1 首先看下关于流控相关的几个端口的解释如下图 除了必要的地(GND)要连接外,其它连如下 步骤阅读 2 计算机和猫(MODEM)的连接 步骤阅读 步骤阅读 3 计算机和非猫的连接(null mod ...
- Python之容器类Collections
容器类Collections 标签(空格分隔): Python进阶 defaultdict counter deque namedtuple defaultdict defaultdict的作用是可以 ...