散装记录

——-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转配符串

相关文章