<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. tensorflow学习笔记2：c++程序静态链接tensorflow库加载模型文件

    首先需要搞定tensorflow c++库,搜了一遍没有找到现成的包,于是下载tensorflow的源码开始编译: tensorflow的contrib中有一个makefile项目,极大的简化的接下来 ...

  2. WSDL文档

    portType 相当于一个类. operation 相当于该类里有一个方法名,方法名为processAPNManagement,该方法里有一个输入消息,一个输出消息,一个错误消息.

  3. Java线程基础（二）

    今天上午考完了计算机二级,也算卸掉了一个大包袱吧,希望能过!(其实也就考着玩的,不来点考试就要发霉了) 好了,趁着难得的考后休息时间我就接着上一次没写完的继续更新吧. 上一篇文章——>Java核 ...

  4. 基于OpenCV做“三维重建”（3）--相机参数矩阵

    通过前面的相机标定,我们能够获得一些参数模型.但是这些相机的参数矩阵到底是什么意思?怎样才能够判断是否正确?误差都会来自哪里?这里就必须要通过具体实验来加深认识.采集带相机参数的图片具有一定难度,幸好 ...

  5. 解析JavaScript中的sort()排序方法以及原理

    Array.sort()方法将数组中的元素进行排序,返回排序后的数组,默认是按照升序排序的.sort方法会调用数组中每一项的toString()方法,然后按照ascii编码进行排序,如果数组含有und ...

  6. ThreadLocal的意义和实现

    可以想像,如果一个对象的可变的变量被多个线程访问时,必然是不安全的. 在单线程应用可能会维持一个全局的数据库连接,并在程序启动时初始化这个连接对象,从而避免在调用每个方法时都传递一个Connectio ...

  7. HDFS配置参数及优化之实战经验（Linux hdfs）

    HDFS优化之实战经验 Linux系统优化 一.禁止文件系统记录时间 Linux文件系统会记录文件创建.修改和访问操作的时间信息,这在读写操作频繁的应用中将带来不小的性能损失.在挂载文件系统时设置no ...

  8. linux下 如何切换到root用户

    默认安装完成之后并不知道root用户的密码,那么如何应用root权限呢? (1)sudo 命令 xzm@ubuntu:~$  sudo 这样输入当前管理员用户密码就可以得到超级用户的权限.但默认的情况 ...

  9. BZOJ 4259 残缺的字符串

    思路 同样是FFT进行字符串匹配 只不过两个都有通配符 匹配函数再乘一个\(A_i\)即可 代码 #include <cstdio> #include <algorithm> ...

  10. rabbitmp安装记录

    第一次安装一路遇坑,安装步骤及问题如下 1:安装erlang依赖 yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel opens ...