•  
     

3 círculos - HTML & CSS

index.html

Código: Selecionar todos

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>3 círculos - HTML & CSS</title>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>


stylesheet.css

Código: Selecionar todos

div {
	display: inline-block;
	margin-left: 5px;
	width:100px;
	height:100px;
	border-radius:100%;
	border:2px solid black;
}

Demo: http://jsfiddle.net/Hsx4v/
 
index.html

Código: Selecionar todos

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>3 círculos - HTML & CSS</title>
	</head>
	<body>
		<div class="friend"></div>
		<div class="family"></div>
		<div class="enemy"></div>
	</body>
</html>


stylesheet.css

Código: Selecionar todos

div {
	display: inline-block;
	margin-left: 5px;
	width:100px;
	height:100px;
	border-radius:100%;
	border:2px solid black;
}
.friend{border:2px dashed #008000;}
.family{border:2px dashed #0000FF;}
.enemy{border:2px dashed #FF0000;}

Demo: http://jsfiddle.net/NG7xV/
 
index.html

Código: Selecionar todos

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>3 círculos - HTML & CSS</title>
	</head>
	<body>
		<div id="best_friend" class="friend"></div>
		<div class="family"></div>
		<div id="archnemesis" class="enemy"></div>
	</body>
</html>


stylesheet.css

Código: Selecionar todos

div {
	display: inline-block;
	margin-left: 5px;
	width:100px;
	height:100px;
	border-radius:100%;
	border:2px solid black;
}
.friend{border:2px dashed #008000;}
.family{border:2px dashed #0000FF;}
.enemy{border:2px dashed #FF0000;}
#best_friend{border:4px solid #00C957;}
#archnemesis{border:4px solid #CC0000;}

Demo: http://jsfiddle.net/xhVQ6/


Ressuscitado pela última vez por Anderson em 06 abr 2014 15:22.