/** * Created by wdj on 2017/10/24. */
1.鼠标手的自定义,ie8不兼容
css{ cursor:url(images/1.png),default; }
2.a标签
1 <!--拨打电话--> 2 <a href="tel://010-1221556">010-1221556</a> 3 4 5 <!--打开新网页--> 6 <a href="javascript:;" target="_blank">新页面的打开</a>
<!--从本页面打开新网页-->
<a href="javascript:;" target="_self">从本页面打开新网页</a>
3.现在使用*zoom:1;清除浮动比较少,现在基本改为这样清浮动:
.containt:after{ conten:''; display:table; clear:both; }
zoom的作用:①检测标签是否闭合,②清除浮动,③样式排除法;但是其原理还是不明白.
4.弹框,一直没有注意过,一直使用rgba写的,但是在ie8不兼容(解决兼容,就是自己找对应的颜色值,参考本文第10条
background:rgba(0,0,0,0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000)
),
要写出现带阴影的遮罩:先设一个大的div,里面包含两个,一个作为背后阴影,一个作为中间内容,为了防止继承性
html部分
<div class="tan"> <div class="bg"></div> <div class="tancon"></div>/*屏幕居中*/ </div>
css部分（设定最大最小高度min-height和max-height, 在这个之间的高度可以自适应, 最好tancon外再加一个<div>, 定义宽高但是不给背景, 给tancon背景和padding-bottom ）
.tan { width: 100%; height: 100%; margin: 0 auto; display: none; } .bg { width: 100%; height: 100%; /*兼容IE8及以下版本浏览器*/ filter: alpha(opacity = 30); position: fixed; left: 0; top: 0; bottom: 0; right: 0; margin: 0 auto; z-index: 999998; background-color: #666666; -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } .tancon { width: 472px; height: 280px; position: fixed; background-color: #fff; top: 0; right: 0; left: 0; bottom: 0; margin: auto; text-align: center; z-index: 999999; }
5.在ie8中,input内容不居中,需将input{line-height:;height:;}
select不居中,需使用{padding:7px 0px;}
background-size:200px;//在ie8不被识别;除了网上的一些兼容方法,我的办法还有就是调整一下图片大小,最好是你需要的大小,这样图片的background-size不至于太过夸张的大小.
有时ie浏览器不会自主解析,如img无宽高时.
6.页面最上面的小图标
<link rel="shortcut icon" href="images/favicon.ico" >
7.选择根据屏幕大小,选择css,没有自适应活动
<link rel="stylesheet" media="screen and (min-0px) and (max-device-768px)" href="css/c1.css"/> <link rel="stylesheet" media="screen and (min-768px)" href="css/c2.css"/>
8.文字的一些使用
.css{ text-indent:5px;//首行缩进 letter-spacing:2px;//字间距 }
9.选中文本使用css3选择器 ::selection
body::selection{ color:#fff; background:purple; } body::-moz-selection{ color:#fff; background:purple; }
/*ie9,chmore goole,safari,opera,支持此选择器*/
/*Firefox支持替代的::-moz-selection*/
/*直接用<body>标签body里的其他标签里的文字并不会继承body,奇怪,只能一个标签一个标签的加这个属性和属性值.*/
10.ig8使用rega
可以这样
background: rgb(0, 0, 0); /*不支持rgba的浏览器*/
background: rgba(0,0,0,.4); /*支持rgba的浏览器*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); /*IE8支持*/
最好这样
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom: 1;
参考颜色是下图,参考链接https://blog.csdn.net/u013778905/article/details/52503685
11. js获取name
<lable> <span id="onlinePerson" name="person" onclick="changeImg(this)" > <img id="imgPerson" src="images/invote-checked.png">个人 </span> </lable>
function changeImg(obj) { // console.log(obj.name); //错误的只支持obj.id // $(obj).attr("name"); //jquery写法 console.log(obj.getAttribute("name")); }
12.webstorm新建多个项目:File -> settings -> Directories -> Add Content Root 添加新项目->确定即可。
13.多行文本框(文本域)编辑需要高度自适应, 改变不了<textarea>的样式, 只能用<div>模仿了, 使用contenteditable 属性,来规定元素内容是否可编辑。
<div class="liketextarea" contenteditable="true" ></div>
.liketextarea{ width: 100%; min-height: 1.6rem; border: none; background: transparent; outline: none; font-size: .26rem; color: #1c1c1c; line-height: .44rem; }