<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. java.sql.SQLException: ORA-28000: the account is locked

    解决方式:参考博客https://blog.csdn.net/java280580332/article/details/70756533

  2. redis（一主两从三哨兵模式搭建）记录

    转自:http://www.cnblogs.com/fly-piglet/p/9836314.html 目的: 让看看这篇文章的的人能够知道:软件架构.软件的安装.配置.基本运维的操作.高可用测试.也 ...

  3. ROS机器人编程实践----琐碎知识点

    amcl原理: amcl将激光传感器数据与从地图预估的传感器数据相比较,给出可能的位姿.如果传感器数据和某个候选位姿处的预测数据相同,amcl就会给这个位姿一个较高的概率,反之,就会降低这个概率.概率 ...

  4. tomcat启动命令行中文乱码

    1.找到${CATALINA_HOME}/conf/logging.properties 2.添加语句:java.util.logging.ConsoleHandler.encoding = GBK ...

  5. CodeForces - 468A

    Little X used to play a card game called "24 Game", but recently he has found it too easy. ...

  6. Oracle初级优化sql

    1.选择最有效率的表名顺序(只在基于规则的优化器中有效):ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处理, ...

  7. Java集合中的细节

    integer数据对比 对于Integer var = ? 在-128至127范围内的赋值,Integer对象是在IntegerCache.cache产生,会复用已有对象,这个区间内的Integer值 ...

  8. Pandas：深市股票代码前补足0

    #深市代码前补充0----------------- df[' #先增加一列 #将2列合并为新列 df['代码合并'] = df['补充'] + df['股票代码'] #再取后6位 df['股票代码' ...

  9. java为什么要重写hashCode和equals方法？

    如果不被重写(原生)的hashCode和equals是什么样的? 不被重写(原生)的hashCode值是根据内存地址换算出来的一个值. 不被重写(原生)的equals方法是严格判断一个对象是否相等的方 ...

  10. 优雅的使用windows

    1. 快捷键 win+数字键:打开任务栏对应位置的程序 eg:快捷打开程序,重复该组合键有两个效果,如果只打开了一个窗口,再次按下组合键即可最小化,如果打开了多个窗口,则可以在同一程序的多个窗口中切换 ...