奥运五环

 <!DOCTYPE html>   2 <html>   3     <head>   4         <meta charset="UTF-8" />   5         <title>The Olympic Flag</title>    6         <style type="text/css" media="screen">   7         body {  8             margin:20px;  9             background-color:#efefef; 10         } 11         ul.flag { 12             list-style-type:none; 13             position: relative; 14             margin: 20px auto; 15         }  16        17         .flag li, .flag li:before, .flag li:after { 18             -webkit-border-radius: 6em; 19             -moz-border-radius: 6em; 20             border-radius: 6em; 21             position: absolute; 22         } 23          24         .flag li { 25             width: 12em; 26             height: 12em; 27             left: 0; 28             top: 0; 29             font-size: 1em; 30         }   31        32         .flag li:after { 33             display: block; 34             content: ""; 35             top: -0.1em; 36             left: -0.1em; 37             right: -0.1em; 38             bottom: -0.1em; 39             border: solid 1.4em black; 40         } 41          42         .flag .blue   { z-index: 10; left: 0; top: 0; } 43         .flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em; } 44         .flag .black  { z-index: 21; left: 13.6em; top: 0; } 45         .flag .green  { z-index: 20; left: 20.4em; top: 5.7em; } 46         .flag .red    { z-index: 10; left: 27.2em; top: 0px; }    47          48         .flag .blue:after   { border-color: blue; }    49         .flag .yellow:after { border-color: yellow; }  50         .flag .black:after  { border-color: black; } 51         .flag .green:after  { border-color: green; }  52         .flag .red:after    { border-color: red; } 53         /* 蓝色压住黄色 */   54         .flag .blue.alt { z-index: 24; } 55         .flag .blue.alt,  56         .flag .blue.alt:before,  57         .flag .blue.alt:after { 58             border-top-color: transparent; 59             border-left-color: transparent; 60             border-bottom-color: transparent; 61         } 62         /* 黄色压住黑色 */ 63         .flag .yellow.alt { z-index: 23; } 64         .flag .yellow.alt,  65         .flag .yellow.alt:before,  66         .flag .yellow.alt:after { 67             border-right-color: transparent; 68             border-left-color: transparent; 69             border-bottom-color: transparent; 70         }     71         /* 绿色压住黑色  */ 72         .flag .green.alt { z-index: 23; } 73         .flag .green.alt, 74         .flag .green.alt:before, 75         .flag .green.alt:after { 76             border-top-color: transparent; 77             border-right-color: transparent; 78             border-bottom-color: transparent; 79         } 80         /* 红色压住绿色  */ 81         .flag .red.alt { z-index: 23; } 82         .flag .red.alt,  83         .flag .red.alt:before, 84         .flag .red.alt:after { 85             border-top-color: transparent; 86             border-right-color: transparent; 87             border-left-color: transparent; 88         }        89         </style>    90     </head>  91     <body>  92         <ul class="flag">  93             <li class="blue"></li>  94             <li class="blue alt"></li>  95             <li class="yellow"></li>  96             <li class="yellow alt"></li>  97             <li class="black"></li>  98             <li class="green"></li>  99             <li class="green alt"></li> 100             <li class="red"></li> 101             <li class="red alt"></li> 102         </ul>  103     </body> 104 </html>

时间： 2024-09-14 03:32:29

奥运五环的相关文章

Div+Css(1):Div+Css中transparent制作奥运五环

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>奥运五环</title> <style type="text/css"> body{ margin: 20px; background-color: #efefef; } ul.flag{ list-style: none;

Python绘制奥运五环

绘制奥运五环主要涉及到Python中的turtle绘图库运用: turtle.forward(distance) 向当前画笔方向移动distance像素长度 turtle.backward(distance) 向当前画笔相反方向移动distance像素长度 turtle.right(degree) 顺时针移动degree° turtle.left(degree) 逆时针移动degree° turtle.pendown() 移动时绘制图形,缺省时也为绘制 turtle.goto(x,y) 将画笔移

python 相关语法图形绘制奥运五环

1. 适当的空格逻辑行首的空白表示逻辑表示层次关系从而决定分组语句从新行的第一列开始风格统一都用四个空格不能随便加空格奥运五环 #绘制奥运五环 import turtleturtle.width(10) turtle.color("blue")turtle.circle(50) turtle.penup()turtle.goto(120,0)turtle.pendown()turtle.color("black")turtle.circle(50) t

用Python画出奥运五环

用海龟画图就是这么简单 coordA=(-110,0,110,-55,55) coordB=(-25,-25,-25,-75,-75) cl=("red","blue","green","yellow","black") i=0 from turtle import * pensize(5) for _ in range (5) : color(cl[i]) penup() goto(coordA[i],c

Python 学习记录----利用Python绘制奥运五环

1 import turtle #导入turtle模块 2 turtle.color("blue") #定义颜色 3 turtle.penup() #penup和pendown()设置画笔抬起或放下时是否绘制直线 4 turtle.goto(-110,-25) #初始位置以中心坐标为(0,0) 5 turtle.pendown() 6 turtle.circle(45) #绘制圆的半径 7 8 turtle.color("black") 9 turtle.penup

turtle库绘制奥运五环

点击查看视频 import turtle turtle.pensize(10) turtle.color("blue") #定义颜色 turtle.penup() #penup和pendown()设置画笔抬起或放下时是否绘制直线 turtle.goto(-110,-25) #初始位置以中心坐标为(0,0) turtle.pendown() turtle.circle(45) #绘制圆的半径 turtle.pensize(10) turtle.color("black"

利用Python 调用turtle函数库绘制奥运五环。

import turtle #调用turtle库绘制图像的函数库turtle.color("blue") #颜色蓝色turtle.circle(100) #画半径100的圆 turtle.penup() #抬起笔turtle.goto(-180,0) #移动到turtle.pendown() #放笔turtle.color("red") #颜色红色turtle.circle(100) #画半径100的圆 turtle.penup() #提起笔turtle.got

绘制奥运大五环

绘制奥运五环 # 绘制奥运五环 import turtle turtle.width(10) turtle.color("blue") turtle.circle(50) turtle.penup() turtle.goto(120,0) turtle.pendown() turtle.color("black") turtle.circle(50) turtle.penup() turtle.goto(240,0) turtle.pendown() turtle.

透过HT for Web 3D看动画Easing函数本质

http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html 50年前的这个月诞生了BASIC这门计算机语言,回想起自己喜欢上图形界面这行,还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码,当带色彩的奥运五环呈现在自己面前时我已知道自己这辈子要走的路了.在这个忘本逐新的年代不见多少媒体提及这影响了几代人的BASIC语言的50年庆了. 如今消费者对用户体验的高要求,以远不能以静