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. 一道逻辑题:谁是凶手 逻辑式编程语言极简实现( ...
随机推荐
- 【翻译】Voidbox: Docker on YARN
原文链接:Voidbox – Docker on YARN 读了此文,收获良多,翻译之,方便以后查看~ 文章介绍了Hulu北京大数据团队开发的Docker On YARN实现:Voidbox,一种基于 ...
- 关于UNIX的exec函数
在UNIX系统中,系统为进程相关提供了一系列的控制原语,包括:进程fork,进程exit,进程exec,进程wait等服务. 该篇文章主要与进程exec服务有关,并记录了几个需要注意留意的点. 照例给 ...
- Sysmon + NXlog构建简单的windows安全监控
工具: Sysmon (sysmon 5.0) ,NXlog(nxlog-ce-2.9.1716.msi) . Sysmon监控系统并生成windows event log, NXlog将wind ...
- 007_苹果Mac系统锁屏不待机效果设置方法介绍
Mac如何设置锁屏不断网?Mac如何设置锁屏不待机?这是一个非常麻烦的设置,有时候一锁屏幕电脑就跟着待机了,这非常的麻烦,所以今天小编就用图文教程的方式教大家Mac如何设置锁屏不断网Mac如何设置锁屏 ...
- mysql命令gruop by报错this is incompatible with sql_mode=only_full_group_by
在mysql 工具 搜索或者插入数据时报下面错误: ERROR 1055 (42000): Expression #1 of SELECT list is not in GROUP BY clause ...
- vue系列之项目优化
webpack中的Code Splitting Code Splitting是什么以及为什么 在以前,为了减少HTTP请求,通常地,我们会把所有的代码都打包成一个单独的JS文件,但是,如果这个文件体积 ...
- git —— Feature分支
添加新功能时,新建feature分支 分支上开发完成后,再进行合并.最后删除feature分支 $ git checkout -b feature-vulcan 开发完毕后,切换回添加的分支,进行合并 ...
- Robot Framework测试框架用例脚本设计方法
Robot Framework介绍 Robot Framework是一个通用的关键字驱动自动化测试框架.测试用例以HTML,纯文本或TSV(制表符分隔的一系列值)文件存储.通过测试库中实现的关键字驱动 ...
- Es官方文档整理-3.Doc Values和FieldData
Es官方文档整理-3.Doc Values和FieldData 1.Doc Values 聚合使用一个叫Doc Values的数据结构.Doc Values使聚合更快.更高效且内存友好. Doc Va ...
- 深度学习国外课程资料(Deep Learning for Self-Driving Cars)+(Deep Reinforcement Learning and Control )
MIT(Deep Learning for Self-Driving Cars) CMU(Deep Reinforcement Learning and Control ) 参考网址: 1 Deep ...