web前端学习笔记1

最新推荐文章于 2022-10-19 12:29:57 发布

原创最新推荐文章于 2022-10-19 12:29:57 发布 · 666 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web #function #class #stylesheet #string #div

html/xhtml 专栏收录该内容

2 篇文章

订阅专栏

1.ie 和 ff 文字居中不一致问题。解决方法：把text-align:center 去掉。

2.背景图片比div宽度大导致出现间隙。解决方法：把div宽度设置得比图片小一些。

3.j如果函数无明确的返回值，或调用了没有参数的return 语句，那么它真正返回的值是undefined.

4.尽管可用Function构造函数创建函数，但最好不要用它，因为用它定义函数比用传统方法要慢。所有函数都应看作是Function类的实例。

5.写样式之前一定要充分考虑到文档结构的合理性，良好的结构可以节省很多写样式的时间。

6.发现样式实现有困难应停下来检查结构的实现有没有更好的布局。

7.记得要清理浮动元素。两种清理浮动的方法如下

1.FF

.goods_list :after 　/* clear the float of ul(goods_list) for non-IE browsers */ { content:""; height:0; display:block; }

2.IE

.goods_list { *zoom:1; height:90px; background:#ffffff; /* the three items followed is for ie6's float bug */ width:86%; padding-right:5px; float:left; }

8.IE6 浮动BUG

蓝色经典上的问题及解决方法

http://bbs.blueidea.com/thread-2969970-1-1.html

解决方法

<!doctype html> <html> <head> <meta charset="gbk" /> <title>Sample page</title> <link rel="stylesheet" href="css_example_url" mce_href="css_example_url" /> <mce:style></mce:style><style mce_bogus="1">* {margin: 0; padding: 0;} .a { background:red; float:left; width:103px ; height:90px; } .b { height:90px; background:blue; float:left; } .clear{ clear:both; }</style> </head> <body> <div class="wrap"> <div class="a" > aaa aaa aaa aaa aaa </div> <ul class="b"> bbbbbbbbbbbbbb </ul> <div class="clear"> </div> </div> </body> </html>

9.YUI 为元素注册事件方法

/* Returns an array of HTMLElements with the given class. For optimized performance, include a tag and/or root node when possible. Note: This method operates against a live collection, so modifying the collection in the callback (removing/appending nodes, etc.) will have side effects. Instead you should iterate the returned nodes array, as you would with the native "getElementsByTagName" method. Parameters: className <String> The class name to match against tag <String> (optional) The tag name of the elements being collected root <String | HTMLElement> (optional) The HTMLElement or an ID to use as the starting point. This element is not included in the className scan. apply <Function> (optional) A function to apply to each element when found o <Any> (optional) An optional arg that is passed to the supplied method overrides <Boolean> (optional) Whether or not to override the scope of "method" with "o" Returns: Array An array of elements that have the given class name eg. (function (){ function emulate_hover(item) { YAHOO.util.Event.on(item,'mouseover',function(){YAHOO.util.Dom.addClass(this,'hover')}); YAHOO.util.Event.on(item,'mouseout',function(){YAHOO.util.Dom.removeClass(this,'hover')}) } YAHOO.util.Dom.getElementsByClassName("one_category",'div','selected_brands',emulate_hover);//为'selected_brands下所有具有one_category类的div元素注册监听事件 })();

9.合并所有具有相同属性的类

10.将背景图片写在一处地方

11.布局的背景图片尽量采用sprites技术来减少 http请求

12.交流问题可以提高效率 ,寻找师兄帮助