[Lab] Codecademy CSS 教學筆記 4

3月 14, 2014

-- Sorting Your Friends --

1 / 8
What you'll be building

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div class="friend" id="best_friend"><p>Arthur</p></div>
<div class="friend"><p>Batmanuel</p></div>
<div class="friend"><p>Captain Liberty</p></div>
<div class="friend"><p>The City</p></div>
<div class="friend"><p>Justice</p></div>
<div class="family"><p>Mom</p></div>
<div class="family"><p>Dad</p></div>
<div class="family"><p>Bro</p></div>
<div class="family"><p>Sis</p></div>
<div class="family"><p>Rex</p></div>
<div class="enemy"><p>Baron Violent</p></div>
<div class="enemy"><p>The Breadmaster</p></div>
<div class="enemy"><p>The Deadly Nose</p></div>
<div class="enemy"><p>Dinosaur Neil</p></div>
<div class="enemy" id="archnemesis"><p>Chairface</p></div>
</body>
</html>

--------CSS----------
div {
position: relative;
display: inline-block;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
margin-left: 5px;
margin-top: 5px;
text-align: center;
}

div p {
position: relative;
margin-top: 40px;
font-size: 12px;
}

.friend {
border: 2px dashed green;
}

.family {
border: 2px dashed blue;
}

.enemy {
border: 2px dashed red;
}

#best_friend {
border: 4px solid #00C957;
}

#archnemesis {
border: 4px solid #cc0000;
}