在写html页面时,自己用到的

1.通过下面这几行语句可以实现,点击按钮让隐藏框显示,再点击消失:

css:    z-index:3;top:230px;left:350px;position:absolute;     //让隐藏框悬浮起来,z-index越大,用来控制悬浮在最上面 

<input type="button" onClick="show()" value="回复"/>

<div id="backhid" ></div>

<script type="text/javascript">    //用jquery可以写成:$("#backhid").css("display")

                    function show()
                    {
                    var value = document.getElementById("backhid").style.display;
                    if(value=="block")
                    {
                    document.getElementById("backhid").style.display="none";
                    
                    }
                    else
                    document.getElementById("backhid").style.display="block";
                    }

</script> 

2.圆角和阴影的实现:

-moz-box-shadow: 3px 3px 2px #888888; /* 老的 Firefox */
box-shadow: 3px 3px 2px #888888;
border-radius:12px;
-moz-border-radius:12px;

3.让背景变透明:

background: rgba(20,20,100,0.5);    //参数可以改

4.使悬浮框可以不随着滚动条滚动而滚动:

    position: fixed;
    opacity: 1;
    filter:alpha(opacity=20);

5.让一个固定长度的div或li标签显示数据,多余的数据会表示成...

  1. word-wrapnormal;
  2. white-spacenowrap;
  3. overflowhidden;
  4. text-overflowellipsis;

   注释: word-wrap:normal | break-word; (内容换行)
         normal:默认的属性值.(允许内容顶开指定的容器边界). 
         break-word:内容将在边界内换行(不截断英文单词换行,截断英文单词下面的属性才具备这个功能。)

             text-overflow:clip | ellipsis (文本溢出)
             clip :  不显示省略标记(...),而是简单的裁切
             ellipsis :  当对象内文本溢出时(超过width部分)显示省略标记(...)

       white-space: normal | pre | nowrap (内容不换行)
normal 默认。空白会被浏览器忽略。 
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 

  当子容器的宽高超出父容器时,父容器就会被撑开来。

  要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐藏。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值