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前端我的筆記（未完待續...）