這節課主要是複習一下前一課的內容，會用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" /> <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>
更多精彩內容：http://www.bianceng.cn/web/Html/
效果圖：
從效果可以看出，class friend 和id best_friend還有enemy和archnemesis都同時被一個div引用，結果顯示的效果是best_friend的，說明了id的優先順序比class更高。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
