随笔，不断累积中……

关于样式相关class的命名

比如，一个菜单配置页面的按钮，颜色是白色的。

命名是要考虑，这个风格的按钮是不是只在这个页面使用。如果只在这个页面使用，可以命名为：menuConfigBtn。相关的样式代码直接写在本页就好了。

如果是其他页面也有可能使用这个风格的按钮，那么需要命名为，whiteBtn。相关样式代码写到相对应的css文件中，

并且，不要和菜单配置页面布局相关的代码写到一起，而是和其他按钮的样式写到一起。

这样在写代码的时候比较麻烦点，但日后维护起来，绝对easy了。

ps，如果这个按钮需要添加js等事件，那么就另外按功能添加class，也就是class="whiteBtn menuConfig"。这样就做到了样式与逻辑的完全分离。

 

关于iframe和css

iframe首其内部引用的css控制，不受其外围样式的影响

 

关于chrome38内核浏览器光标问题。

在最新的chrome38内核浏览器中出现的问题：如果input的line-height比其内部文字大小大的太多，就会出现光标向上靠拢的问题。

 

web页面宽度

几乎已经淘汰的：800px

现在比较通用的：980px （960px、940px）

比较大胆的1024px

宽屏：1200px  1212px

这个主要是市面上显示器的分辨率有关

传统的800*600的显示器几乎已经很少了，不予考虑。

现在比较常见的尺寸为：1024*768     1366*768    1280*800   1440*900  1600*900

滚动条因素：

如果分辨率是1024，你页面也是1024的话，由于border，滚动轴等，很容易页面出现横向滚动轴。

so，以1024为最低参考分辨率的话，页面宽度一般为980（960、940较少）、1002等。

网格系统因素讨论

http://ued.taobao.org/blog/2008/09/grid_systems/

http://ued.taobao.org/blog/2008/09/grid_systems/

页面宽度和页面字体也有联系？

http://yuguo.us/weblog/960-grid-system-is-getting-old/

 其他博客讨论

http://123luoxiaoli.blog.163.com/blog/static/703343312012911383863/

 

1、关于fixed的超出浏览器及响应式问题
fixed元素 在页面变窄（浏览器缩小）的情况下不随页面横滚动轴滚动
新浪微博页面的fixed条也是这种情况，不过它做了响应式处理。
网页新闻页面也是这种情况，不过它没有做任何处理。超出的部分不显示了
腾讯新闻阅读页面，同样没有处理，不过它右侧是float:right的，在最小宽度之上一直是靠右的
结论：单纯通过fixed固定顶栏的，必定出现这种情况，因为fixed本来就是相对于浏览器边框的定位。
但是其他网站通过fixed定位的顶栏很窄，不会对网站整体视觉造成太大的破坏。
如，上面的那两个和恒会网
但是，云领网内页这种超级宽的顶栏情况，以后要尽力避免了。不要使用这种布局了。
（现在2014.1.16，对云领网顶栏做了基本的响应式处理）

 

20150124

• 在JS文件中书写相对路径：JS文件是指在页面中引用的外部JavaScript文件，其中可能采用JavaScript代码生成html代码，由于生成的html代码是嵌入在引用该JS文件的页面中，因此，在描述相对路径时，应该使用被引用的文档或素材相对于【引用JS文件的页面】之间的相对路径。例如，文档“/home/www/a/index.htm”中引用了JS文件“/home/www/a/js/hello.js”，而在该js中生成一段引用素材“/home/www/a/images/1.jpg”的html代码，则在这段代码中，其相对路径应该是“./images/1.jpg”或“images/1.jpg”，而不能是“../images/1.jpg”。
• 在CSS文件中书写相对路径：CSS文件是指在页面中引用的外部样式定义文件，该文件通常用于定义页面中各种html标记的显示效果（例如文本的字体名称、字体大小、缩进、边距等），CSS文件中同样可以引用外部的素材或文档（例如设置某个DIV对象的背景图片）。和JS文件不同，浏览器认为CSS文件也是一个独立的文档，因此，在CSS中对素材的引用可以通过计算素材文件和【该CSS文件】之间的相对路径来实现，而与引用该CSS文件的页面所在的位置无关。例如，文档“/home/www/a/index.htm”中引用了CSS文件“/home/www/a/css/main.css”，而在该CSS中引用了素材“/home/www/a/images/1.jpg”，则在CSS中对于该素材引用的相对路径应该是“../images/1.jpg”，而不能是“./images/1.jpg”或“images/1.jpg”。
• 因为js是根据引用的页面去定位图片路径的所以最好定义一个全局的jsp引用，这样可以设置相对路径也可以直接在全局jsp定义全局变量path在js里引用

原文链接：http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html

 

关于css3及兼容性

原则上尽量使用jquery特效，少使用css3的特效。

在使用css3特效的时候，【禁止】使用浏览器支持不全的属性。如缩放 zoom  变形 transform 和3d属性等。

在网上搜到比较好的源码时，必须在应用到项目之前，用各个浏览器都查看一下，确保兼容性！若不支持某个浏览器，原则上不采用此源码。

 

position:relative;top属性移动div后的空白怎么去掉？

 用margin-top:-100px，可以解决
我的代码：
.list_botton{width:50px; float:right;margin-top:10px; margin-bottom:-65px; position:relative;left:8px;top:-70px;}

ps：对当前元素设置margin-bottom，不要对下面的元素设置margin-top。

 

需要改掉的一个毛病

以后，不要这样写

<div class="line">

　　文字文字文字文字文字文字文字文字……

　　<div class="date">2015.2.11</div>

</div>

 要这样写

<div class="line">

　　<span>文字文字文字文字文字文字文字文字……</span>

　　<div class="date">2015.2.11</div>

</div>

ps2015.3.5：不能那样写的原因是，1，后台不好操作内容，2，会导致ie7文字独占一行，靠右浮动的元素换行。

以下是正确写法：（给div.date向右浮动）

<div class="line">

　　<div class="date">2015.2.11</div>

　　文字文字文字文字文字文字文字文字……

</div>（原理：ie7先创建div.date的位置，然后在创建文字（需独占一行），但是这时div.line内部的空间已被div.date占据右侧。所以不会导致div.date换行，但是其实文字还是独占一行的）

但尽量还是把文字包含到span中比较好。

 

 

小技巧：

收集如slide nav menu等页面组件的源码

尤其是比较通用的功能较全的。

如slide，即可全屏也可限定宽度，内部的图片可大大小都不会导致布局变形。

这样的源码要收集起来。

那些自己曾经在项目中使用过的要重点保存。

不用提议提炼出啦，直接保存整个项目的源码即可。

这样以后建站时就不用一直找特效源码了。