效果图:
html代码:
<!DOCTYPE html>
<html>
<head>
<title>美国国旗</title>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/nationalFlag.css">
</head>
<body>
<div class="father">
<div class="one"> </div>
<div class="two"> </div>
<div class="three"> </div>
<div class="four"> </div>
<div class="five"> </div>
<div class="six"> </div>
<div class="seven"> </div>
<div class="eight"> </div>
<span class="star1">★</span>
<span class="star2">★</span>
<span class="star3">★</span>
<span class="star4">★</span>
<span class="star5">★</span>
<span class="star11">★</span>
<span class="star21">★</span>
<span class="star31">★</span>
<span class="star41">★</span>
<span class="star12">★</span>
<span class="star22">★</span>
<span class="star32">★</span>
<span class="star42">★</span>
<span class="star52">★</span>
<span class="star13">★</span>
<span class="star23">★</span>
<span class="star33">★</span>
<span class="star43">★</span>
<span class="star14">★</span>
<span class="star24">★</span>
<span class="star34">★</span>
<span class="star44">★</span>
<span class="star54">★</span>
<span class="star15">★</span>
<span class="star25">★</span>
<span class="star35">★</span>
<span class="star45">★</span>
<span class="star16">★</span>
<span class="star26">★</span>
<span class="star36">★</span>
<span class="star46">★</span>
<span class="star56">★</span>
<span class="star17">★</span>
<span class="star27">★</span>
<span class="star37">★</span>
<span class="star47">★</span>
<span class="star18">★</span>
<span class="star28">★</span>
<span class="star38">★</span>
<span class="star48">★</span>
<span class="star58">★</span>
<span class="star19">★</span>
<span class="star29">★</span>
<span class="star39">★</span>
<span class="star49">★</span>
<span class="star110">★</span>
<span class="star210">★</span>
<span class="star310">★</span>
<span class="star410">★</span>
<span class="star510">★</span>
</div>
</body>
</html>
js代码:
/*消除内外边框距离*/
*{
padding:0px;
margin:0px;
}
/*设置父级容器*/
.father{
border-color:#ccc;
border-width:1px;
border-style:solid;
margin:0px auto;
width:300px;
height:185px;
}
/*横向方向,红色*/
.one{
background-color:#BC1440;
width:300px;
height:15px;
/*让star漂浮*/
float:left;
/*定位*/
margin-left:0px;
margin-top:0px;
}
.two{
background-color:#BC1440;
width:300px;
height:15px;
/*让star漂浮*/
float:left;
/*定位*/
margin-left:0px;
margin-top:10px;
}
.three{
background-color:#BC1440;
width:300px;
height:15px;
/*让star漂浮*/
float:left;
/*定位*/
margin-left:0px;
margin-top:13px;
}
.four{
background-color:#BC1440;
width:300px;
height:15px;
/*让star漂浮*/
float:left;
/*定位*/
margin-left:0px;
margin-top:13px;
}
.five{
background-color:#BC1440;
width:300px;
height:15px;
/*让star漂浮*/
float:left;
/*定位*/
margin-left:0px;
margin-top:14px;
}
.six{
background-color:#BC1440;
width:300px;
height:15px;
/*让star漂浮*/
float:left;
/*定位*/
margin-left:0px;
margin-top:15px;
}
.seven{
background-color:#BC1440;
width:300px;
height:15px;
/*让star漂浮*/
float:left;
/*定位*/
margin-left:0px;
margin-top:15px;
}
.eight{
background-color:#05275C;
width:150px;
height:111px;
/*让star漂浮*/
float:left;
/*定位*/
margin-left:0px;
margin-top:-200px;
}
.star1{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:0px;
margin-top:-189px;
}
.star2{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:0px;
margin-top:-170px;
}
.star3{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:0px;
margin-top:-149px;
}
.star4{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:0px;
margin-top:-129px;
}
.star5{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:0px;
margin-top:-110px;
}
.star11{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:13px;
margin-top:-180px;
}
.star21{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:13px;
margin-top:-160px;
}
.star31{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:13px;
margin-top:-140px;
}
.star41{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:13px;
margin-top:-120px;
}
.star12{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:26px;
margin-top:-189px;
}
.star22{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:26px;
margin-top:-170px;
}
.star32{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:26px;
margin-top:-149px;
}
.star42{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:26px;
margin-top:-129px;
}
.star52{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:26px;
margin-top:-110px;
}
.star13{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:39px;
margin-top:-180px;
}
.star23{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:39px;
margin-top:-160px;
}
.star33{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:39px;
margin-top:-140px;
}
.star43{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:39px;
margin-top:-120px;
}
.star14{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:52px;
margin-top:-189px;
}
.star24{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:52px;
margin-top:-170px;
}
.star34{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:52px;
margin-top:-149px;
}
.star44{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:52px;
margin-top:-129px;
}
.star54{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:52px;
margin-top:-110px;
}
.star15{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:65px;
margin-top:-180px;
}
.star25{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:65px;
margin-top:-160px;
}
.star35{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:65px;
margin-top:-140px;
}
.star45{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:65px;
margin-top:-120px;
}
.star16{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:78px;
margin-top:-189px;
}
.star26{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:78px;
margin-top:-170px;
}
.star36{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:78px;
margin-top:-149px;
}
.star46{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:78px;
margin-top:-129px;
}
.star56{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:78px;
margin-top:-110px;
}
.star17{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:91px;
margin-top:-180px;
}
.star27{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:91px;
margin-top:-160px;
}
.star37{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:91px;
margin-top:-140px;
}
.star47{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:91px;
margin-top:-120px;
}
.star18{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:104px;
margin-top:-189px;
}
.star28{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:104px;
margin-top:-170px;
}
.star38{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:104px;
margin-top:-149px;
}
.star48{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:104px;
margin-top:-129px;
}
.star58{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:104px;
margin-top:-110px;
}
.star19{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:117px;
margin-top:-180px;
}
.star29{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:117px;
margin-top:-160px;
}
.star39{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:117px;
margin-top:-140px;
}
.star49{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:117px;
margin-top:-120px;
}
.star110{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:130px;
margin-top:-189px;
}
.star210{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:130px;
margin-top:-170px;
}
.star310{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:130px;
margin-top:-149px;
}
.star410{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:130px;
margin-top:-129px;
}
.star510{
color:#E4F2FD;
background-color:#05275C;
width:0px;
height:0px;
/*漂浮起来*/
float:left;
/*定位*/
margin-left:130px;
margin-top:-110px;
}