Olympic rings

文章目录

html
css

奥运五环广告定位
效果如下

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="lesson.css"><title>奥运五环</title>
</head>
<body><div id="all"><div id="bottom"><div id="blue" class="circle"></div><div id="black" class="circle"></div><div id="red" class="circle"></div></div><div id="top"><div id="yellow" class="circle"></div><div id="green" class="circle"></div></div></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>
</html>

css

#all{left: 50%;top: 50%;width: 372px;height: 178px;position: fixed;padding: 0;margin-left: -186px;margin-top: -93px;
}
.circle{width: 100px;height: 100px;border-radius: 50%;border: 12px solid;padding: 0;
}
#bottom{width: 372px;height: 124px;padding: 0;margin-right: 0;left:50%;
}
#top{width: 248px;height: 124px;padding: 0;margin-right: 0;position: relative;bottom: 70px;left: 62px;
}#blue{display: inline-block;border-color: blue;
}
#black{display: inline-block;border-color: black;
}
#red{display: inline-block;border-color: red;
}
#yellow{display: inline-block;border-color: yellow;position: absolute;
}
#green{display: inline-block;border-color: green;position: absolute;left: 124px;
}

Olympic rings相关推荐

【JAVA】奥林匹克五环(Olympic rings)
import java.awt.*; import javax.swing.*;class DrawPanel extends JPanel{private final int OVAL_WIDTH ...
拒绝+启示+TED+被拒的100天+What I learned from 100 days of rejection
拒绝+启示+TED+被拒的100天+What I learned from 100 days of rejection 你是否也有碰壁恐惧症 When I was six years old, I r ...
HTML+CSS+JS实现 ❤️3D奥运五环图形特效❤️
效果演示: 代码目录: 主要代码实现: CSS样式: /*** debug in progress ***/:root {--metal: #ffffff45;--gold: repeating-co ...
弘扬奥运精神，我们49行画个奥运五环
虽然这届奥运遇到重重阻碍,疫情影响而延后,延后了要举办民众反对,再然后彩排后还爆出xq案件,更有小道爆出黑幕.这些种种我们就忽略掉吧- 截止本文发表,我们看看战况: 弘扬奥运精神,今天我们用49行写歌 ...
E - Olympic Medal CodeForces - 215B(数学思维)
The World Programming Olympics Medal is a metal disk, consisting of two parts: the first part is a r ...
cf1562 C. Rings
cf1562 C. Rings 题意: 给你一个长度为n的01串,在01串选两个连续区间S和T,要求区间长度>=⌊n2⌋\lfloor \frac{n}{2} \rfloor⌊2n⌋. 现在定 ...
【CodeForces - 215B 】Olympic Medal （数学，公式推导）
题干: The World Programming Olympics Medal is a metal disk, consisting of two parts: the first part is ...
Gym 100818I Olympic Parade（位运算）
Olympic Parade http://acm.hust.edu.cn/vjudge/contest/view.action?cid=101594#problem/I [题意]: 给出N个数,找出 ...
弹性与智能—下一代移动网络系统（RINGS）
译者:胡少波,庄琰,刘欣,段承序,王玉虎,于栖洋,关天海,何瑞麟重要信息和修订说明应征集意见而提交的任何提案都应根据修订后的< NSF提案和奖励政策与程序指南>(PAPPG)(NSF ...

Olympic rings

文章目录

html

css

Olympic rings相关推荐

最新文章

热门文章