其他样式属性

其他样式:

1. :hover 鼠标移上执行样式     cursor:pointer;  鼠标光标变成手

2. display:none;  隐藏     block(显示)隐藏不占位置

display能改变<span>的大小(<span>的大小由它的内容大小决定)

isibilith:hidden; 隐藏   visoble 显示   隐藏占位置

3. overflow:visible; (isible 可见 )  (  hidden  隐藏  )     超出部分隐藏

4. opacity:0.5;       -moz-opacity:0.5;      filter:alpha(opacity=50);      透明度50%

5. border-radius   圆角

6. box-shadow  阴影     box-shadow:    0      0        5px       white;

                                                         阴影的位置      粗细        颜色

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
*{
    margin:0px auto;
    padding:0px;
    }
#test{
    
    width:200px;
    height:200px;
    background-color:#06F;
    display:none;
    }
#test:hover{
    background-color:#F00;
    cursor:pointeer;     /*鼠标的光标变成手*/
    
    }
#er{
    width:200px;
    height:200px;
    background-color:#C3F;
    }
    #span{
        width:300px;
        height:200px;
        display:block;
        }
</style>
</head>

<body>
<div id="test"></div>
<div id="er"></div>
<span id="span">这是SPAN</span>
</body>
</html>

 

posted @ 2017-06-11 11:19  挽你何用  阅读(246)  评论(0编辑  收藏  举报