<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. kubernetes 开发 code-generator

    主要参考项目 https://github.com/kubernetes/code-generator 1. git clone https://github.com/kubernetes/code- ...

  2. Angular （ 一 ） angular的安装

    1. 全局安装angular 脚手架工具 npm install -g @angular/cli 2. 打开到创建目录: 3. 创建项目 ng new my-app 4. 打开项目 5. 安装依赖 n ...

  3. PyCharm下使用Scrapy建立爬虫项目--MyFirstSpiderObject

    首先下载并安装Anaconda3以及PyCharm Anaconda3选中添加环境变量,如果忘记选中可以手动在path中添加如下环境变量 建文件夹scrapy 安装scrapy cmd进入对应目录,执 ...

  4. what i want

    i want to be the object of every beautiful creature. they strongly want to talk with me, and study f ...

  5. bzoj4710 [Jsoi2011]分特产（容斥）

    4710: [Jsoi2011]分特产 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 814  Solved: 527[Submit][Status] ...

  6. 算法（第四版）C# 习题题解——1.5

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 这一节内容可能会用到的库文件有 ...

  7. JS(JavaScript）的进一步了解1（更新中···）

    1.作用域链 作用域:浏览器给JS的一个生存环境(栈内存). 作用域链:JS中的关键字var 和function 都可以提前声明和定义.提前声明和定义的内容放在我们的 内存地址(堆内存)中.然后JS从 ...

  8. P4389 付公主的背包

    注意 初始化的时候要这样写 for(int i=1,x;i<=n;i++){ scanf("%d",&x); v[x]++; } for(int i=1;i<= ...

  9. C、C++中的static和extern关键字

    1.首先,关于声明和定义的区别 这种写法(函数原型后加;号表示结束的写法)只能叫函数声明而不能叫函数定义,只有带函数体的声明才叫定义,比如下面 只有分配存储空间的变量声明才叫变量定义,其实函数也是一样 ...

  10. 【python 3】 函数 初识

    函数初识 1.函数的定义.调用.返回值 函数的定义.调用.返回值 def demo(): ## 定义函数 (def + 空格 + 函数名 + () + 冒号) ## 如下为函数体 return a # ...