zoukankan      html  css  js  c++  java
  • CSS备忘

    垂直居中:
               先height再ling-height,都设成一样高

    span 垂直居中:vertical-align:50%
    设置外边距:
               margin-top,margin-left,margin-right,margin-bottom
    div背景单张铺满设置:
               30px;
               height: 30px;
               line-height: 30px;
               background-image: url(../image/lzhf/one.png);
               background-repeat: no-repeat;
               background-size: 100% auto;

    div浮在div上:
               <div style="position: relative;height: 30px; 100%">
                  <div style="height: 30px; overflow: hidden;position: absolute;z-index: 2; 100%;">
                      <img alt="主要职责" style=" 100%; height: 30px;"
                          src="../../image/ljfy/zcjgtop.png">
                  </div>

                  <div style="position: absolute;z-index: 3;margin-left:10px;height: 30px;line-height: 30px;">
                      <img src="../../image/ljfy/zyzzc.png" width="30" height="30">
                  </div>
                  <div style="position: absolute;z-index: 3;margin-left: 38px;height: 30px;line-height: 30px;">
                      <font style="font-weight: bold">共有内设机构20个</font>
                  </div>
              </div>   

    解决非固定宽度的浮动问题:

    结束加上<div style="clear:both;height: 0px;"></div>

    js改变背景颜色:
    document.getElementById('mycolor').style.background=yc

    显示不显示:

    document.getElementById("ah2").style.display = "block";

    $("#id").css('display','none'); 

    $("#id")[0].style.display = 'none'; 

    图片在div中居中显示(水平居中和垂直居中):
    水平居中:div设置:text-align:center;
    img设置:图片宽度; margin:0 auto;

    垂直居中:div设置:position:relative;
    img设置:position:absolute; top:50%; height:图片高度; margin-top:图片高度的一半;

    让两个Div并排显示:

    <div style="300px; height:auto; float:left; display:inline">AAAA</div>   

    <div style="300px; height:auto; float:left; display:inline">BBBB</div>  

    table中的td换行:

    在table定义中,添加style="table-layout:fixed;"

    在对需要换行的td中,添加style="word-break:break-all;"

    预打印:

    分页  <br style="page-break-after: always;" />

    打印时不显示  

    <style>
    @media print {
      .noprint {
      display: none
      }
    }
    </style>

    <tr align="center" class="noprint">

    点击文字可以选中相应的checkbox  :

    <input id="check1" name="tag" type="checkbox" value="长发"/><label for="check1">长发</label>

    图片居中:

     img{ display:block; margin:0 auto;}

    优先级:

    .style1{
     color: #5a5100 !important;
     text-decoration: none;
    }

  • 相关阅读:
    算法----(1)冒泡排序
    淘宝爬虫
    爬虫_豆瓣电影top250 (正则表达式)
    爬虫_猫眼电影top100(正则表达式)
    Android 简单调用摄像头
    Android 简单天气预报
    思维模型
    This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you
    Android studio preview界面无法预览,报错render problem
    Android studio 3.1.2报错,no target device found
  • 原文地址:https://www.cnblogs.com/sprinng/p/3713754.html
Copyright © 2011-2022 走看看