Web前端我的笔记（未完待续...）

时间 2019-11-11

原文原文链接

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的做用。java

如：一个text文本框，选中以后(得到焦点)在ie下面是正常显示而在谷歌等浏览器上有一个虚线框，很明显，这样很不美观，因此就要让它永不显示，这个时候就须要用到outline这个属性;web

outline:none; 就能够隐藏这个虚线框. 亦能够自定义被激活时的样式：outline:1px solid red;浏览器

cursor:pointer; 鼠标移上去变手形状;函数

按回车键登陆(或下个文本框获取焦点):布局

<form action="" id="loginform" method="post">
   <div id="logintab">
    <ul>
     <li class="li"><div class="lab">用户名</div>
      <input id="username" name="username" type="text" class="loginuser" onkeydown="keyLogin(event)"/>
     </li>
     <li class="li"><div class="lab">密码</div>
      <input id="userpass" name="userpass" type="password" class="loginpwd" onkeydown="keyLogin(event)"/>
     </li>
     </li>
    </ul>
   </div>
   <div id="loginsub">
    <input type="button" name="btnsub" id="login-btn" class="login-btn" onmouseover="this.className = 'login-btn-sel'" onmouseout="this.className = 'login-btn'" onclick = "checklogin()" value="登 录" />
    <input type="button" class="reset-btn" onmouseover="this.className = 'reset-btn-sel'" onmouseout="this.className = 'reset-btn'" value="重置" onclick = "rsestlogin()"/>
    <div style="clear: both;"></div>
   </div>
  </form>

在每一个文本框里面加入post

onkeydown="keyLogin(event)"

这句话，而后在JS里，字体

function keyLogin(e) {
  var k = window.event?window.event.keyCode:e.which;
  if(k == 13){
   $("#login-btn").click(); //调用登陆按钮的登陆事件 
  }
 }

便可实现回车键登陆.this

文字内容超出长度后，以省略号的形式显示:spa

white-space: nowrap; （不换行，一行显示） 
text-overflow: ellipsis; （溢出用省略号）
-o-text-overflow: ellipsis;
overflow: hidden; （多出的文字，隐藏） }

IE8中设置了readonly="readonly";为啥还有光标？code

<input type="text" readonly="readonly" UNSELECTABLE ='on'/>

在IE浏览器中，当input得到焦点时，点击有unselectable="on"属性的标签时，不会触发onblur事件。

网页中，屏蔽右键的方法：

<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
</body>

JS中为标签添加/移除onclick函数(CSS样式):

$("#StartStream").removeClass("rbtn").addClass("rbtnh");
$("#StartStream").attr("onclick","StartStream("+strid+","+strpid+")");

$("#StartStream").removeClass("rbtnh").addClass("rbtn");
$("#StartStream").removeAttr("onclick");

JS中修改图片:

HTML:
<img id="ddd" src="../../imgs/a.jpg">
JS:
$("#ddd").attr("src","${ctx}/imgs/b.jpg");

1,各浏览器下，margin与padding显示差别
   ==解决办法:CSS reset
2,block+float+水平margin,IE6里的间距比超过设置的间距(横向布局)
   ==解决办法:diaplay:inline
   (不用担忧内联元素无宽高，由于float会让inline元素haslayout,让inline元素表现的和inline-block元素同样有宽高和垂直内外边距)
   [咱们最经常使用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候咱们一般都是用div float实现的，横向的间距设置若是用margin实现，这就是一个必然会碰到的兼容性问题]
3,inline+(display:block)+float+水平margin,IE6里的间距比超过设置的间距
   说明:该状况与上面的差很少,只是此处的元素一开始是内联元素,加了display:block的CSS属性.由于它自己就是行内属性标签，因此咱们再加上display:inline的话，它的高宽就不可设了。这时候咱们还须要在display:inline后面加入display:talbe
   ==解决办法:display:inline;display:table;
4,IE6对margin:0 auto;不会正确的进行解析
   解决办法：
      在父元素中使用text-align:center,在元件中使用text-align:left
5,没法设置微高(通常小于10px)：
   说明:当设置元素高度小于10px时，IE6和IE7不受控制，超出设置的高度
   产生缘由:IE不容许原件的高度小于字体的高度
   解决办法1:设置字体大小:font-size:0;
   解决办法2:给超出高度的标签设置overflow:hidden
   解决办法3:设置行高line-height小于你设置的高度
6,子元件撑破父元件
   缘由:父元件设置了overflow:auto属性,子元件会从父元件中撑破出来
   解决办法:父元件中设置position:relative;
7,IE没法解析min-height和min-width
   解决办法1:
   selector{
      min-height:150px;
      height:auto !important;
      height:150px;
   }
   解决办法2：
   selector{
      min-height:150px;
      height:150px;
   }
   heml>body selector{
      height:auto;
   }
8,使用ul li时,li与li之间会空行
   解决办法1:设置li selector{height:**px;}
   解决办法2:li selector{float:left;clear:left;}
   解决办法3:li{display:inline}

===========================

表格的单击行后，让当前行高亮显示

$(obj).addClass('bgclick'); // 设置被点击元素为红色
$(obj).siblings('tr').removeClass('bgclick'); // 去除全部同胞元素的红色样式

Web前端 我的笔记（未完待续...）

Web前端我的笔记（未完待续...）