零散記錄

-------HTML5-----------
isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<input type="search" name="user_search" placeholder="Search W3School" />
placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。
該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。

nav和section(必需要) 須要一個標題<h1>,div和header不須要，解決能夠style:"display:none;" outline:none

text-align:justify; //文本徹底兩端對齊。
text-justify:inter-ideograph; //ie hack 爲表意字文本提供徹底兩端對齊。
word-wrap:break-word;
word-break:break-all;

section通常不用於佈局

font-face的ie設置，format('eot');

IE暫時還不能識別header,通常我外加個div

cursor:pointer;

word-break:break-all; word-wrap:break-word;

document.oncontextmenu=function(e){return false;}//禁止右鍵

-------CSS3-----------

/* 圖片加超連接取消邊框 */
img {
border:0;
margin:0;
padding:0;
}

opacity:0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;

-moz表明firefox瀏覽器私有屬性
-ms表明IE瀏覽器私有屬性
-webkit表明chrome、safari私有屬性
-o表明opera

display（生成出框）

rgba(0,0,0,0.2)//前3個是顏色，最後是透明度

/* 右，下，羽化，顏色 */
div
{
box-shadow: 10px 10px 5px #888888;
}

/* 代替取消浮動 （在中間加這個DIV（chearfix））*/
.chearfix:after{
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}

/* 全部內邊距都在設定的大小裏面進行改變 */
.in {

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:50%;
float:left;
}

/* 若是想在字下面加條橫線 */
.list{
font-size: 0.16rem;
color: #666;
border-bottom: 0.1rem dashed #999;
padding: 0 0 0.05rem 0;
}

/* 強制一行顯示，字半截隱藏，多出用...代替 */

.info h4{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 相對於瀏覽器窗口定位 fixed */
#header {

width: 100%; height: 0.45rem; font-size: 0.16rem; margin: 0 auto;
background-color: #333; position: fixed;
top: 0; z-index: 9999;
}

/* 只顯示兩行，其他...代替 */
.infor{

font-weight: normal;
overflow: hidden;
display: box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
-moz-line-clamp:2;
-moz-box-orient:vertical;
-o-line-clamp:2;
-o-box-orient:vertical;
-ms-line-clamp:2;
-ms-box-orient:vertical;
line-clamp:2;
box-orient:vertical;
}

<script type="text/javascript">
//實現下拉列表選擇效果
$(function(){

$(".xuan div ").click(function(){
//$(".xuan a").css('color','#000');
$(this).children().attr('id','dd');
$(this).siblings().children().removeAttr('id');
$(this).children().css('color','#1f4e9f');
$(this).siblings().children().css('color','#000');
})
})parent()
.removeClass("on").eq(e.current-1).addClass("on");
</script>

#CSS
.1 {position:relative;}
.2 {position:absolute;left;0;bottom:0;}
#HTML
<div class="1">
<div class="2"></div>
</div>
不影響其餘元素的狀況下定位最好;

opacity:1

若是 DIV1 裏 只有 DIV2 的話：
在DIV2 CSS樣式裏 加一個 margin-top:10px;
10px 改爲要數值，或者在 DIV1 里加個 內邊距 padding-top:10px;

 

block水平的元素inline-block化後，IE6/7沒有換行符間隙問題，其餘瀏覽器均有；
inline水平的元素inline-block後，全部主流瀏覽器都有換行符/空格間隙問題；
font-size:0，去除換行符間隙，在IE6/7下殘留1像素間隙，Chrome瀏覽器無效，其餘瀏覽器都完美去除；
letter-spacing負值能夠去除全部瀏覽器的換行符間隙，可是，Opera瀏覽器下極限是間隙1像素，0像素會反彈，換行符間隙還原。

<div style="letter-spacing:-3px; font-size:0;">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" style="border-right:4px solid #066;" />
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" style="border-left:4px solid #F36;" />
</div>

使用text-align:justify能夠實現自動等寬水平排列的列表佈局，並且是兩端對齊的，不須要計算寬度，一切都是瀏覽器自動的，很方便很強大。尤爲在自適應佈局中

.box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;}
.list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}

<div class="box">
<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，個人小兔亂撞~~</span>

</div>

 

 

style="border-top:3px solid #000;"

 

$(".tbutton").click(function(){
$("#menu").slideToggle();

/*
var obj=document.getElementById("menu");

if(obj.style.display=="")
obj.style.display="none";
else
obj.style.display="";
*/

})

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

-ms-filter:」progid:DXImageTransform.Microsoft.Alpha(Opacity=50)」;
filter: alpha(opacity=50);

filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #7f80c1e7, endColorstr = #7f213c7c) ;//rgba();7f是透明度。

:nth-child(3n-1)

/* ie背景透明度 */
.bg{width:100px;height:100px;background:rgba(0,0,0,0.3);filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#44000000,endColorstr=#44000000);}

 

font-family: kievit-slab-book,Georgia,serif;這字體數字會上下。

/* 瀏覽器的ico */
<link rel="shortcut icon" href="images/ico/favicon.png">

/* ie瀏覽器的時候調用 */
<!--[if IE]> <link href="css/styleie.css" rel="stylesheet"> <![endif]-->

/* 前端資源 */
https://cnodejs.org/topic/56ef3edd532839c33a99d00e

/* 設計網站 */
http://www.webdesign-inspiration.com/

/*箭頭向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #fff;
}

/*箭頭向下*/
.arrow-down {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}

/*箭頭向左*/
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid yellow;
}

/*箭頭向右*/
.arrow-right {
width:0;
height:0;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
}

/* email發送 */
<a href="mailto:haorooms@126.com">給haorooms發送郵件</a>

 

http://www.iconfont.cn
/* ico */

https://jsfiddle.net/ /* 測試 * /

/* color */
https://color.adobe.com/zh/

/* 設計網站 */

http://www.webdesign-inspiration.com/

/* 前端知識網站 */
http://www.haorooms.com/

/* http://www.uisdc.com/ */

/* email正則表達式 */
var pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
str = '';
console.log(pattern.test(str));

https://convertio.co/zh/ttf-woff/

http://sc.chinaz.com/jiaobendemo.aspx?downloadid=2015114745876&qq-pf-to=pcqq.group

http://emblemmatic.org/markmaker/#/ //logo 藝術字

 

function loadjscssfile(filename,filetype){

if(filetype == "js"){
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src",filename);
}else if(filetype == "css"){

var fileref = document.createElement('link');
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("href",filename);
}
if(typeof fileref != "undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref);
}

}//動態加載js,css
loadjscssfile("do.js","js");
loadjscssfile("test.css","css");

//下拉框點擊出來，而後在非下拉框的範圍點擊操做，下拉框隱藏
在body綁定下拉框隱藏事件，而後在下拉框阻止事件冒泡。

js
在ie9 innerHTML不能是table tr td等，建立在div裏面，而後代替
tbody.replaceChild(divinit.querySelector("tr"), trinitDom);
tr td必定要在table裏面

http://www.css88.com/tool/html2js/ //html轉字符串