<div id="m1">
<div>jQuery</div>
</div>
<div id="m2">
<div>html</div>
<div>css</div>
<div>javascript</div>
</div>
* {
margin: 0;
padding: 0;
}
#m2 {
text-align: center;
}
.box {
border-bottom: 2px solid #ccc;
text-align: center;
padding: 20px;
margin-bottom: 10px;
}
.circle0,
.circle1,
.circle2 {
width: 200px;
height: 200px;
border-radius: 100px;
border: 4px solid #ff6600;
line-height: 200px;
display: inline-block;
}
$(document).ready(function() {
$("#m1 > div").addClass("box");
$("#m2 > div").addClass(function(index) {
return "circle" + index;
});
});
This Pen doesn't use any external CSS resources.