<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. vm中的nat模式不能连接到主机，以及不能上网

    主机能够ping通vm中的ip,但是vm不能ping通主机ip vm不能ping通主机:主要是虚拟机中的gateway的设置和vm的网络编辑器中的网关id不一致造成的 vm不能上外网:dns没有配置正 ...

  2. Java包装类之Integer的 "==" 判断数值是否相等的陷阱及原因分析

    在好久以前的一次面试中,面试官问了我这么一个问题:“现在有 Integer a = 56, b = 56, c = 180, d = 180;  请问:a == b ,c == d  是否成立,也就是 ...

  3. SlidingMenu第一篇 --- 导入SlidingMenu库

    1. 下载地址:https://github.com/jfeinstein10/SlidingMenu 2.  找到下载好的SlidingMeun的library目录 3.  导入库(将上述地址复制到 ...

  4. CentOS7操作Redis4.0

    单机安装 1. 从官网下载 redis-4.0.10.tar.gz 到本地,然后上传到VMware虚拟机上,存放地址随意. 2. 解压: tar -zxvf redis-4.0.10.tar.gz 3 ...

  5. Gradle Repository

    // 该init.gradle文件,请保存到${USER_HOME}/.gradle/文件夹下,如:C:\Users\Administrator\.gradle allprojects { repos ...

  6. Prometheus监控学习笔记之Prometheus从1.x升级到2.x

    详细参考这篇文章 https://cloud.tencent.com/developer/article/1171434 prometheus 2.0于2017-11-08发布,主要是存储引擎进行了优 ...

  7. 面试-java反射

    问题:简述Java中的反射使用 答: 1.作用: 可以通过配置文件来动态配置和加载类,以实现软件工程理论里所提及的类与类,模块与模块之间的解耦.反射最经典的应用是spring框架. 2. 定义 反射简 ...

  8. centos7安装supervisor

    安装supervisor cd /root/tools/ wget http://pnxcvm0bq.bkt.clouddn.com/get-pip.py python get-pip.py pip ...

  9. linux准备工具VMware以及ubuntu

    链接:https://pan.baidu.com/s/1j7DZCmzOcC2rPAciHtZgkA 密码:et5s

  10. 原生js点击按钮切换图片

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