刚进入前端开发这个行业,菜鸟一枚,在这几个月的学习当中,给我最真实地感受就是:前端进入容易,深入难。下面发下自己这段时间收集的一些问题,希望以后能不断改善,越做越好。
1、类的命名最好用横杠,不是下划线,因为这样会让IE外的大部分浏览器忽略这个样式的定义。
2、text-indent不能随便乱用哦,这样很容易出问题的(一般的话首行缩进程序会设置)
3、尽量不要在css里面用(@import url("base.css");)来导入其他css文件,因为比较耗内存;可以选择在HTML文件中用<link>标签来导入
css文件
4、底部的话尽量不要把高度设定死了,因为有时候友情链接可能会变多,这时候就会出现问题
5、logo最好加个链接(利于优化);面包屑(类似:list1>list2>list3 这样的结构)的最后一个list3最好加个h1标签(一样利于优化)
但是因为h1是块级元素,为了兼容,又不想使用float,那么可以直接inline行元素化。
6、JavaScript 放置在文档的最后面可以使页面加载速度更快
7、为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
注意,这种方式我们并不推荐所有网站使用,还是要看您自己的情况而定!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
8、 slidedown和slideup不停触发解决方法:利用stop()方法来解决 http://caibaojian.com/sliderdown-slideup.html 但还是会有问题。
//语法结构
$("#div").stop();//停止当前动画,继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态
9、jQuery国内的几个常见cdn加速点 http://www.douban.com/note/371586251/?qq-pf-to=pcqq.c2c
8、定位问题:(absolutely和relative之间的关联要理解)绝对定位的话relative要定位到父级元素,absolutely定位在子级元素上,这样才不会错乱(屏幕缩小会错乱掉)。
9、ie6下鼠标放到二级菜单不显示问题:解决办法:在二级菜单上加背景色
10、a:hover在ie6下无效果:原因:a标签没加href=“JavaScript:void(0);”属性; JavaScript:void(0)和#是一样的都是空连接但前者没有返回值。
11、 z-index问题:(http://blog.sina.com.cn/s/blog_72c6cfa90100vfui.html) 如果父元素没有设定z-index而子元素设定了,那么子元素设定是无效的(因为子元素会被父元素重置掉)
解决办法:直接在父元素上设定z-index (如果子元素想高于父元素再对子元素设置高于父元素的z-index值就可以了)
12、 ie6 ie7 ie8 bug兼容解决网站 http://www.wufangbo.com/ie6-ie7-ie8-css-bug-2/
13、 css引进顺序:先引入的css会优先解析,所以框架引用到的css一般先用link导入,而自己写的css后面导入,这样当重写框架样式的时候才起到覆盖作用。
2015年10月29日
14、(1)inline元素的display属性设置为inline-block时,所有的浏览器都支持;
(2)block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;
对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行,允许空格。(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性)
IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。
IE6下块元素如何实现display:inline-block的效果?
有两种方法:
1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:
div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/
15、 瀑布流 http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/
16、教你学编程的5款游戏: http://blog.jobbole.com/92553/ http://cn.codecombat.com/
17、bootstrap附加导航:注意事项:一定要在body上加data-spy="scroll" data-target="#myaffix" 话说附加导航真难用,还得好好研究啊。
18、fullpage.js 运用及自定义导航参考:http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201481504334743/
2016-1-15
19、bootstrap附加导航:注意事项:一定要在body上加data-spy="scroll" data-target="#myaffix"
20、float:right;在IE7等下自动换行? 解决方法:网上找了下有三种(1):调换顺序,把浮动的放到非浮动的前面;(2)一左一右浮动
(3)利用绝对定位解决 本次第三种方法解决了我的需求所以用了第三种。
21、li在ie7下高度莫名增加了? 参考:http://blog.csdn.net/a9254778/article/details/7234719 或者http://bbs.blueidea.com/thread-2893330-1-1.html
解决方法:里面加上vertical-align:bottom;就可以了。 测试了下貌似是由于li设定了宽和高,然后里面的子元素又浮动了而引起的,所以li跟着浮动也可以解决这个问题。
但是还是推荐上面的方法比较简单方便,后续问题可能也会比较少。
22、inline是行内元素,可以一行排,但是不具备width、height等特性的,
但是如果我变成inline-block作用:就是将a、span等行内元素变成行内块元素,意思就是我可以一行排,又具有width、height这些属性(这就是inline-block的作用)
但是ie67由于他本身浏览器问题,我们必须【*:inline】触发他的haslayout,来使a标签在这些浏览器下面有宽高又可以一行排。而且这个hack必须单独设置,如果你在同一个样式里面设定也无法触发成功。
23、jQuery 实现文本框数量加减微调,并且保证文本框只能输入纯数字:http://www.jb51.net/article/49960.htm
2017-11-21
一、js深度复制的方式
1、使用jq的$.extend(true,target,obj)
2、var newobj = Object.create(sourceobj);
注意:这个方法有个问题就是newobj的更改不会影响sorceobj,但是sourceobj的更改会影响到newobj
3、var newobj = JSON.parse(JSON.stringify(sourceobj));
二、图片预览
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js图片预览</title>
<style>
*{padding: 0; margin: 0;}
.main-box{width: 600px; margin: 100px auto;}
</style>
</head>
<body>
<div class="main-box">
<input type="file" name="file" id="file" onchange="showPreview(this)" />
<img id="preview" src="" width="400px" height="250px" />
</div>
</body><strong>
</strong></html>
function showPreview(source){
var file = source.files[0];
//console.log(file)
if(window.FileReader){
var fr = new FileReader();
console.log(fr);
fr.onloadend = function(e){
document.getElementById('preview').src = e.target.result;
}
}
fr.readAsDataURL(file);
}
2017-12-07
1、伪类和伪元素
特性及区别
- 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
- 伪元素本质上是创建了一个有内容的虚拟容器;
- CSS3中伪类和伪元素的语法不同;
- 可以同时使用多个伪类,而只能同时使用一个伪元素;
二、offsetWidth和clientWidth等
1、clientWidth: 获取对象可见内容的宽度,不包括滚动条,不包括边框;
2、clientHeight: 获取对象可见内容的高度,不包括滚动条,不包括边框;
3、clientLeft: 获取对象的border宽度
4、clientTop:获取对象的border高度
5、offsetWidth (width+padding+border):当前对象的宽度
6、offsetHeight :(Height+padding+border):当前对象的高度。
7、offsetLeft : 当前对象到其上级层(文档)左边的距离。
8、offsetTop :当前对象到其上级层(文档)顶部边的距离。
2017-12-15
var a = new Foo(); new做了以下的事情
var o = new Object();//创建了一个新的空对象o
o.__proto__ = Foo.prototype;//让这个o对象的` __proto__`指向函数的原型`prototype`
Foo.call(o);//this指向o对象
a = o;//将o对象赋给a对象
2018-6-27
导航跳转添加样式
//导航跳转,添加样式
$('#nav li a').each(function(){
var href = window.location.href,hrefLen = href.length-1;
if(window.location.href==this.href){
$(this).addClass("on");
}
if(href.lastIndexOf('/')===hrefLen){
$('.nav li a').eq(0).addClass('on');
}
})