<html>
<head>
<meta charset="utf-8">

<style>
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position:absolute;
width:100px;
height:100px;
border:5px solid black;
border-radius:50%;

}

.circle1{
border-color:red;
left:0;
top:0;

}
.circle2{
border-color:green;
left:115px;
top:0;
z-index:5;

}
.circle3{
border-color:yellow;
left:230px;
top:0;

}
.circle4{
border-color:blue;
left:57px;
top:70px;

}
.circle5{
border-color:purple;
left:175px;
top:70px;

}

</style>
<title>五环</title>

</head>

<body>

<div class="main">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>

</body>

<html>

用html和css制作奥运五环的更多相关文章

  1. Div+Css中transparent制作奥运五环

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. html+css实现奥运五环(环环相扣)

    <!DOCTYPE html> <html> <head> <title>奥运五环</title> <style type=" ...

  3. 【scratch3.0教程】 2.3 奥运五环

    (1)编程前的准备 在设计一个作品之前,必须先策划一个脚本,然后再根据脚本,收集或制作素材(图案,声音等),接着就可以启动Scratch,汇入角色.舞台,利用搭程序积木的方式编辑程序,制作出符合脚本的 ...

  4. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  5. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  6. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  7. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  8. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

随机推荐

  1. 高版本mysql8.0解压版安装步骤

    解压版安装操作官网下载: mysql-installer-community-8.0.12.0.msi如上操作: http://www.cnblogs.com/elfin/p/9429877.html ...

  2. python———day1

    1.计算机基础:CPU,内存,硬盘,操作系统 2.python出生于应用 3.python2与python3的区别(宏观): python2:源码不标准,混乱,重复代码太多 python3:统一标准, ...

  3. Node.js基础学习三之登录功能

    本篇介绍Node.js访问数据库并返回数据给客户端 需求基于Node.js学习(二) 数据库请下载:user.sql 1.创建user 实体类(model-user.js) function User ...

  4. SSM项目思路整合NEW2

    上接于 https://www.cnblogs.com/shijinglu2018/p/10374541.html ...... 三)客户管理模块开发 说明:其实大致思路差不太多,都是首先根据前端页面 ...

  5. 什么是事务？事务特性？事务隔离级别？spring事务传播特性？

    一.事务的概述 什么是事务? 在数据库中,所谓事务是指一组逻辑操作单元即一组sql语句,当这个单元中的一部分操作失败,整个事务回滚,只有全部正确才完成提交.判断事务是否配置成功的关键点在于出现异常时事 ...

  6. oracle 表空间管理相关（原创）

    通过以下几步基本可以查看表空间情况以及处理表空间不足问题. ASM相关 查看asm空间 select group_number,name,total_mb,free_mb from v$asm_dis ...

  7. java枚举类型详解

      枚举类型是JDK1.5的新特性.显然,enum很像特殊的class,实际上enum声明定义的类型就是一个类.而这些类都是类库中Enum类的子类(java.lang.Enum<E>).它 ...

  8. 【读书笔记】使用JMeter创建数据库（Mysql）测试

    读书笔记:<零成本实现Web性能测试>第4章 记得某天按照虫师博客的写的,折腾后成功了.今天又忘记了... 折腾后又成功了,赶紧记录下... 原文:http://www.cnblogs.c ...

  9. 纯CSS3完成选项卡，不要js完成的选项卡

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天就来敲一敲,选项卡,注意哦,不是一般利用js完成的选项卡,今天是纯用HTML和CSS来完成的,这怎么可能?那你不用js的点击事件,怎么处理? ...

  10. Nodejs运行错误小结

    (迁移自旧博客2017 04 15) 在使用过程中会遇到一些问题,学习过程中不定期更新. 问题一 错误如下 **events.js:72 throw er; // Unhandled 'error' ...