プレビュー
次のようにこのビデオは練習中、金融機関の練習を教えている、私自身のコードは次のとおりです。
wh.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" type="text/css" href="sy2.css">
</head>
<body>
<span>
<div class="blue"></div>
<div class="yellow"></div>
<div class="black"></div>
<div class="green"></div>
<div class="red"></div>
</span>
</body>
</html>
wh.css
span{
position: fixed;
left: 50%;
right: 50%;
width: 750px;
height: 325px;
margin-left: -325px;
margin-right: -325px;
}
*{
margin: 0;
padding: 0;
}
.blue{
z-index: 0;
border:15px solid blue;
width: 200px;
height: 200px;
border-radius: 200;
}
.yellow{
z-index:1;
position: absolute;
top: 125px;
left: 125px;
border:15px solid yellow;
width: 200px;
height: 200px;
border-radius: 200;
}
.black{
z-index:0;
position: absolute;
top:0px;
left: 275px;
border:15px solid black;
width: 200px;
height: 200px;
border-radius: 200;
}
.green{
z-index:1;
position: absolute;
top:125px;
left: 425px;
border:15px solid green;
width: 200px;
height: 200px;
border-radius: 200;
}
.red{
z-index:0;
position: absolute;
top:0px;
left: 550px;
border:15px solid red;
width: 200px;
height: 200px;
border-radius: 200;
}
コードの最適化の結果が完了している：
wh.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" type="text/css" href="sy2.css">
</head>
<body>
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</body>
</html>
wh.css
*{
margin: 0;
padding: 0;
}
.plat{
position: absolute;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top:-93px;
border: 5px solid black;
height: 185px;
width: 380px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid black;
border-radius: 50%;
}
.circle1{
border-color: red;
left: 0;
top: 0;
}
.circle2{
border-color: green;
left: 130px;
top:0;
}
.circle3{
border-color: blue;
left: 260px;
top:0;
}
.circle4{
border-color: yellow;
left: 65px;
top:70px;
}
.circle5{
border-color: purple;
left:195px;
top:70px;
}
