本文出自 http://blog.csdn.net/shuangde800
[Codecademy] HTML && CSS課程學習目錄
------------------------------------------------------------------------------------------------
這節課主要是複習一下前一課的内容，會用div來建立幾個圓圈，讓用class和id來給他們設定風格。
其中涉及到的屬性： display: inline-block border-radius: 100%; margin-left: 5px 将會在後面課程有講
stylesheet.css
/*Add your CSS below!*/
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 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;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" target="_blank" rel="external nofollow" />
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div class="friend" id = "best_friend"> </div>
<div class="family"> </div>
<div class="enemy" id = "archnemesis"> </div>
</body>
</html>
效果圖：
從效果可以看出，class friend 和id best_friend還有enemy和archnemesis都同時被一個div引用，結果顯示的效果是best_friend的，說明了id的優先級比class更高。
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)