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. 一道逻辑题:谁是凶手 逻辑式编程语言极简实现( ...
随机推荐
- Grep学习笔记
Grep(Global search Regular Expression and Print out the line)是一种强大的文本搜索工具. 1. 正则表达式的基本组成部分 正则表达式 描述 ...
- UCenter在JAVA项目中实现的单点登录应用实例
Comsenz(康盛)的UCenter当前在国内的单点登录领域占据绝对份额,其完整的产品线令UCenter成为了账号集成方面事实上的标准. 基于UCenter,可以将Comsenz旗下的Discuz! ...
- windebug常用命令
使用~查看所有线程 切换到一号线程:~1s 查看所有线程的托管堆栈 ~* e!clrstack 怎么查看,当前线程下,变量的信息? 对于托管代码而言,最核心的命令就是!do(dump object的 ...
- Nginx/LVS/HAProxy负载均衡软件的优缺点详解【转】
转自 (总结)Nginx/LVS/HAProxy负载均衡软件的优缺点详解http://www.ha97.com/5646.html PS:Nginx/LVS/HAProxy是目前使用最广泛的三种负载均 ...
- 10款常见MySQL高可用方案选型解读【转】
我们在考虑MySQL数据库的高可用架构时,主要考虑如下几方面: 如果数据库发生了宕机或者意外中断等故障,能尽快恢复数据库的可用性,尽可能的减少停机时间,保证业务不会因为数据库的故障而中断. 用作备份. ...
- 【转】GridView 加载空行并点击编辑每一个单元格
代码 <script runat="server"> protectedvoid Button1_Click(object sender, System.EventAr ...
- day10作业
1.Java中,用{}括起来的代码称为代码块. 代码块分为局部代码块,构造代码块,静态代码块,同步代码块 局部代码块:在方法中出现,限定生命周期,及早释放,提高内存利用率 构造代码块:在类中方法外出现 ...
- ASP .Net Core系统部署到SUSE 16 Linux Enterprise Server 12 SP2 64 具体方案
.Net Core 部署到 SUSE 16 Linux Enterprise Server 12 SP2 64 位中的步骤 1.安装工具 1.apache 2..Net Core(dotnet-sdk ...
- 使用html+css+js实现魔性的舞蹈
使用html+css+js实现魔性的舞蹈,让我们燥起来!!! 效果图: 代码如下,复制代码即可使用: <!DOCTYPE html> <html > <head> ...
- python_selenium自动化测试框架
设计思路 本文整理归纳以往的工作中用到的东西,现汇总成基础测试框架提供分享. 框架采用python3 + selenium3 + PO + yaml + ddt + unittest等技术编写成基础测 ...