随身笔记

作者： admin

  • CSS控制div、文本内容自适应垂直居中

    table-cell不支持IE7

    通常我们知道固定的高度让文本垂直居中只要设置：

    height:50px; line-height:50px

    在某些情况下我们不知道内容高度但是也无法设置line-height的值

    只要在包含内容的容器下设置：

    display:table-cell; vertical-align:middle;

<div style="display:table-cell; vertical-align:middle;">
  <p>不固定的内容高度</p>
</div>

    同样的也能让div自适应垂直居中，只要外层设置了display:table-cell; vertical-align:middle;

     

     

  • CSS实现文章底部淡出效果

    CSS实现文章底部淡出效果

    wenzhangdanchu

     

    显示效果

  • 自定义个性的滚动条效果及文章末端半透明效果

    自定义个性的滚动条效果及文章末端半透明效果

    gundongt

     

    点击显示效果

  • input文本框里面插入小图片

    input文本框里面插入小图片

    inputtu

     

    [code]<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
    <style type=”text/css”>
    body { font-family: Arial, Helvetica, Sans-serif; font-size:13px;}
    #sampleForm label { display:block; margin-top:10px;}
    #sampleForm input[type=”text”] { width:200px; border:solid 1px #000; padding:3px 0px;}
    #sampleForm img { vertical-align:middle; cursor:pointer; }
    .imageInputWrapper{ width:200px; border:solid 1px #000; }
    #sampleForm input.inputWithImge { width:175px; border:none; margin-right:5px;}
    </style>
    <script type=”text/javascript” src=”JS库路径”></script>
    <script type=”text/javascript”>
    $(document).ready(function() {
    $(“.inputWithImge”).each(function(){
    $(this).add($(this).next()).wrapAll(‘<div class=”imageInputWrapper”></div>’);
    });
    });
    </script>[/code]

     

    [code]<fieldset id=”sampleForm”>
    <label for=”txtName”>Full name</label>
    <input id=”txtName” type=”text” />
    <label for =”txtDOB”>Date of birth</label>
    <input id=”txtDOB” type=”text” class=”inputWithImge” />
    <img src=”图片路径” alt=”Click to popup the clendar!” onclick=”alert(‘Popup some calendar here!’);” />
    <label for=”txtBank”>Bank</label>
    <input id=”txtBank” type=”text” class=”inputWithImge” />
    <img src=”图片路径” alt=”Click to popup the bank window!” onclick=”alert(‘Popup some window here!’);” />
    </fieldset>
    <button id=”btnNothingToDo”>Do nothing</button>[/code]

    还有一种是纯CSS编写的方法：《input搜索文本框中添加插入小图片》

  • em标签结合css的border属性实现流行的倒三角效果

    em标签结合css的border属性实现流行的倒三角效果，这里IE7包括IE7以下浏览器不支持效果。

    daosanjiao

    [code]<style type=”text/css”>
    a {color:#FFF;text-decoration:none;font-weight:bold;}
    .box{ width:300px; height:30px;background:#CCC;position:relative;top:100px;left:100px;padding:8px 0 0 12px; }
    .to-top{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:0 6px 6px 6px; position:absolute; left:30px; top:0;margin-top:-6px;}
    .to-right{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 0 6px 6px; position:absolute; right:0px; top:30px;margin-right:-6px;}
    .to-bottom{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#ccc #fff; border-width:6px 6px 0 6px; position:absolute; right:30px; bottom:0;margin-bottom:-6px;}
    .to-left{display:block; overflow:hidden; width:0px; height:0px; border:6px solid #ccc; border-color:#fff #ccc; border-width:6px 6px 6px 0 ; position:absolute; left:0; bottom:30px;margin-left:-6px;}
    </style>[/code]

     

    [code]<div class=”box”><a href=”https://sdeno.com”>CSS代码实例 www.xgllseo.com</a><em class=”to-bottom”></em></div>[/code]