zoukankan      html  css  js  c++  java
  • 遇到容易忘记的问题已分离

    /**
     * Created by wdj on 2017/10/24.
     */

      

    1.鼠标手的自定义,ie8不兼容

    css{
        cursor:url(images/1.png),default;
    }

    2.a标签

    1 <!--拨打电话-->
    2 <a href="tel://010-1221556">010-1221556</a>
    3 
    4 
    5 <!--打开新网页-->
    6 <a href="javascript:;" target="_blank">新页面的打开</a>
    <!--从本页面打开新网页-->
    <a href="javascript:;" target="_self">从本页面打开新网页</a>
     

    3.现在使用*zoom:1;清除浮动比较少,现在基本改为这样清浮动:

    .containt:after{
          conten:'';
          display:table;
          clear:both;
    }    

    zoom的作用:①检测标签是否闭合,②清除浮动,③样式排除法;但是其原理还是不明白.


    4.弹框,一直没有注意过,一直使用rgba写的,但是在ie8不兼容(解决兼容,就是自己找对应的颜色值,参考本文第10条

    background:rgba(0,0,0,0.5);  

    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000)

    ),

    要写出现带阴影的遮罩:先设一个大的div,里面包含两个,一个作为背后阴影,一个作为中间内容,为了防止继承性
    html部分

    <div class="tan">
         <div class="bg"></div>
         <div class="tancon"></div>/*屏幕居中*/
    </div>

    css部分(设定最大最小高度min-height和max-height, 在这个之间的高度可以自适应, 最好tancon外再加一个<div>, 定义宽高但是不给背景, 给tancon背景和padding-bottom )

             .tan {
                    width: 100%;
                    height: 100%;
                    margin: 0 auto;
                    display: none;
                }
    
                .bg {
                    width: 100%;
                    height: 100%;
                    /*兼容IE8及以下版本浏览器*/
                    filter: alpha(opacity = 30);
                    position: fixed;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    margin: 0 auto;
                    z-index: 999998;
                    background-color: #666666;
                    -webkit-opacity: 0.5;
                    -moz-opacity: 0.5;
                    -khtml-opacity: 0.5;
                    opacity: 0.5;
                    filter: alpha(opacity = 50);
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
                    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
                }
                
                .tancon {
                    width: 472px;
                    height: 280px;
                    position: fixed;
                    background-color: #fff;
                    top: 0;
                    right: 0;
                    left: 0;
                    bottom: 0;
                    margin: auto;
                    text-align: center;
                    z-index: 999999;
                }

    5.在ie8中,input内容不居中,需将input{line-height:;height:;} 

         select不居中,需使用{padding:7px 0px;}

         background-size:200px;//在ie8不被识别;除了网上的一些兼容方法,我的办法还有就是调整一下图片大小,最好是你需要的大小,这样图片的background-size不至于太过夸张的大小.

        有时ie浏览器不会自主解析,如img无宽高时.

    6.页面最上面的小图标

    <link rel="shortcut icon" href="images/favicon.ico" >

    7.选择根据屏幕大小,选择css,没有自适应活动

     <link rel="stylesheet" media="screen and (min-0px) and (max-device-768px)" href="css/c1.css"/>
     <link rel="stylesheet" media="screen and (min-768px)" href="css/c2.css"/>

    8.文字的一些使用

    .css{
        text-indent:5px;//首行缩进
        letter-spacing:2px;//字间距
        
    }

     9.选中文本使用css3选择器   ::selection  

    body::selection{
        color:#fff;
         background:purple; 
    }    
    body::-moz-selection{
        color:#fff;
         background:purple; 
    }    
    /*ie9,chmore goole,safari,opera,支持此选择器*/
    /*Firefox支持替代的::-moz-selection*/

    /*直接用<body>标签body里的其他标签里的文字并不会继承body,奇怪,只能一个标签一个标签的加这个属性和属性值.*/

    10.ig8使用rega

    可以这样

    background: rgb(0, 0, 0); /*不支持rgba的浏览器*/ background: rgba(0,0,0,.4); /*支持rgba的浏览器*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); /*IE8支持*/
     最好这样

        background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); zoom: 1;

    参考颜色是下图,参考链接https://blog.csdn.net/u013778905/article/details/52503685

    11. js获取name

     <lable>
        <span id="onlinePerson" name="person" onclick="changeImg(this)" >
          <img id="imgPerson" src="images/invote-checked.png">个人
       </span>
     </lable>
    function changeImg(obj) {
        // console.log(obj.name); //错误的只支持obj.id
        // $(obj).attr("name"); //jquery写法
        console.log(obj.getAttribute("name"));
    }

    12.webstorm新建多个项目:File -> settings -> Directories -> Add Content Root 添加新项目->确定即可。

      

     13.多行文本框(文本域)编辑需要高度自适应, 改变不了<textarea>的样式, 只能用<div>模仿了, 使用contenteditable 属性,来规定元素内容是否可编辑。

    <div class="liketextarea" contenteditable="true" ></div>
    .liketextarea{
        width: 100%;
        min-height: 1.6rem;
        border: none;
        background: transparent;
        outline: none;
        font-size: .26rem;
        color: #1c1c1c;
        line-height: .44rem;
    }
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 黑色星期五
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    控件动态产生器(使用RegisterClasses提前进行注册)
    Delphi编写自定义控件以及接口的使用(做了一个TpgDbEdit)
    Log4delphi使用心得
  • 原文地址:https://www.cnblogs.com/wangduojing/p/7724647.html
Copyright © 2011-2022 走看看