零散记录

-------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;
}

$(".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像素会反弹，换行符间隙还原。

使用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浏览器的时候调用 */

/* 前端资源 */
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转字符串

posted @ 2017-06-21 14:01 就，这个名字阅读(153) 评论(0) 收藏举报

刷新页面返回顶部