当前位置: 老葡京网站娱乐 > 网页设计 > Html教程 > 正文

HTML及CSS基础课(十) 用class和id为div设置风格

时间:2014-11-07

老葡京网站娱乐 www.sdguanhua.com 这节课主要是复习一下前一课的内容,会用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.sdguanhua.com/web/Html/

效果图:

从效果可以看出,class friend 和id best_friend还有enemy和archnemesis都同时被一个div引用,结果显示的效果是best_friend的,说明了id的优先级比class更高。