五环

把五环做成一个浮动，总是位于屏幕中央的效果。

难点

  1. 定位的练习 position ：fixed

  2. 位于body中间的时候 left：50%；top:50%;

  3. css内部样式表的使用 style="text/css"

方法

  1. 使用border-radius: 50%再加上z-index设置层叠关系
  2. 首先我们用5个块级元素来形成5个环的颜色和形状，并把这5个环放置到一个父级容器div内，再将这个父级元素div放置到浏览器中间位置。

设计须知

  1. 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样式设计：

  1. 通过绑定html中设置好的class，然后绘制五个环的形状和大小还有位置

     .a1,.a2,.a3,.a4,.a5{
    
 					position:absolute;
    
 					width: 100px;
    
 					height: 100px;
    
 					background-color: transparent;
    
 					border: 10px solid;
    
 					border-radius: 110px;
    
 			}

  2. 绘制每个环的颜色和位置：

     		.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;
    
 		}

  3. 设计父级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制作五环（代码极简）的更多相关文章

  1. lombok使用指南，代码极简工具

    我们的项目中会用到各种bean,比如vo,bo,dto等等,bean上的属性我们一般写get(),set()方法,整个java文件看起来很臃肿. 一.简介 我们今天介绍的lombok只用使用注解就可以 ...

  2. 【Python】Python3纯代码极简教程

    #!/usr/bin/python3 ''' Python3.6.x简单教程  示例.注释  交互式和脚本式编程  变量类型  数字(Number)  字符串(String)  列表(Li ...

  3. 【Python】正则表达式纯代码极简教程

    <Python3正则表达式>文字版详细教程链接:https://www.cnblogs.com/leejack/p/9189796.html ''' 内容:Python3正则表达式 日期: ...

  4. 三种简洁的经典高效的DIV+CSS制作的Tab导航简析

    在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容.本文主要介绍几种简洁的选项卡效果的实现(不涉及滑动门和AJAX),附有实例,无图片,兼容性较好,方便大家 ...

  5. 原生JS轮播-各种效果的极简实现

    寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...

  6. php 极简框架ES发布（代码总和不到 400 行）

    ES 框架简介 ES 是一款 极简,灵活, 高性能,扩建性强 的php 框架. 未开源之前在商业公司 经历数年,数个高并发网站 实践使用! 框架结构 整个框架核心四个文件,所有文件加起来放在一起总行数 ...

  7. 30段极简Python代码：这些小技巧你都Get了么

    学 Python 怎样才最快,当然是实战各种小项目,只有自己去想与写,才记得住规则.本文是 30 个极简任务,初学者可以尝试着自己实现:本文同样也是 30 段代码,Python 开发者也可以看看是不是 ...

  8. 你一定看得懂的 DDD+CQRS+EDA+ES 核心思想与极简可运行代码示例

    前言 随着分布式架构微服务的兴起,DDD(领域驱动设计).CQRS(命令查询职责分离).EDA(事件驱动架构).ES(事件溯源)等概念也一并成为时下的火热概念,我也在早些时候阅读了一些大佬的分析文,学 ...

  9. 逻辑式编程语言极简实现（使用C#） - 4. 代码实现（完结）

    本文是本系列的完结篇.本系列前面的文章: 逻辑式编程语言极简实现(使用C#) - 1. 逻辑式编程语言介绍 逻辑式编程语言极简实现(使用C#) - 2. 一道逻辑题:谁是凶手 逻辑式编程语言极简实现( ...

随机推荐

  1. Gulp安装笔记

    前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...

  2. spring boot使用自定义配置的线程池执行Async异步任务

    一.增加配置属性类 package com.chhliu.springboot.async.configuration; import org.springframework.boot.context ...

  3. 程序员 & 设计师都能用上的 75 份速查手册

    分享75份开发人员和设计师会用到的速查手册,由 vikas 收集整理,包括:jQuery.HTML.HTML5.CSS.CSS3.JavaScript.Photoshop .git.Linux.Jav ...

  4. WPF控件收集

    1.Extended WPF Toolkit 2.Fluent Ribbon Control Suite 3.WPF Ribbon Control 4.Telerik RadControls for ...

  5. kdissert：linux下的自由脑图软件

    ----------------------------------------------------作者: 吉庆   email: jiqingwu@gmail.commainpage: http ...

  6. 一个菜鸟的ASP.NET观光路线图

           作为一个成长的"菜鸟".我的习惯是,每过一个阶段,都对自己的知识体系进行一次概括. 这篇博文是一个总结帖,我将把我的学到的东西,按照一定顺序串联在一起.        ...

  7. Unity3D 程序打包报错（程序是连接数据库进行处理的）

    打包这个Unity3D的程序时出现错误(程序是由XML数据改成连接数据库): ArgumentException: The Assembly System.Configuration is refer ...

  8. UNIX网络编程 第8章 基本UDP套接字编程

    UDP是无连接的,不需要accept,TCP通过accept API来接受连接,并且将连接客户端的信息写入到accept将返回的新socket中,该新socket中有服务端和客户端的IP地址和端口,因 ...

  9. rollup&&cube

    group by 擴展 rollup&&cube --按job分組計算不同job的匯總工資   SELECT job, SUM (sal)     FROM emp GROUP BY ...

  10. linux通配符，grep和 egrep区别

    其实主要是正则表达式中的一些特殊语法.在网上找的几篇文章,截取相关部分贴在了下面,方便以后翻阅. 参考:http://hi.baidu.com/sei_zhouyu/item/c18e1a950d2e ...