html+css常用小筆記(持續更新)

來源:互聯網
上載者:User

標籤:瞭解   pre   ima   opera   border   第一個   img   web   bottom   

一、去掉input點擊時的藍色邊框

outline:none;

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 二、禁止文本選中

-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Chrome/Safari/Opera */-khtml-user-select: none; /* Konqueror */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge *//*說明:該屬性不加首碼不支援目前所有瀏覽器*/user-select: none; /* Non-prefixed version, currently not supported by any browser */

注意:

在 IE < 10 和Opera < 15中我們需要在需要禁止選中的元素上面添加一個屬性

unselectable="on",否則可能不會生效哦~不過現代瀏覽器如果不是非得相容一些老的瀏覽器也可以不加。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

三、CSS首碼

  • Trident核心:首碼為-ms
  • Gecko核心:首碼為-moz
  • Presto核心:首碼為-o
  • Webkit核心:首碼為-webkit

以上為四大主流核心。

Konqueror核心:首碼為-khtml-  註: 該核心並不主流,有興趣的可以百度做瞭解。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

四、textarea(文本域)禁止拖拽(禁止改變大小)

有兩種方式:

  1)禁止右下的拖拽按鈕。(推薦這樣)

resize: none;

  2)固定大小。(但是右下角的按鈕還是有,只是拖拽不會改變大小)

width: 350px;height: 150px;max-width: 350px;max-height: 150px;

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

五、區塊層級元素背景圖(background-img)展開填充整個元素。

 

    background: url("Your Image URL");    background-repeat: no-repeat;    background-size:100% 100%;

 

background-size處理auto contain cover常規值 還可以填寫百分比或者尺寸。第一個值為背景圖寬 第二個為背景圖高。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

六、背景圖超長不破壞原圖比例置中對齊。

background-repeat: no-repeat;background-position: center;
background-position設定背景圖對齊,可以設兩個值,第一個x軸 第二個y軸。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

七、absolute元素置中(水平,垂直置中)

方法一

  margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0;

適用未知尺寸元素。

方法二

position:absolute;width:200px;height:400px;left:50%;top:50%;margin-left:-100px;  /*設定為寬度的一半*/margin-top:-200px;   /*設定為高度的一半*/

適用已知尺寸元素

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 八、給table中的thead和tbody加邊框。

thead和tbodytbody就這麼加border是不起作用的,一般的做法都是給thead和tbody裡面的tr的td加邊框,顯然這不是個好解決方案。

table {    border-collapse: collapse;}/*把table標籤的border-collapse樣式設定一下,就可以給thead設定邊框樣式了。*/

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 九、js提起漢字(也可以提取數字,替換正則就行)

var str="怎樣從一個Html頁面中提取所有漢字呢?不能有其它Html代碼。";  alert(str.replace(/[^\u4e00-\u9fa5]/gi,""));  

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 十、被忽略的一組標籤——群組方塊

<fieldset>    <legend>組標題</legend>    <!--內容--></fieldset>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

html+css常用小筆記(持續更新)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.