这节课主要是复习一下前一课的内容,会用 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 更高。
来源: http://www.bianceng.cn/web/Html/201411/46560.htm